前端进行性能优化的方案很多，这里只列举部分。在实际应用中不要贪多，想着都用上，要对网站的主要用户群体进行针对性优化。

1、降低请求量

​ ① 合并资源，减少http请求数量。

​ ② lazyLoad，如图片懒加载。分批加载，每次只加载一部分。

​ ③ 使用字体图标或CSS绘制，来代替部分图片。

2、加快请求速度

​ ① 预解析DNS

​ ② 使用HTTP2.0

​ ③ 并行加载

​ ④ CDN 分发

​ ⑤ webP，对图片进行压缩，减少图片体积。

​ ⑥ minify/gzip 压缩，对css、js等文件进行压缩（去除空格、回车等），减少文件体积

补充知识：

​ webP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且图像质量几乎无差异。同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀。

​ Minify把 CSS 和 JS 压缩和削减(Minify：去掉空格回车符等)，以及把多个CSS，JS文件整合到一个文件里。

3、缓存

​ ① HTTP协议缓存请求

​ ② 离线缓存 manifest

​ ③ 本地缓存 localStorage

补充知识：

​ GET请求可以缓存，POST请求不能缓存。GET请求后退/刷新无害，POST后退/刷新则会致使重新提交数据

4、渲染

​ ① JS优化，如防抖、节流、事件委托、减少重排重绘等。

​ ② CSS优化，如提取公共样式减少代码量、减少选择器嵌套层数、精灵图等。

​ ③ 服务器端渲染

​ ④ 使用Web Workers

​ ⑤ CSS写在文件头部，JS写在文件底部。

补充知识：

​ 客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。

​ 服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML，使首屏渲染快，SEO（搜索引擎优化） 好。

​