一、需求一

將數(shù)組['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer'] 展示到頁面<div class='list-box'></div>;

• 最慢做法

const listData = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer'];
listData.forEach((value)=>{
 const pNode = document.createElement("p");
 pNode.innerText = value;
 document.querySelector('.list-box').appendChild(liNode);
})

優(yōu)化

1. 緩存dom對象

解決缺點： 每一次循環(huán)都會去查找為list-box的元素，效率自然非常低，所以我們需要將元素在循環(huán)前查詢完畢，在循環(huán)中僅僅是引用就行了：

const listData = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer'];
const listBoxEle = document.querySelector('.list-box');
listData.forEach((value)=>{
 const pNode = document.createElement("p");
 pNode.textContent = value;
 listBoxEle.appendChild(liNode);
})

在一般情況下，我們會根據(jù)需要，將一些頻繁被查找的元素緩存起來，在查找它或查找它的子孫元素時，以它為起點進行查找，就能提高查找效率了。

2. 一次性DOM節(jié)點生成

const listData = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer'];
const listBoxEle = document.querySelector('.list-box');
const listNode = []
listData.forEach((value)=>{
  listNode.push(`<p>${value}</p>`)
})
listBoxEle.innerHTML = listNode;

3. 在內(nèi)存中操作元素(文檔片段 DocumentFragment)

const listBoxEle = document.querySelector('.list-box');
const fragment = document.createDocumentFragment();
const listData = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];

listData.forEach(function(value) {
    const pNode = document.createElement('p');
    pNode.textContent = value;
    fragment.appendChild(pNode);
});

listBoxEle.appendChild(fragment);

因為文檔片段存在于內(nèi)存中，并不在DOM樹中，所以將子元素插入到文檔片段時不會引起頁面回流（對元素位置和幾何上的計算）。因此，使用文檔片段通常會帶來更好的性能。

二、需求二

需要通過JavaScript給元素增加樣式
比如如下代碼：

element.style.fontSize = '24px';
element.style.color = 'white';

這樣效率很低，每次修改style屬性后都會觸發(fā)元素的重繪，如果修改了的屬性涉及大小和位置，將會導致回流。所以我們應當盡量避免多次為一個元素設置style屬性，應當通過給其添加新的CSS類，來修改其CSS

優(yōu)化： 通過類修改樣式

.element {
    font-size: 24px;
    color: #fff;
}
element.className += " element";

三、事件監(jiān)聽優(yōu)化

通過事件代理批量操作事件