高性能JavaScript读后感

Posted 2021-01-28 raindi

这本书让lz对js性能优化有了更深刻的理解，现在因为我们通常用第三方构建工具webpack、gulp等诸如此类，之前总是听说什么dom操作影响性能呢，对这个概念总是有点模糊，但看完这本书之后后，相对而言比较清晰了。
书中有句话说的比较形象，js与dom之间有座桥梁，当我们去访问dom时，无疑是要交过路费的，所以性能优化的最好方式，所以一些操作尽量放在js层面这边来做。时下比较流行的vue、react之类就是如此
虽然现在我们用vue、react这些库比较多，但是像lz上家就要维护以往的项目(jq)，当时就遇到js操作dom太多，浏览器卡死的情况。我当时用的是用定时器分批次操作dom，尽量不要一下子操作，因为浏览器是单线程的，js脚本执行的时候，页面就不会响应。
以下是lz看书总结一些性能优化的方面，不尽全，想更深入了解的，可以去看这本书

1. 脚本文件放在最html文件底部
多数浏览器使用单一线程处理界面刷新和脚本执行，也就是说浏览器同一时间只可以做一件事，如果脚本放在顶部会导致明显的延迟
2. 减少页面中外链脚本文件的数量
也就是说当一个应用依赖多个js文件时，多个文件合并成一个script标签，就可减少性能消耗
3. 无阻塞加载脚本
使用script标签的defer属性
使用动态创建的script元素来下载并执行代码
使用XHR对象下载js代码并注入到页面中
4. 尽量使用局部变量
因为其位于作用域链的起始位置，查找速度更快
5. 使用querySelectAll()的api
6. 合并dom操作，使用文档片段对象，尽量减少重排与重绘
7. 事件委托减少事件处理器的数量
8. 少用if else与switch，通过数组，对象的方式