Vue中fragment.js使用方法详解
大部分内容源自 jquery,当然,同时也参考了 component/domify ,如果有兴趣去这翻阅原始的代码,可以到 jquery 中查找 wrapmap;至于 domify,直接到 github 搜索即可,相关项目类容很少,直接看 index.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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 对Python3 pyc 文件的使用详解
下一篇: ASP.NET 路由