高性能JavaScript读书笔记

发表于 | 分类于

1 Loading and Execution

由于js的加载和执行会阻塞页面其他操作，影响用户体验，所以需要解决这个问题，解决的办法主要还是：

  1. script标签的defer（IE），asyc（HTML5）属性，实现这个标签异步加载，不影响其他的下载及页面渲染。
  2. 动态创建script标签。
  3. XHR下载js代码，注入到页面中。

    2 Data Access

  4. 在同一个函数中需要多次读取同一个对象的属性时，最好将它存入一个局部变量，避免多余的属性查找带来的性能开销。

3 DOM Scripting

  1. HTML collections每次获取其length属性都会进行查询操作，文档更新时，这个collections会自动更新，所以要将length属性缓存，同时把集合拷贝到数组中也可以提高性能。
  2. 会发生重排的情况有：
    1）添加或删除可见的DOM
    2）DOM的位置改变
    3）DOM尺寸改变
    4）内容改变（文本改版或者图片被另一个不同尺寸的所替代）
    5）浏览器窗口改变尺寸
  3. 获取元素的offsetTop、scrollTop、clientTop序列属性、getComputedStyle()会导致浏览器立即重排，破坏了浏览器自身的性能优化方案（通过队列修改优化重排过程，而不是一次修改就重排一次）。所以不要在布局信息改变时来获取以上属性。
  4. 优化方法：
    1. 用修改class的方式来实现批量属性修改；
    2. 将元素脱离文档流，作完操作后再插入回文档（隐藏、文档碎片、clone）；
    3. 动画元素用绝对定位

4 Algorithms and Flow Control

  1. 尽量避免使用for-in循环，改善循环性能的最好办法是减少每次迭代中的运算量。
  2. 当条件判断很多时，选用switch而不是ifelse，无论从代码易读性还是从性能考虑。
  3. 当很多离散数值需要测试判断时，使用查表法可以消除条件判断，提高性能。

5 Strings and Regular Expressions

  1. IE7-，字符串连接操作用数组的join会更快。

6 Responsive Interfaces

  1. js代码运行时间不应该超过100毫秒，对于长耗时的代码，可以用定时器分段执行，从而不会堵塞UI线程。
  2. Web Worker是独立开辟线程，不会影响页面的主线程。纯数据，和用户浏览器UI没有关系的长耗时脚本可以用Web Worker。

7 Ajax

  1. 对于不需要缓存的资源。可以和服务器端配合，一次请求多个资源，把多个资源打包成一个字符串，然后js接收后再把数据分割，比如一次请求多个图片，可以减少HTTP请求。

8 Programming Practices

  1. 尽量避免使用eval()和Function()，定时器第一个参数也不要传入字符串，因为这会导致重新启动一个解释器，非常耗费性能。
  2. 声明数组和对象尽量使用对象字面量，而不是用构造函数。
  3. 对于需要重复判断的条件，比如事件绑定，可以在第一次判定后就覆盖整个函数，后续调用就不需要再判断了，当然这部分判断也可以提前进行。
  4. 位运算可以代替很多纯数学操作，比如判断奇偶，用和1进行位与运算就可以代替了，偶数和1进行位与操作结果是0，奇数结果是1。
  5. 原生方法是最快的。

9 Building and Deploying High-Performance JavaScript Applications

  1. 开发部署过程需要合并、压缩文件，设置缓存时间。

10 Tools

  1. 网页变慢时，分析资源加载时间及脚本的执行时间，寻找优化点。