高性能的JavaScript笔记1 | Wukong's Blog

作用域链和标识符解析

在函数执行中，每遇到一个变量，都会经历一次标识符解析过程以决定从哪里获得或存储数据。该过程搜索执行环境的作用域链，查找同名的标识符。搜索过程从作用域链头部开始，也就是当运行函数的活动对象。如果找到，就使用这个标识符对应的变量，如果没找到，就继续搜索作用域链中的下一个对象…正是这个搜索过程影响了性能。

一个标识符所在的位置越深，它的读写速度也就越慢。所以，如果某个跨作用域的值在函数中被引用一次以上，纳闷就把它存储在局部变量里面。

DOM的访问和修改

DOM和javascript是两个独立的功能，两个独立的功能只要通过接口彼此连接就会产生消耗。通常的做法是减少访问DOM的次数，把运算尽量留在js这一段处理。

重绘和重排

当DOM的变化影响了元素的几何属性，浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树，这个过程称为重排（reflow），完成重排后，浏览器会重新绘制受影响的部分到屏幕中，这个过程叫做重绘（repaint）。例如改变元素背景色会导致重绘，改变元素大小，会引起重排和重绘。

重排何时发生

1. 添加或删除可见的元素
2. 元素位置改变
3. 元素尺寸变化
4. 内容改变
5. 页面渲染器初始化
6. 浏览器窗口尺寸改变

另外js使用属性和方法，也会引起重排。

1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop, scrollLeft, scrollWidth, scrollHeight
3. client(top, left, width, height)
4. getComputedStyle() (currentStyle in ie)

颠倒数组的顺序来体改循环性能

for(let i = 0; i < arr.length; i++)

// replace
for(let i = arr.length; i--)
// reason: 控制条件与true相比时，任何非零的数自动转换成true，而零值等同于false.

减少迭代次数

最广为人知的模式被称为“达夫设备(duff’s device)”