DOM解析和優化

2022-02-03 21:02:18 字數 850 閱讀 7515

dom解析

dom優化

dom操作會導致repaint和reflow,減少repaint和reflow可以優化效能。

1.合併多次dom操作為一次

element.style.bordercolor = '#f00';

element.style.borderstyle = 'solid';

element.style.borderwidth = '1px';

變成

//

優化方案1,用+=,否則會覆蓋原有樣式

element.style.csstext += 'border: 1px solid #f00;';

//優化方案2

element.classname += 'empty';

2.使用文件片段(documentfragment)或innerhtml批量插入dom

3.讀取dom元素的布局資訊,並且用變數快取,而不是在迴圈中多次讀取

for (var i=0; i < len; i++)

變為

var targettop =targetelement.offsettop;

for (var i=0; i < len; i++)

4.動畫元素使用absolute定位,脫離文件,使用transform,opacity等進行動畫,不要使用left,top進行動畫

5.使用事件委託減少事件繫結

DOM解析和SAX解析區別

1 操作 dom 將所有檔案讀取到記憶體中,形成dom樹,如果檔案量過大,澤無法使用。sax 順序讀入所需要的檔案內容,不會一次性全部讀取,不受檔案大小限制。2 訪問限制 dom dom樹在記憶體中形成,可隨意存放或讀取檔案樹的任何部分,沒有次數限制 sax 由於採用部分讀取,只能對檔案按順序從頭到...

DOM解析和SAX解析的區別

dom解析和sax解析的區別 no區 別dom解析sax解析1操作 將所有檔案讀取到記憶體中形成dom樹,如果檔案量過大,則無法使用 順序讀入所需要的檔案內容,不會一次性全部讀取,不受檔案大小的限制 2訪問限制 dom樹在記憶體中形成,可以隨意存放或讀取檔案樹的任何部分,沒有次數限制 由於採用部分讀...

xml的解析和JAXP的dom解析

問題 xml的解析方式有哪些?dom和sax的區別 答 dom解析方式 把xml文件全部載入到記憶體中,形成樹狀結構 缺點 如果文件過大,容易產生記憶體溢位問題 優點 可以做增刪改的操作 sax解析方式 邊讀邊解析,基於事件驅動 優點 不會產生記憶體溢位的問題 缺點 不能做增刪改的操作,查詢速度非常...