大部分內(nèi)容源自 jQuery，當(dāng)然，同時(shí)也參考了 component/domify ，如果有興趣去這翻閱原始的代碼，可以到 jQuery 中查找 wrapMap；至于 domify，直接到 github 搜索即可，相關(guān)項(xiàng)目類容很少，直接看 index.js 就行了。
創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)鐵山港,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
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);
}
不過眾所周知的原因，對 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ì)引起頁面回流(對元素位置和幾何上的計(jì)算)。因此，使用文檔片段 document fragments 通常會(huì)起到優(yōu)化性能的作用。
簡單來說，就是上面一個(gè)例子的不需要 div 中轉(zhuǎn)版本，插入的時(shí)候，直接用其子元素替換其本身，非常完美。
雖然說，“好用的都不通用”（特別是針對某公司瀏覽器），不過這個(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);
具體性能方面的測試，有興趣的可以把所有代碼都跑一遍。
innerHTML
把一長串字符串轉(zhuǎn)換為對應(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 = 'xxx ';
console.log(div);
實(shí)際輸出是（chrome 下）：
xxx
并沒有得到想要的：
xxx
對于這樣的結(jié)果是可以理解的，畢竟一個(gè) th 放到 div 里面，怎么看都不對，直接把外圍的標(biāo)簽去掉，內(nèi)容扔到 div 里面也是相當(dāng)智能的。
不過架不住，有時(shí)候就是要獲取一個(gè) th 節(jié)點(diǎn)。
其實(shí)也好辦，寫全了不就得了：
var node = document.createElement('div');
node.innerHTML = '| xxx |
|---|
可以看出，結(jié)果正是所想要的。
fragment.js
// 需要單獨(dú)處理的一些特殊節(jié)點(diǎn)
var map = {
legend : [1, ''],
tr : [2, '以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
