这本书让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,通过数组,对象的方式