Vue中fragment.js使用方法小結
createDocumentFragment
如果要在一個節點上一次性插入多個元素怎麼辦，比如說一次插入 10000 個節點？
最簡單粗暴的方式就是：
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 反覆操作會導致頁面重繪、迴流，效率非常低，而且頁面可能會被卡死，這段程式碼基本是沒人用的。
如果分段來進行 DOM 操作呢，這樣就能避免卡死頁面了，js 忍者祕籍裡面提到過可以用 setTimeout 來改進：
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);
當然，更多能想到的方式應該是，在記憶體中直接操作節點，所有節點都湊在一起之後再跟 DOM 樹進行互動，把所有節點都串在一個 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 樹互動一次，效能方面肯定是大有改善的，不過額外插入了一個 div，如果說不是跟div之類的節點進行互動呢，比如在 table 中插入 th、td？
這時候，createDocumentFragment 就該出馬了，翻譯過來叫“文件片段”，按MDN的描述：
DocumentFragments 是一些 DOM 節點。它們不是 DOM 樹的一部分。通常的使用場景是建立一個文件片段，然後將建立的 DOM 元素插入到文件片段中，最後把文件片段插入到 DOM 樹中。在 DOM 樹中，文件片段會被替換為它所有的子元素。
因為文件片段存在與記憶體中，並不在 DOM 樹中，所以將子元素插入到文件片段時不會引起頁面迴流(對元素位置和幾何上的計算)。因此，使用文件片段 document fragments 通常會起到優化效能的作用。
簡單來說，就是上面一個例子的不需要 div 中轉版本，插入的時候，直接用其子元素替換其本身，非常完美。
雖然說，“好用的都不通用”（特別是針對某公司瀏覽器），不過這個好用的東西，甚至連 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
把一長串字串轉換為對應的 DOM 節點，正常而言，首先想到的肯定是 innerHTML。大概流程就是，先建立一個 div 節點，然後 div.innerHTML = str，根據需要把 div 的 children 取出來放到該放的地方去，div 本身給扔了。
如果想單獨生成一個 th 節點呢？
試試上面的流程：
var div = document.createElement(`'div'`); div.innerHTML = '<th>xxx</th>'`;` console.log(div);
實際輸出是（chrome 下）：
<`div>xxx</div`>
並沒有得到想要的：
<`div><th>xxx</th></div`>
對於這樣的結果是可以理解的，畢竟一個 th 放到 div 裡面，怎麼看都不對，直接把外圍的標籤去掉，內容扔到 div 裡面也是相當智慧的。
不過架不住，有時候就是要獲取一個 th 節點。
其實也好辦，寫全了不就得了：
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);
可以看出，結果正是所想要的。
fragment.js
// 需要單獨處理的一些特殊節點
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');
// 拼接節點字串
node.innerHTML = prefix + templateString.trim() + suffix;
// 去除外包裹層，只留字串轉化的節點
while(depth--) node = node.lastChild;
// 只有一個節點的情況
if(node.firstChild === node.lastChild) {
frag.appendChild(node.firstChild);
return frag;
}
// 多個節點，依序新增到 frag
var child;
while(child = node.firstChild) {
frag.appendChild(child);
}
return frag;
}