web前端性能优化 —— 前端人必需的知识储备
本文较长，也比较全，从多个维度、各个阶段来谈前端性能优化的各种实用技巧。（重点与难点放了图片解析，希望能够对大家有所帮助）
请求阶段
-
开启HTTP2
-
多路复用，突破TCP连接数限制。
-
头部压缩，节省请求带宽。
-
二进制分帧方式，提高通信效率。
-
-
开启http缓存
-
利用Expires和Cathe-Control开启强缓存
-
利用Last-Modified/If-Modified-Since开启协商缓存
-
-
开启gzip压缩
- 降低关键资源的带宽体量（实测可压缩60%以上）
-
缩小请求头
- 减少一些不必要的Cookie信息携带。
-
利用CND（把大文件的加载变成一个请求，直接拿过来用，适用于大图、大文件）
- 减少单次RTT时长，加速资源获取。
-
域名分片
- 将一个网站的资源放在多个域名下面，拓展TCP连接数。
-
降低HTTP请求数
-
CSS和JS，根据实际情况，进行内联与合并。
-
图片合成雪碧图，小图片base64化。
-
避免css @import。
-
可以用CSS实现的不要用图片，再小的图片也是一个请求！
-
-
避免重定向
- 避免延迟整个HTML文档的传输。
- DNS预解析
// 打开DNS预读取
<meta http-equiv="x-dns-prefetch-control" content="on">
// 强制查询特定主机名
<link rel="dns-prefetch" href="http://example.com">
- 域名预连接
<link rel="preconnect" href="http://example.com">加载阶段
-
资源压缩
- 对前端资源进行压缩
-
加载时机
- js设置为异步加载（defer/async）
-
加载策略
-
SPA业务中，模块按需加载（路由懒加载）
-
css媒体查询，定义场景加载
-
图片懒加载
-
-
预获取
<link rel="prefetch" href="image.png">- 预加载
<link rel="preload" href="image.png">渲染阶段
- 预渲染
<link rel="prerender" href="image.png">-
避免使用iframe
- iframe连接页面后，会开启独立的页面进程，消耗资源
-
HTML优化
-
控制html标签层级，减轻解析负担，降低解析时间
-
首屏html可以少量，主体结构动态插入
-
-
CSS优化
-
CSS文件放head，让CSSOM先行，避免阻塞渲染树
-
控制css选择器层级，不要太深，降低匹配开销
-
尽量用id和class选择器，不要过渡层叠
-
避免使用通配符，提高匹配效率
-
-
JS优化
-
JS文件放在body底部，避免阻塞DOM树构建
-
避免在body内容中间插入script脚本
-
JS异步加载，设置defer/async
-
运行阶段
-
CSS层面
-
给图片设置尺寸，避免载入显示后，造成重排
-
巧用绝对定位，脱离文档流，避免后续操作，造成重排
- 因为绝对定位的元素一般处于默认复合层，所以它的改变还是会造成整个图层的重绘
-
巧用合成属性（will-change/3D transform）
-
新建合成层，独立于默认复合层，后续改变不会造成重拍/重绘
-
因为是合成层，运作基于合成线程，未占用主线程，效率较高
-
能用CSS实现的效果，尽量不用JS实现，充分发挥合成线程的能力
-
利用合成属性时，一定要设置z-index，防止后面的重叠元素同样被游览器新建图层，浪费资源
-
-
-
JS层面
-
巧用异步处理，减少js对主线程的长时占用（定时器/Web Worker）
-
不影响this的情况下，对反复访问的对象进行变量保存
-
避免过长的对象层次访问，提高读取效率
-
合理使用局部变量，减少作用域跨越
-
减少使用for...in循环，避免遍历原型链
-
巧用事件委托，降低事件绑定的内存占用
-
慎用闭包，避免使用with和eval
-
条件判断上，避免类型转换
-
条件较多时，使用switch代替if..else
-
最小化语句数，避免多个声明
-
简化终止条件，简化循环体，减值迭代
-
减少字符串拼接，避免"临时字符串"的出现
-
当叠加字符串的时候，字符串变量应该靠左
-
数组join方法，比其他字符串连接方式慢
-
字符串concat方法，比使用简单的+和+=慢
-
-
DOM层面
-
尽量用新选择器API代替老API
-
尽量通过Id和Class选择器进行DOM获取
-
避免直接操作style进行布局信息修改，造成重排
-
避免强制同步布局（在JS更改DOM信息后，立即访问）
-
DOM集合操作非常昂贵，应转换为数组再进行操作
-
对dom访问信息进行缓存，对dom改变进行批量操作
-
对操作频繁的dom，尽可能采用position:absolute（避免重排）
-
对操作密集的dom，先display:none——>操作——>再display:block（避免重排）
-
对操作量很大的dom，采用文档碎片createDocumentFragment
-
-
webApi层面
-
用requestAnimationFrame代替setTimeOut/setInterval进行动画实现（这一点是大多数人不知道的，画重点）
-
根据业务情况，适时使用Storage和IndexDB缓存数据，减少不必要的ajax请求
-
利用Web Worker处理无关dom的任务，减少对主线程的时间占用
-
对那些不会改变服务器状态，只获取数据的Ajax请求，应该使用get类型（让游览器缓存起来）
-
over
这应该是非常全的一份文档了，之前有小伙伴反应我的博客收费问题，这个实在是当时脑壳一热，万分抱歉，现在也改不回来。
本人承诺：秉承着开源互助的态度，以后所有的博客概不收费、玩这些花里胡哨的。
本文非常的细致，我翻了之前好几年前的笔记，详细介绍了各种处理方案和应该注意的地方，如果对大家有帮助，可以赏个赞。
本文地址：https://blog.csdn.net/qq_35942348/article/details/110873709