中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

方案四：通過(guò)文檔片段對(duì)象（DocumentFragment）創(chuàng)建一組元素

這個(gè)方案允許我們創(chuàng)建并插入很多個(gè)元素而只觸發(fā)一次重解析。要實(shí)現(xiàn)這點(diǎn)需要用到所謂的文檔片段對(duì)象（DocumentFragment）。我們先在 DOM之外創(chuàng)建一個(gè)文檔片段對(duì)象（這樣它也就不需要解析和渲染），然后我們?cè)谖臋n片段對(duì)象中創(chuàng)建很多個(gè)元素，最后我們把這個(gè)文檔片段對(duì)象中所有的元素一次 性放到DOM里面去，只觸發(fā)一次重解析。

需求：

我們要寫(xiě)一個(gè)函數(shù)，往一個(gè)指定的元素上面增加10個(gè)超鏈接。如果我們簡(jiǎn)單的直接插入10個(gè)超鏈接到元素上面，就會(huì)觸發(fā)10次重解析。

function addAnchors(element) {
  var anchor;
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    element.appendChild(anchor);
  }
}

解決方案：

要解決這個(gè)問(wèn)題，我們要先創(chuàng)建一個(gè)文檔片段對(duì)象，然后把每個(gè)新創(chuàng)建的超鏈接都插入到它里面去。當(dāng)我們把文檔片段對(duì)象用appendChild命令插 入到指定的節(jié)點(diǎn)時(shí)，這個(gè)文檔片段對(duì)象的所有子節(jié)點(diǎn)就一起被插入到指定的元素里面，而且只需要觸發(fā)一次重解析。

function addAnchors(element) {
  var anchor, fragment = document.createDocumentFragment();
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    fragment.appendChild(anchor);
  }
  element.appendChild(fragment);
}

本文鏈接：http://m.95time.cn/tech/web/2010/7427.asp　

出處：emu in blogjava
責(zé)任編輯：bluehearts

上一頁(yè) 加速Javascript:DOM操作優(yōu)化 [3] 下一頁(yè)

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。