首页 >> js开发 >> JavaScriptVue中fragment.js使用方法小结
JavaScriptVue中fragment.js使用方法小结
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
createDocumentFragmentcreateDocumentFragment如果要在一个节点上一次性插入多个元素怎么办，比如说一次插入 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);
}
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);
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);
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);
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);
具体性能方面的测试，有兴趣的可以把所有代码都跑一遍。innerHTMLinnerHTML把一长串字符串转换为对应的 DOM 节点，正常而言，首先想到的肯定是 innerHTML。大概流程就是，先创建一个 div 节点，然后 div.innerHTML = str，根据需要把 div 的 children 取出来放到该放的地方去，div 本身给扔了。如果想单独生成一个 th 节点呢？试试上面的流程：
var div = document.createElement(`'div'`);
div.innerHTML = 'xxx '`;`
console.log(div);
var div = document.createElement(`'div'`);
div.innerHTML = 'xxx '`;`
console.log(div);
实际输出是（chrome 下）：<`div>xxx并没有得到想要的：<`div>xxx 对于这样的结果是可以理解的，毕竟一个 th 放到 div 里面，怎么看都不对，直接把外围的标签去掉，内容扔到 div 里面也是相当智能的。不过架不住，有时候就是要获取一个 th 节点。其实也好办，写全了不就得了：
var node = document.createElement(`'div'`);
node.innerHTML = '
'`;`
// 把外面的几层皮扒掉就是想要的 th 了
var depth = 3;
while`(depth--) {`
node = node.lastChild;
}
console.log(node.firstChild);
var node = document.createElement(`'div'`);
node.innerHTML = '
'`;`
// 把外面的几层皮扒掉就是想要的 th 了
var depth = 3;
while`(depth--) {`
node = node.lastChild;
}
console.log(node.firstChild);
可以看出，结果正是所想要的。
fragment.jsfragment.js
// 需要单独处理的一些特殊节点
var map = {
legend : [1, ''],
tr : [2, '', '
'],
col : [2, '
'],
_default : [0, '', '']
};
map.td = map.th = [3, '
'];
map.option = map.optgroup = [1, ''];
map.thead = map.tbody = map.colgroup = map.caption = map.tfoot = [1, '', '
']
map.text = map.circle = map.ellipse = map.line = map.path = map.polygon = map.polyline = map.rect = [1, ''];
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;
}
// 需要单独处理的一些特殊节点
var map = {
legend : [1, ''],
tr : [2, '', '
'],
col : [2, '
'],
_default : [0, '', '']
};
map.td = map.th = [3, '
'];
map.option = map.optgroup = [1, ''];
map.thead = map.tbody = map.colgroup = map.caption = map.tfoot = [1, '', '
']
map.text = map.circle = map.ellipse = map.line = map.path = map.polygon = map.polyline = map.rect = [1, ''];
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;
}
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);
}
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);
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);
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);
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);
具体性能方面的测试，有兴趣的可以把所有代码都跑一遍。innerHTMLinnerHTML把一长串字符串转换为对应的 DOM 节点，正常而言，首先想到的肯定是 innerHTML。大概流程就是，先创建一个 div 节点，然后 div.innerHTML = str，根据需要把 div 的 children 取出来放到该放的地方去，div 本身给扔了。如果想单独生成一个 th 节点呢？试试上面的流程：
var div = document.createElement(`'div'`);
div.innerHTML = '
console.log(div);
var div = document.createElement(`'div'`);
div.innerHTML = '
console.log(div);
实际输出是（chrome 下）：<`div>xxx并没有得到想要的：<`div>
var node = document.createElement(`'div'`);
node.innerHTML = '
| xxx |
|---|
// 把外面的几层皮扒掉就是想要的 th 了
var depth = 3;
while`(depth--) {`
node = node.lastChild;
}
console.log(node.firstChild);
var node = document.createElement(`'div'`);
node.innerHTML = '
| xxx |
|---|
// 把外面的几层皮扒掉就是想要的 th 了
var depth = 3;
while`(depth--) {`
node = node.lastChild;
}
console.log(node.firstChild);
可以看出，结果正是所想要的。
fragment.jsfragment.js
// 需要单独处理的一些特殊节点
var map = {
legend : [1, ''],
tr : [2, '
col : [2, '
_default : [0, '', '']
};
map.td = map.th = [3, '
map.option = map.optgroup = [1, ''];
map.thead = map.tbody = map.colgroup = map.caption = map.tfoot = [1, '
map.text = map.circle = map.ellipse = map.line = map.path = map.polygon = map.polyline = map.rect = [1, ''];
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;
}
// 需要单独处理的一些特殊节点
var map = {
legend : [1, ''],
tr : [2, '
col : [2, '
_default : [0, '', '']
};
map.td = map.th = [3, '
map.option = map.optgroup = [1, ''];
map.thead = map.tbody = map.colgroup = map.caption = map.tfoot = [1, '
map.text = map.circle = map.ellipse = map.line = map.path = map.polygon = map.polyline = map.rect = [1, ''];
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;
}
刚刚发布热门点击发布时间
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
