Vue中fragment.js使用方法详解
大部分内容源自jQuery，当然，同时也参考了component/domify，如果有兴趣去这翻阅原始的代码，可以到jQuery中查找wrapMap；至于domify，直接到github搜索即可，相关项目类容很少，直接看index.js就行了。
createDocumentFragment
如果要在一个节点上一次性插入多个元素怎么办，比如说一次插入10000个节点？
最简单粗暴的方式就是：
varparent=document.getElementById('parent');
for(vari=0;i<10000;i++){
varchild=document.createElement('div');
vartext=document.createTextNode(''+i);
child.appendChild(text);
parent.appendChild(child);
}
不过众所周知的原因，对DOM反复操作会导致页面重绘、回流，效率非常低，而且页面可能会被卡死，这段代码基本是没人用的。
如果分段来进行DOM操作呢，这样就能避免卡死页面了，js忍者秘籍里面提到过可以用setTimeout来改进：
vari=0,max=10000;
setTimeout(functionaddNodes(){
for(varstep=i+500;i
当然，更多能想到的方式应该是，在内存中直接操作节点，所有节点都凑在一起之后再跟DOM树进行交互，把所有节点都串在一个div上，然后再把div挂到DOM树上：
varparent=document.getElementById('parent');
vardiv=document.createElement('div');
for(vari=0;i<10000;i++){
varchild=document.createElement('div');
vartext=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树中，所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此，使用文档片段documentfragments通常会起到优化性能的作用。
简单来说，就是上面一个例子的不需要div中转版本，插入的时候，直接用其子元素替换其本身，非常完美。
虽然说，“好用的都不通用”（特别是针对某公司浏览器），不过这个好用的东西，甚至连IE6都支持。
具体代码大概就长这样：
varparent=document.getElementById('parent');
varfrag=document.createDocumentFragment();
for(vari=0;i<10000;i++){
varchild=document.createElement('div');
vartext=document.createTextNode(''+i);
child.appendChild(text);
frag.appendChild(child);
}
parent.appendChild(frag);
具体性能方面的测试，有兴趣的可以把所有代码都跑一遍。
innerHTML
把一长串字符串转换为对应的DOM节点，正常而言，首先想到的肯定是innerHTML。大概流程就是，先创建一个div节点，然后div.innerHTML=str，根据需要把div的children取出来放到该放的地方去，div本身给扔了。
如果想单独生成一个th节点呢？
试试上面的流程：
vardiv=document.createElement('div');
div.innerHTML='xxx ';
console.log(div);
实际输出是（chrome下）：
xxx
并没有得到想要的：
xxx
对于这样的结果是可以理解的，毕竟一个th放到div里面，怎么看都不对，直接把外围的标签去掉，内容扔到div里面也是相当智能的。
不过架不住，有时候就是要获取一个th节点。
其实也好办，写全了不就得了：
varnode=document.createElement('div');
node.innerHTML='xxx
';
//把外面的几层皮扒掉就是想要的th了
vardepth=3;
while(depth--){
node=node.lastChild;
}
console.log(node.firstChild);
可以看出，结果正是所想要的。
fragment.js
//需要单独处理的一些特殊节点
varmap={
legend:[1,''],
tr:[2,'以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。