對DOM操作效率的提高

本文部分內容，引用自

想要知道如何提高效率，那麼首先我們需要知道，關於dom的操作，哪乙個最影響整體的效率，也就是說，哪一處所占用的時間較大，首先，我們介紹一下，html頁面顯示在瀏覽器中，都要經過哪些流程。

其中，第三步，對render tree的各個結點計算布局資訊為時間占用較大的一部分，而在這一步中，包含了layout，layout操作，是對render tree中物件的大小、尺寸進行計算，在預設情況下，瀏覽器的layout為lazy模式，也就是說，並非每次我們對dom進行修改時都會layout，而是將這些修改儲存在乙個佇列中，在一定的情況下統一提交佇列，進而實現layout操作。

在本文中，對於dom操作效率的提高，針對於減少layout次數這一思路來進行。因此，我們要想方設法，延長dom修改佇列提交的間隔時間，儘量減少對dom修改操作提交的次數。

當我們需要獲取某一屬性，這一屬性需要計算才能得到並且，佇列中存在尚未提交的dom修改操作，則此時，dom修改操作的佇列將會被提交。舉個栗子

var h1 = element1 . clientheight ;
element1 . style . height = ( h1 * 2 ) + 'px' ;
var h2 = element2 . clientheight ;
element2 . style . height = ( h2 * 2 ) + 'px' ;
var h3 = element3 . clientheight ;
element3 . style . height = ( h3 * 2 ) + 'px' ;

為了提高效率，減少更新render tree的次數，可以先統一讀取屬性，然後統一修改dom，這樣，就可以減少更新render tree的次數，**示例如下「：

var h1 = element1 . clientheight ;
var h2 = element2 . clientheight ;
var h3 = element3 . clientheight ;
element1 . style . height = ( h1 * 2 ) + 'px' ;
element2 . style . height = ( h2 * 2 ) + 'px' ;
element3 . style . height = ( h3 * 2 ) + 'px' ;

當我們需要對dom做出大量修改時，可以先建立乙個虛擬結點，將所有修改附加在該節點，最後將該虛擬節點一次性提交給在render tree上存在的結點，則相當於只提交了一次修改操作。**示例如下：

var fragment = document . createdocumentfragment ( ) ; 
for ( var i = 0 ; i < items . length ; i ++ ) 

效率的提高

本篇文章記錄一些提高效率的方法，包括但不限於手機，電腦，辦公軟體等等，後續將在本文基礎上進行更新，歡迎收藏 by葉常落。看文章之前請先思考乙個歷史問題。18世紀的工業革命時期，紡織工人害怕失業而砸掉蒸汽機，你對這個問題怎麼看？是引入蒸汽機的資本家贏了還是那些打砸機器的工人贏了？那些害怕失業的紡織工人...

DOM之對節點的操作

1.createelement 建立乙個元素節點 let p document.createelement p 這個方法必須要傳遞乙個節點作為引數 不能字串 是放在父元素的末尾 2.insertbefore 插入到某乙個元素的前面 語法 父元素.insertbefore 你要插入的元素,哪乙個元素的...

DOM對元素屬性的操作

獲取元素屬性值 input.getattribute type 給元素新增屬性值 第乙個引數是屬性名，第二個引數是屬性的值 必須兩個引數 input.setattribute yes ok yes ok新增屬性 乙個值 input.attributes.setnameditem disabled 建...