|
前端进行性能优化的方案很多，这里只列举部分。在实际应用中不要贪多，想着都用上，要对网站的主要用户群体进行针对性优化。
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（搜索引擎优化） 好。
?
|