前端性能优化方法

标签：rgba   nginx   anim   端口   ++   query   dom   log   不同   

前端性能优化主要有两个方面：

• 初始阶段--->加载优化
• 运行阶段--->渲染优化

一、初始阶段--->加载优化

1. 首页加载慢

• 首页加载图片过多：
  • 使用懒加载的方法减少首屏图片的加载量（懒加载的原理就是监听滚动条事件，如果满足滚动条距离浏览器顶部的高度===图片距离顶部的高度，将data-src赋值给src）
  • 对于小图标可以采用字体图标iconfont的方式解决
  • 对于小图片采用精灵图的方式解决
• 首页的请求量过多：
  • 通过nginx服务器来做资源文件的合并或者通过webpack等打包工具进行物理打包
  • 在代码层面，对于需要引入一些大型三方库的时候，可以通过特定的babel插件来按需加载
  • 还可以使用vue lazy、react lazy或其他动态导入的方案来进行前端路由层面的动态加载，减少首页的js和css的大小
• 首页请求的资源过大：
  • CSS和JS可以通过webpack混淆和压缩
    • 混淆：将JS代码进行字符串加密（最大程度减少代码量，比如将长变量名变成单个字母）
    • 压缩：取出注释空行以及console.log等调试代码
  • 压缩图片
    • 通过自动化工具压缩图片
    • 对图片进行转码--->base64格式
    • 使用webP格式
  • 通过在服务器端开启gzip进行全部资源压缩

2. 实现CDN加速

CDN：内容分发网络，放置静态资源（JS CSS 图片等）的服务器

CDN是一种解决方案，不是一个实际的东西

• CDN服务器主要是用来放置静态资源的服务器，可以用来加速静态资源的下载
• 之所以能够加速下载，主要是因为会在很多地方都部署CDN服务器，如果用户需要下载静态资源，会自动选择最近的节点下载
• 另外，由于CDN服务器的地址一般都跟主服务器的地址不同，所以可以破除浏览器对同一个域名发送请求的限制
  • PS1：HTTP1.1请求：对于同一个协议、域名、端口，浏览器允许同时打开最多6个TCP连接（等于说是最多同时发送6个请求）
  • PS2：HTTP2.0：引入了多路复用的机制，可以最大化发送请求数量

二、运行阶段--->渲染优化

终极目标：减少DOM操作

1. 虚拟DOM，用js数据来模拟真实的DOM树，从而大大减少操作真实DOM的次数
2. 在渲染的时候，使用document.createDocumentFragment创建虚拟节点，从而避免引起没有必要的渲染
3. 采用分段渲染的方式，最后使用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();

前端性能优化方法

标签：rgba   nginx   anim   端口   ++   query   dom   log   不同   

原文地址：https://www.cnblogs.com/coder-zero/p/14754160.html