前端性能优化方法

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

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

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

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逐帧渲染

例：插入十万条数据如何不卡顿：

// 插入十万条数据
const total = 100000;
let ul = document.querySelector('ul'); // 拿到 ul

// 懒加载的思路 -- 分段渲染
// 1. 一次渲染一屏的量
const once = 20;
// 2. 全部渲染完需要多少次，循环的时候要用
const loopCount = total / once;
// 3. 已经渲染了多少次
let countHasRender = 0;

function add() {
  // 创建虚拟节点，（使用 createDocumentFragment 不会触发渲染）
  const fragment = document.createDocumentFragment();
  // 循环 20 次
  for (let i = 0; i < once; i++) {
    const li = document.createElement('li');
    li.innerText = Math.floor(Math.random() * total);
    fragment.appendChild(li);
  }
  // 最后把虚拟节点 append 到 ul 上
  ul.appendChild(fragment);
  // 4. 已渲染的次数 + 1
  countHasRender += 1;
  loop();
}

// 最重要的部分来了
function loop() {
  // 5. 如果还没渲染完，那么就使用 requestAnimationFrame 来继续渲染
  if (countHasRender < loopCount) {
    // requestAnimationFrame 叫做逐帧渲染
    // 类似于 setTimeout(add, 16);
    // 帧：一秒钟播放多少张图片，一秒钟播放的图片越多，动画就约流畅
    // 1000/60 = 16
    window.requestAnimationFrame(add);
  }
}
loop();