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

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