一、需求一

將數(shù)組['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer'] 展示到頁(yè)面<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對(duì)象

解決缺點(diǎn)： 每一次循環(huán)都會(huì)去查找為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);
})

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

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

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);

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

二、需求二

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

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

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

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

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

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

通過(guò)事件代理批量操作事件