|
4. 過(guò)多的DOM調(diào)用
在Web開發(fā)中，JavaScript的一個(gè)很重要的作用就是對(duì)DOM進(jìn)行操作�？赡阒烂�？對(duì)DOM的操作是非常昂貴的，因?yàn)檫@會(huì)導(dǎo)致瀏覽器執(zhí)行回流（reflow）操作。而執(zhí)行了過(guò)多的回流操作，你就會(huì)發(fā)現(xiàn)自己的網(wǎng)站變得越來(lái)越慢了。我們應(yīng)該盡可能的減少DOM操作。
回流操作主要會(huì)發(fā)生在幾種情況下：
- 改變窗體大小
- 更改字體
- 添加移除stylesheet塊
- 內(nèi)容改變哪怕是輸入框輸入文字
- CSS虛類被觸發(fā)如 :hover
- 更改元素的className
- 當(dāng)對(duì)DOM節(jié)點(diǎn)執(zhí)行新增或者刪除操作或內(nèi)容更改時(shí)。
- 動(dòng)態(tài)設(shè)置一個(gè)style樣式時(shí)（比如element.style.width="10px"）。
- 當(dāng)獲取一個(gè)必須經(jīng)過(guò)計(jì)算的尺寸值時(shí)，比如訪問(wèn)offsetWidth、clientHeight或者其他需要經(jīng)過(guò)計(jì)算的CSS值（在兼容DOM的瀏覽器中，可以通過(guò)getComputedStyle函數(shù)獲取；在IE中，可以通過(guò)currentStyle屬性獲�。�
解決問(wèn)題的關(guān)鍵，就是限制通過(guò)DOM操作所引發(fā)回流的次數(shù):
1.在對(duì)當(dāng)前DOM進(jìn)行操作之前，盡可能多的做一些準(zhǔn)備工作，保證N次創(chuàng)建，1次寫入。
2.在對(duì)DOM操作之前，把要操作的元素，先從當(dāng)前DOM結(jié)構(gòu)中刪除：
- 通過(guò)removeChild()或者replaceChild()實(shí)現(xiàn)真正意義上的刪除。
- 設(shè)置該元素的display樣式為“none”。
修改操作完成后，將上面這個(gè)過(guò)程反轉(zhuǎn)過(guò)來(lái)，建議使用第2種方式。
3.CSS部分
另外一個(gè)經(jīng)常引起回流操作的情況是通過(guò)style屬性對(duì)元素的外觀進(jìn)行修改，如element.style.backgroundColor = "blue";
每次修改元素的style屬性，都肯定會(huì)觸發(fā)回流操作，要解決這個(gè)問(wèn)題可以：
- 使用更改className的方式替換style.xxx=xxx的方式。
- 使用style.cssText = '';一次寫入樣式。
- 避免設(shè)置過(guò)多的行內(nèi)樣式
- 添加的結(jié)構(gòu)外元素盡量設(shè)置它們的位置為fixed或absolute
- 避免使用表格來(lái)布局
- 避免在CSS中使用JavaScript expressions(IE only)
4.將獲取的DOM數(shù)據(jù)緩存起來(lái)。這種方法，對(duì)獲取那些會(huì)觸發(fā)回流操作的屬性（比如offsetWidth等）尤為重要。
5.當(dāng)對(duì)HTMLCollection對(duì)象進(jìn)行操作時(shí)，應(yīng)該將訪問(wèn)的次數(shù)盡可能的降至最低，最簡(jiǎn)單的，你可以將length屬性緩存在一個(gè)本地變量中，這樣就能大幅度的提高循環(huán)的效率。
出處：W3C標(biāo)準(zhǔn)WEB前端DHTML精英俱樂(lè)部
責(zé)任編輯：bluehearts
上一頁(yè) JavaScript優(yōu)化細(xì)節(jié) [1] 下一頁(yè) JavaScript優(yōu)化細(xì)節(jié) [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) JavaScript優(yōu)化細(xì)節(jié) [2]
