如何提高.Net动态页面响应速度?
-
研究表明,页面响应速度超过5秒,90%的用户会选择关闭页面。影响页面响应速度因素很多,分别从前端,后端,数据库,运维阐述。
一、前端性能优化(引用网址 https://www.jianshu.com/p/60b715bd5d73)
思路:分析一个页面从输入 URL 到页面加载显示完成的所有步骤,采用分治法逐步优化。
1、优化DNS查询
减少域名:尽量把所有的资源放在一个域名下。一个域名同时可以发4(IE8)或8个请求(Chrome)。请求文件少,用1个域名,文件多用多个域名。与3权衡。
2、优化TCP协议
- TCP连接复用,使用keep-alive:连接回复加上请求头:keep-alive。第一次请求不断开,第二次请求复用。
- 使用http 2.0版本:多路复用,连接复用率会更高
3、优化发送的HTTP请求
- 合并JS或CSS文件
- inline image:使用data:url scheme来内连图片
- 减小cookie体积,每个请求都会附带cookie,所以不要滥用cookie。
- 合理使用CasheControl代替发送HTTP请求
- 同时发送多个请求(浏览器自带)IE8可以同时请求下载4个的css文件,Chrome可以同时请求下载8个 。
4、优化接受响应
- 设置Etags:浏览器重复与请求服务器一样的文件,ETag响应304。
- Gzip压缩大文件 使用macos gzip,
npm server gzip
gzip 文件名
其响应头为Content-Encodinging:gzip
,先压缩接收到再解压缩。缺点:耗费浏览器CPU,权衡
5、优化DOCTYPE
- 不能不写,不能写错
6、优化CSS,JS请求
- 使用CDN:用CDN请求静态资源同时可以增大同时下载数量,内容分发网络(CDN)可以使请求总时间降低,也可以减少cookie
- CSS放在head里:使其尽早下载,因为chrome需要下载完所有的css后才渲染页面
- JS放在body里的最后:尽早显示整个页面,获取节点。
7、使用懒加载
- 组件懒加载
const xxx =()=>import('./components/xxx.vue')
- 路由懒加载
8、优化用户体验
- 用户看到哪些内容就请求哪些内容
- 加一个loading动画用户会感觉时间变快
9、减少监听器,使用事情委托
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> let liList = document.querySelectorAll('li') // liList[0].onclick = ()=>console.log(1) // liList[1].onclick = ()=>console.log(2) // liList[2].onclick = ()=>console.log(3) // liList[3].onclick = ()=>console.log(4) //法一:监听太多 let ul = document.querySelector('ul') ul.onclick = (e) => { if (e.target.tagName === 'LI') { console.log(e.target.innerText) } }//法二:减少监听,采用事件委托 </script> </body>
10、优化图片大小
11、减少或合并DOM操作或使用虚拟DOM
// 不好的方式 var elem = $('#elem'); for (var i = 0; i < 100; i++) { elem.append('<li>element '+i+'</li>'); } // 好的方式 var elem = $('#elem' ), arr = []; for (var i = 0; i < 100; i++) { arr.push('<li>element ' +i+'</li>' ); } elem.append(arr. join(''));
12、对大量数据计算使用缓存
// data.length === 100000 for(var i = 0;i < data.length;i++){ // do something... } //上面的代码没有下面的好 for(var i = 0,len = data.length;i < len;i++){ // do something... }
13、使用setTimeout降低调用接口频率
二、后端性能优化
1、冗长繁琐代码架构重构,精简业务
2、循环语句避免sql查询
3、大量数据查询采用分页
4、不经常变数据保存在缓存中,从缓存中读,如Redis,Cache等
5、无关显示的业务用异步处理,如埋点数据
6、数据库增删改查尽可能批量,削峰处理
三、数据库
1、合理利用索引,定期维护索引
2、大表数据水平或垂直分库分表
3、一定时间以前的数据移植到历史库中
4、读写分离
5、耗时统计数据放在统计表中,利用Schedule维护
6、正确使用sql语句,避免用法不当消耗数据库性能
7、使用存储过程,但需衡量可维护性
四、运维
1、利用负载均衡部署网站
2、利用监控工具维护硬件资源,合理升级降级