ie8加载js太慢_web前端性能优化——如何提高页面加载速度

什么叫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降低调用接口频率