前端进行性能优化的方案很多，这里只列举部分。在实际应用中不要贪多，想着都用上，要对网站的主要用户群体进行针对性优化。
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（搜索引擎优化） 好。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/222182.html原文链接：https://javaforall.net
