image.png
image.png
image.png
image.png
以上来自 web.dev/fast/
数据存储优化
- 字面量形式创建的对象或者数组性能更好。
- 访问局部变量更快，局部变量位于作用域链的最前面，查找速度最快。
- 将对象保存在局部变量中，避免重复到全局去查找该对象。
- 嵌套越深的对象成员，查找时间越长，要减少嵌套层数。
页面渲染优化
script放在</body>标签前，这样不阻塞页面渲染。如果放在head标签内，浏览器会先下载js并解析，然后才解析DOM并渲染，但是脚本之间不会阻塞，浏览器支持脚本并行下载
DOM操作优化
- 频繁操作DOM导致性能降低，因为需要查找整个DOM树。
- 读取HTML集合（document.getElementBy...('div')）的length属性会引发集合进行更新，所以可以将其length缓存到局部变量中,或者将数组复制一份存到变量中，遍历该变量，这样读取属性会更快。
- querySelector()返回的是nodeList列表，性能比htmlList好
- 重排渲染树，重绘重排好的渲染树,要避免触发重排，触发重排的情况
- 添加删除dom、位置改变、尺寸改变、内容改变、浏览器窗口改变
条件及循环优化
- for循环采用递减循环（i--）、存储length,可提高性能
- if最好用于两者之一的判断，离散值用switch，数量多的用数组
- 遍历大数组或者多任务，当js处理时间超过100ms时，则可以使用定时器进行任务分割或者使用web worker，以避免页面假死及影响用户输入。
消除函数重复检测环境
- 延迟加载
- 先检测浏览器环境，重写函数
- 条件预加载
- 使用三目运算确定函数体
