DOM操作
使用js操作DOM的代價(jià)是昂貴的，有一個(gè)貼切的比喻，DOM與ECMScript就像兩座小島，而他們之間由一個(gè)收費(fèi)的橋梁連接，ECMScript每次訪問DOM都要“收費(fèi)”。
所以DOM操作的性能優(yōu)化有兩點(diǎn)技巧：
- 將運(yùn)算盡量放在ECMScript一端，減少DOM操作
- 對(duì)DOM對(duì)象進(jìn)行緩存
重繪與重排
當(dāng)DOM中的元素幾何屬性發(fā)生變化時(shí)，就會(huì)發(fā)生重排，重排一定會(huì)觸發(fā)重繪；當(dāng)元素只是發(fā)生樣式變化時(shí)，只會(huì)觸發(fā)重繪。
重排的代價(jià)是非常昂貴的。
所以應(yīng)該盡量避免重排的發(fā)生：
- 對(duì)同一DOM元素的操作盡量寫在一起，最小化重排的次數(shù)
- 不要在會(huì)引起重排的語句中穿插需要返回最新布局信息的語句，比如offsetTop、scrollTop、clientTop、getComputedStyle等
- 使用fragment元素，批量操作DOM元素時(shí)使之脫離文檔流，操作完之后再一次性加入文檔
- 將需要多次觸發(fā)重排的元素的position設(shè)置為absolute或fixed，以避免觸發(fā)其他元素的重排
