什么叫web前端性能优化?使用户觉得页面加载快!
使用户觉得页面加载快!
使用户觉得页面加载快!
重要的话说三遍!!!
(接下来总结下前端提高页面加载速度的一些方法。)
前端性能优化
思路:分析一个页面从输入 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.减少监听器,使用事件委托
- 1
- 2
- 3
- 4
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)
}
}//法二:减少监听,采用事件委托
10.优化图片大小
11.减少或合并DOM操作或使用虚拟DOM
// 不好的方式var elem = $('#elem');
for (var i = 0; i < 100; i++) {
elem.append('
element '+i+'');}
// 好的方式var elem = $('#elem' ),
arr = [];
for (var i = 0; i < 100; i++) {
arr.push('
element ' +i+'' );}
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降低调用接口频率