具体代码大概就长这样：
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(),
