您好,登錄后才能下訂單哦!
大部分內(nèi)容源自 jQuery,當(dāng)然,同時(shí)也參考了 component/domify ,如果有興趣去這翻閱原始的代碼,可以到 jQuery 中查找 wrapMap;至于 domify,直接到 github 搜索即可,相關(guān)項(xiàng)目類容很少,直接看 index.js 就行了。
createDocumentFragment
如果要在一個(gè)節(jié)點(diǎn)上一次性插入多個(gè)元素怎么辦,比如說一次插入 10000 個(gè)節(jié)點(diǎn)?
最簡單粗暴的方式就是:
var parent = document.getElementById('parent'); for(var i = 0; i < 10000; i++) { var child = document.createElement('div'); var text = document.createTextNode('' + i); child.appendChild(text); parent.appendChild(child); }
不過眾所周知的原因,對(duì) DOM 反復(fù)操作會(huì)導(dǎo)致頁面重繪、回流,效率非常低,而且頁面可能會(huì)被卡死,這段代碼基本是沒人用的。
如果分段來進(jìn)行 DOM 操作呢,這樣就能避免卡死頁面了,js 忍者秘籍里面提到過可以用 setTimeout 來改進(jìn):
var i = 0, max = 10000; setTimeout(function addNodes() { for(var step = i + 500; i < step; i++) { var child = document.createElement('div'); child.appendChild(document.createTextNode('' + i)); div.appendChild(child); } if(i < max) { setTimeout(addNodes, 0); } }, 0);
當(dāng)然,更多能想到的方式應(yīng)該是,在內(nèi)存中直接操作節(jié)點(diǎn),所有節(jié)點(diǎn)都湊在一起之后再跟 DOM 樹進(jìn)行交互,把所有節(jié)點(diǎn)都串在一個(gè) div 上,然后再把 div 掛到 DOM 樹上:
var parent = document.getElementById('parent'); var div = document.createElement('div'); for(var i = 0; i < 10000; i++) { var child = document.createElement('div'); var text = document.createTextNode('' + i); child.appendChild(text); div.appendChild(child); } parent.appendChild(div);
如上,只跟 DOM 樹交互一次,性能方面肯定是大有改善的,不過額外插入了一個(gè) div,如果說不是跟div之類的節(jié)點(diǎn)進(jìn)行交互呢,比如在 table 中插入 th、td?
這時(shí)候,createDocumentFragment 就該出馬了,翻譯過來叫“文檔片段”,按MDN的描述:
DocumentFragments 是一些 DOM 節(jié)點(diǎn)。它們不是 DOM 樹的一部分。通常的使用場景是創(chuàng)建一個(gè)文檔片段,然后將創(chuàng)建的 DOM 元素插入到文檔片段中,最后把文檔片段插入到 DOM 樹中。在 DOM 樹中,文檔片段會(huì)被替換為它所有的子元素。
因?yàn)槲臋n片段存在與內(nèi)存中,并不在 DOM 樹中,所以將子元素插入到文檔片段時(shí)不會(huì)引起頁面回流(對(duì)元素位置和幾何上的計(jì)算)。因此,使用文檔片段 document fragments 通常會(huì)起到優(yōu)化性能的作用。
簡單來說,就是上面一個(gè)例子的不需要 div 中轉(zhuǎn)版本,插入的時(shí)候,直接用其子元素替換其本身,非常完美。
雖然說,“好用的都不通用”(特別是針對(duì)某公司瀏覽器),不過這個(gè)好用的東西,甚至連 IE6 都支持。
具體代碼大概就長這樣:
var parent = document.getElementById('parent'); var frag = document.createDocumentFragment(); for(var i = 0; i < 10000; i++) { var child = document.createElement('div'); var text = document.createTextNode('' + i); child.appendChild(text); frag.appendChild(child); } parent.appendChild(frag);
具體性能方面的測(cè)試,有興趣的可以把所有代碼都跑一遍。
innerHTML
把一長串字符串轉(zhuǎn)換為對(duì)應(yīng)的 DOM 節(jié)點(diǎn),正常而言,首先想到的肯定是 innerHTML。大概流程就是,先創(chuàng)建一個(gè) div 節(jié)點(diǎn),然后 div.innerHTML = str,根據(jù)需要把 div 的 children 取出來放到該放的地方去,div 本身給扔了。
如果想單獨(dú)生成一個(gè) th 節(jié)點(diǎn)呢?
試試上面的流程:
var div = document.createElement('div'); div.innerHTML = '<th>xxx</th>'; console.log(div);
實(shí)際輸出是(chrome 下):
<div>xxx</div>
并沒有得到想要的:
<div><th>xxx</th></div>
對(duì)于這樣的結(jié)果是可以理解的,畢竟一個(gè) th 放到 div 里面,怎么看都不對(duì),直接把外圍的標(biāo)簽去掉,內(nèi)容扔到 div 里面也是相當(dāng)智能的。
不過架不住,有時(shí)候就是要獲取一個(gè) th 節(jié)點(diǎn)。
其實(shí)也好辦,寫全了不就得了:
var node = document.createElement('div'); node.innerHTML = '<table><tbody><tr><th>xxx</th></tr></tbody></table>'; // 把外面的幾層皮扒掉就是想要的 th 了 var depth = 3; while(depth--) { node = node.lastChild; } console.log(node.firstChild);
可以看出,結(jié)果正是所想要的。
fragment.js
// 需要單獨(dú)處理的一些特殊節(jié)點(diǎn) var map = { legend : [1, '<fieldset>', '</fieldset>'], tr : [2, '<table><tbody>', '</tbody></table>'], col : [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'], _default : [0, '', ''] }; map.td = map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>']; map.option = map.optgroup = [1, '<select multiple="multiple">', '</select>']; map.thead = map.tbody = map.colgroup = map.caption = map.tfoot = [1, '<table>', '</table>'] map.text = map.circle = map.ellipse = map.line = map.path = map.polygon = map.polyline = map.rect = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>']; var TAG_RE = /<([\w:]+)/; module.exports = function(templateString) { var frag = document.createDocumentFragment(), m = TAG_RE.exec(templateString); // 單純字符串的情況 if(!m) { frag.appendChild(document.createTextNode(templateString); return frag; } var tag = m[1], wrap = map[tag] || map._default, depth = wrap[0], prefix = wrap[1], suffix = wrap[2], node = document.createElement('div'); // 拼接節(jié)點(diǎn)字符串 node.innerHTML = prefix + templateString.trim() + suffix; // 去除外包裹層,只留字符串轉(zhuǎn)化的節(jié)點(diǎn) while(depth--) node = node.lastChild; // 只有一個(gè)節(jié)點(diǎn)的情況 if(node.firstChild === node.lastChild) { frag.appendChild(node.firstChild); return frag; } // 多個(gè)節(jié)點(diǎn),依序添加到 frag var child; while(child = node.firstChild) { frag.appendChild(child); } return frag; }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。