天天看點

dom響應慢_如何提高Dom通路速度

在浏覽器中對于Dom的操作和普通的腳本的操作處于兩個不同的dll中,兩個dll的互動是比較耗時的,優化對Dom的操作可以提高腳本的執行速度。下面是對如何優化的一些總結:

将需要多次操作的節點存儲在一個變量中,避免多次擷取。

對于大多數浏覽器來說innerHTML操作比Dom操作速度要快,最新的浏覽器則相反,但對于大多數日常操作來說具體差異并不大,另外,如果需要新建立的html片段中的腳本能夠執行則需要使用Dom操作。

不建議用數組的 length 屬性做循環判斷條件。通路集合的 length 比數組的length 還要慢。當每次疊代過程通路集合的 length 屬性時,它導緻集合器更新。可以簡單的将length儲存在一個變量中,也可以将集合先存儲在數組中。

周遊 children 比 childNodes 更快,因為集合項更少。

重繪和重排版是負擔很重的操作,可能導緻網頁應用的使用者界面失去相應。是以,十分有必要盡可能減少這類事情的發生。減少方法有三種,一:将需要影響的集合先隐藏,在處理完成後再展示;二:建立需操作節點的備份,對備份處理完成後替換原節點;三:建立節點群,對節點群操作完成後替換到原節點,最高效,操作方式如:

var fragment = document.createDocumentFragment();//建立節點群,文檔片段

appendDataToElement(fragment, data);//增加節點到節點群

document.getElementById('mylist').appendChild(fragment);//僅引發一次重新排版

另外對行内樣式的操作可以通過document.getElementById("doc").style.cssText修改元素style屬性

以上就是本文的全部内容,希望本文的内容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支援腳本之家!