读书笔记(03) - 性能 - JavaScript高级程序设计

[ZengLingYong]

作用域链查找

作用域链的查找是逐层向上查找。查找的层次越多，速度越慢。随着硬件性能的提升和浏览器引擎的优化，这个慢我们基本可以忽略。

除了层级查找损耗的问题，变量的修改应只在局部环境进行，尽量避免在局部环境下去操作修改父级变量的值。（react/vue 单向数据流的数据传输方式）

优化方法：声明一个变量存储引用（该方法应用甚多）

不必要的属性查找

// 未优化（window.location.href 3*2 6次）
var query = window.location.href.substring(window.location.href.indexOf('?'));

// 优化后（3次，以后多次调用url，查询次数不会增加）
var url = window.location.href;
var query = url.substring(url.indexOf('?'));
url = null;

函数里面声明的变量，在函数调用栈执行后退出时，会自动清除引用。而全局变量和闭包则会与之相反，继续保存，所以使用用后需手动标记清除，以免造成内存泄漏。

优化循环

1. 减值迭代
2. 简化终止条件
3. 简化循环体
4. 使用后测试循环

减值迭代

日常应用不多，与增值迭代的区别，就在i存储的值。减值迭代i的值不断在变小，存储的空间也在变小。

但在前端极少需要遍历上万次上亿次的数据，上千上百都很少，所以这个优化可忽略。而且我们遍历的顺序一般都是从数组头部开始，所以增值迭代应用的更多。

// 增值迭代（用的较多）
for(var i = 0; i < len; i++) {
    //...
}

// 减值迭代
for(var i = len - 1; i >= 0 ; i--) {
    //...
}

简化终止条件 (常用)

终止条件应该是一个固定值判断，应避免在终止条件上做其他运算（属性查找等）。

// 未优化，每次循环都会去计算数组长度
var arr = ['HTML', 'CSS', 'JavaScript'];
for (var i = 0; i < arr.length; i++) {
    //...
}

// 优化后
for (var i = 0, len = arr.length; i < len; i++) {
    //...
}
// 声明了一个变量len用于储存数组长度，只会计算一次

简化循环体

循环体的代码应该着重于只需要遍历处理的代码，其他无关代码应放置到循环体外面。

后测试循环

最常用的for循环和while循环都是前测试循环。而do-while这种后测试循环，可以避免最初终止条件的计算，因此运行更快。

前测试循环（for/while），可能一次都不会执行循环体

后测试循环（do...while），至少执行一次

用确定索引值更快

// for循环遍历
var arr = ['HTML', 'CSS', 'JavaScript'];
for (let i = 0, len = arr.length; i < len; i++) {
    arr[i];
}

// 确定索引值
arr[0]; 
arr[1]; 
arr[2];

其他

1. 原生方法较快（Math)
2. switch语句较快 (多个if情况下)
3. 位运算符较快

TIPS: 判断优化，最可能的到最不可能的顺序组织（if/switch)

最小语句数

符合 write less, do more 的代码追求

多个变量声明合并

// 多个var声明
var name = 'KenTsang';
var age = 28;
var job = 'Developer';

// 合并一个var声明
var name = 'KenTsang',
    age = 27,
    job = 'Developer';

插入迭代值

// 优化前
var name = value[i];
i++;

// 优化后
var name = value[i++];

数组/对象字面量

创建引用类型可以使用构造函数和字面量两种方式，不过日常习惯都使用字面量，因为语句更简洁，写起来更像数据封装。

// 字面量
var arr = [1, 2, 3, 4];
var obj = {
    name: 'KenTsang'
}

// 构造函数
var arr = new Array(1, 2, 3, 4);
var obj = new Object();
obj.name = 'KenTsang';

DOM优化交互

最小现场更新

现场更新：一旦你需要访问的 DOM 部分是已经显示的页面的一部分，那么你就是在进行一个现场更新

文档片段

文档片段相当一个临时的占位符，只有片段中的内容会被添加到DOM上，片段本身并不会被添加。

// 代码片段标签
var ele  = document.getElementById('ul');
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'IE'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

// 只会操作一次DOM
ele.appendChild(fragment);

innerHTML

合并插入代码一次性设置innerHTML。

// 优化前：操作多次DOM
var list = document.getElementById("myList");
for (var i=0; i < 10; i++) {
    list.innerHTML += "<li>Item " + i + "</li>";
}

// 优化后：操作一次DOM
var innerHtml = '';
for (var i = 0; i < 10; i++) {
    innerHtml += '<li>Item' + i + '</li>';
}
list.innerHTML = innerHtml;

事件代理（事件委托）

通过事件流——冒泡机制实现代理，子元素事件触发冒泡到父元素，由父元素绑定一个事件进行统一处理，避免多个事件绑定影响性能。

<ul class="list">
    <li class="item">HTML</li>
    <li class="item">CSS</li>
    <li class="item">JavaScript</li>
</ul>

var listEle = document.getElementById('list');

listEle.addEventListener('click', function(event) {
    if (event.target.className.indexOf('item') > -1) {
        console.log(event.target.innerHTML); 
    }
})

// jquery
$('#list').on('click', '.item', function(event){
    console.log($(this).html());
})

注意HTMLCollection

任何时候要访问 HTMLCollection，不管它是一个属性还是一个方法，都是在文档上进行一个查询，这个查询开销很昂贵。

// 一个死循环例子
<a href="">link</a>
    
var existLinkEle = document.getElementsByTagName('a');
for (var i = 0; i < existLinkEle.length; i++) {     
    console.log(i);
    var linkEle = document.createElement('a');
    document.body.appendChild(linkEle);
}
// body会不断地插入a标签

因为existLinkEle.length每次循环都会重新计算页面a节点的数量，而得到的值一直递增。

// 优化（一个变量存储引用）
var len = existLinkEle.length;
for (var i = 0; i < len; i++) {
    //...
}

返回HTMLCollection对象情况有：

1. document.getElementByTagName()。
2. 获取元素的childNodes属性
3. 获取元素的attributes属性
4. document.forms,document.images等

---

参考文档

• 《JavaScript高级程序设计》

作者：以乐之名
本文原创，有不当的地方欢迎指出。转载请指明出处。