前端性能优化方法
前端性能优化主要有两个方面:
- 初始阶段--->加载优化
- 运行阶段--->渲染优化
一、初始阶段--->加载优化
1. 首页加载慢
- 首页加载图片过多:
- 使用懒加载的方法减少首屏图片的加载量(懒加载的原理就是监听滚动条事件,如果满足滚动条距离浏览器顶部的高度===图片距离顶部的高度,将data-src赋值给src)
- 对于小图标可以采用字体图标iconfont的方式解决
- 对于小图片采用精灵图的方式解决
- 首页的请求量过多:
- 通过nginx服务器来做资源文件的合并或者通过webpack等打包工具进行物理打包
- 在代码层面,对于需要引入一些大型三方库的时候,可以通过特定的babel插件来按需加载
- 还可以使用vue lazy、react lazy或其他动态导入的方案来进行前端路由层面的动态加载,减少首页的js和css的大小
- 首页请求的资源过大:
- CSS和JS可以通过webpack混淆和压缩
- 混淆:将JS代码进行字符串加密(最大程度减少代码量,比如将长变量名变成单个字母)
- 压缩:取出注释空行以及console.log等调试代码
- 压缩图片
- 通过自动化工具压缩图片
- 对图片进行转码--->base64格式
- 使用webP格式
- 通过在服务器端开启gzip进行全部资源压缩
- CSS和JS可以通过webpack混淆和压缩
2. 实现CDN加速
CDN:内容分发网络,放置静态资源(JS CSS 图片等)的服务器
CDN是一种解决方案,不是一个实际的东西
- CDN服务器主要是用来放置静态资源的服务器,可以用来加速静态资源的下载
- 之所以能够加速下载,主要是因为会在很多地方都部署CDN服务器,如果用户需要下载静态资源,会自动选择最近的节点下载
- 另外,由于CDN服务器的地址一般都跟主服务器的地址不同,所以可以破除浏览器对同一个域名发送请求的限制
- PS1:HTTP1.1请求:对于同一个协议、域名、端口,浏览器允许同时打开最多6个TCP连接(等于说是最多同时发送6个请求)
- PS2:HTTP2.0:引入了多路复用的机制,可以最大化发送请求数量
二、运行阶段--->渲染优化
终极目标:减少DOM操作
- 虚拟DOM,用js数据来模拟真实的DOM树,从而大大减少操作真实DOM的次数
- 在渲染的时候,使用document.createDocumentFragment创建虚拟节点,从而避免引起没有必要的渲染
- 采用分段渲染的方式,最后使用window.requestAnimationFrame逐帧渲染
例:插入十万条数据如何不卡顿:
1 // 插入十万条数据 2 const total = 100000; 3 let ul = document.querySelector('ul'); // 拿到 ul 4 5 // 懒加载的思路 -- 分段渲染 6 // 1. 一次渲染一屏的量 7 const once = 20; 8 // 2. 全部渲染完需要多少次,循环的时候要用 9 const loopCount = total / once; 10 // 3. 已经渲染了多少次 11 let countHasRender = 0; 12 13 function add() { 14 // 创建虚拟节点,(使用 createDocumentFragment 不会触发渲染) 15 const fragment = document.createDocumentFragment(); 16 // 循环 20 次 17 for (let i = 0; i < once; i++) { 18 const li = document.createElement('li'); 19 li.innerText = Math.floor(Math.random() * total); 20 fragment.appendChild(li); 21 } 22 // 最后把虚拟节点 append 到 ul 上 23 ul.appendChild(fragment); 24 // 4. 已渲染的次数 + 1 25 countHasRender += 1; 26 loop(); 27 } 28 29 // 最重要的部分来了 30 function loop() { 31 // 5. 如果还没渲染完,那么就使用 requestAnimationFrame 来继续渲染 32 if (countHasRender < loopCount) { 33 // requestAnimationFrame 叫做逐帧渲染 34 // 类似于 setTimeout(add, 16); 35 // 帧:一秒钟播放多少张图片,一秒钟播放的图片越多,动画就约流畅 36 // 1000/60 = 16 37 window.requestAnimationFrame(add); 38 } 39 } 40 loop();