脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue中fragment.js

Vue中fragment.js使用方法小结

 更新时间：2020年02月17日 08:55:06   投稿：hebedich  
这篇文章主要给大家汇总介绍了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;
}

您可能感兴趣的文章:

相关文章

  • 在vue中使用Base64转码的案例

    在vue中使用Base64转码的案例

    这篇文章主要介绍了在vue中使用Base64转码的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue.use源码分析

    Vue.use源码分析

    这篇文章主要为大家详细介绍了Vue.use源码，Vue.use方法的引入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue实现表格增删改查效果的实例代码

    vue实现表格增删改查效果的实例代码

    本篇文章主要介绍了vue实现增删改查效果的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue2的16种传参通信方式总结和示例讲解

    Vue2的16种传参通信方式总结和示例讲解

    Vue2中路由传参数:props(父传子),$emit与v-on(子传父),EventBus(兄弟传参),.sync与update:(父子双向),v-model(父子双向),ref $children与$parent,$attrs与$listeners(爷孙双向),provide与inject(多层传参),Vuex,Vue.prototype,路由,浏览器缓存,window,$root,slot(父传子)
    2024-08-08
  • 使用vue.js在页面内组件监听scroll事件的方法

    使用vue.js在页面内组件监听scroll事件的方法

    今天小编就为大家分享一篇使用vue.js在页面内组件监听scroll事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue使用xlsx和xlsx-style导出表格出现部分样式缺失的问题解决

    Vue使用xlsx和xlsx-style导出表格出现部分样式缺失的问题解决

    这篇文章主要为大家详细介绍一下Vue使用xlsx-style导出excel时样式的设置,以及出现添加背景色,合并单元格部分样式缺失问题的解决,需要的可以参考下
    2024-01-01
  • 详解mpvue scroll-view自动回弹bug解决方案

    详解mpvue scroll-view自动回弹bug解决方案

    设置了scroll-top的scroll-view组件，在组件所在vue实例data发生改变时会自动回弹到最上方，非常具有实用价值，需要的朋友可以参考下
    2018-10-10
  • 深入理解vuex2.0 之 modules

    深入理解vuex2.0 之 modules

    本篇文章主要介绍了vuex2.0 之 modules,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue项目配置vuex并开启热更新方式

    vue项目配置vuex并开启热更新方式

    这篇文章主要介绍了vue项目配置vuex并开启热更新方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue开发树形结构组件(组件递归)

    vue开发树形结构组件(组件递归)

    这篇文章主要为大家详细介绍了vue开发树形结构组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论