JavaScript 常見錯(cuò)誤五:低效的DOM操作

2021-09-18 15:59 更新

js中的DOM基本操作非常簡(jiǎn)單,但是如何能有效地進(jìn)行這些操作一直是一個(gè)難題。這其中最典型的問題便是批量增加DOM元素。增加一個(gè)DOM元素是一步花費(fèi)很大的操作。而批量增加對(duì)系統(tǒng)的花銷更是不菲。一個(gè)比較好的批量增加的辦法便是使用 document fragments :

var div = document.getElementsByTagName("my_div");  

var fragment = document.createDocumentFragment(); 

 for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } div.appendChild(fragment.cloneNode(true)); 

直接添加DOM元素是一個(gè)非常昂貴的操作。但是如果是先把要添加的元素全部創(chuàng)建出來(lái),再把它們?nèi)刻砑由先ゾ蜁?huì)高效很多。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)