作用域链查找

作用域链的查找是逐层向上查找。查找的条理越多，速率越慢。跟着硬件机能的提拔和浏览器引擎的优化，这个慢我们基础能够疏忽。

除了层级查找消耗的题目，变量的修正应只在部份环境举行，只管防止在部份环境下去操纵修正父级变量的值。（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高等程序设计》

作者：以乐之名

本文原创，有不当的处所迎接指出。转载请指明出处。