前端性能优化

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

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();