前端性能优化

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

1.主要解决首屏加载慢的问题（根本问题就是资源请求过多且文件体积大的问题）

    1.图片处理；  可以使用图片懒加载、雪碧图、字体图标iconfont的方式  来减少图片请求

    2.css /js； 通过nginx服务器来做资源文件的合并或者通过webpack等打包工具进行物理打包，还可以使用vue lazy、react lazy或其他动态导入的方案来进行前端路由层面的动态加载，减少首页的js和css的大小

    3.体积过大的问题；

      1）图片； 可以采用图片压缩、base64转换 、webp格式的转换   开启gzip全部资源压缩； 

     2）js/css； 可以利用webpack 混淆和压缩 optimization;

2.采用cdn加速； 

 CDN是一种解决方案； 他是用来放静态资源的服务器；可以用来加速静态资源的下载；

 cdn之所有能加速，是因为它会在很多地方部署cdn服务器，当用户需要下载资源的时候，会自动选择最近的节点进行下载；

cdn服务器和主服务器不是同一个域名地址，还能解决同一外域名下发送请求限制；

 

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

1. 减少dom操作

虚拟DOM，用js数据来模拟真实的DOM树，从而大大减少操作真实DOM的次数

在渲染的时候，使用document.createDocumentFragment创建虚拟节点，从而避免引起没有必要的渲染

采用分段渲染的方式，最后使用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();