浅析document.createDocumentFragment()与js效率
2023-06-13 09:15:03 时间
document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
这是我写的一个简单的测试页面:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>document.createDocumentFragment()测试页面</title>
</head>
<body>
<scripttype="text/javascript">
vard1=newDate();
for(vari=0;i<1000;i++)
{
varop=document.createElement("P");
varoText=document.createTextNode("test1");
op.appendChild(oText);
document.body.appendChild(op);
}
vard2=newDate();
document.write("方法一用时:"+(d2.getTime()-d1.getTime())+"<br/>");
//---+-----
vard3=newDate();
varoFrag=document.createDocumentFragment();
for(vari=0;i<1000;i++)
{
varop=document.createElement("P");
varoText=document.createTextNode("test2");
op.appendChild(oText);
oFrag.appendChild(op);
}
document.body.appendChild(oFrag);
//这段代码中
vard4=newDate();
document.write("方法二用时:"+(d4.getTime()-d3.getTime())+"<br/>");
</script>
</body>
</html>
一旦把节点添加到document.body(或其后的节点)中,页面就会立即反映出这个变化。对于第一小段程序,运行是没有任何问题的,但问题是它调用了十次document.body.appendChild(),每次要产生一次页面刷新,这样会产生很多页面碎片。而第二小段代码,document.body.appendChild()仅调用了一次,这意味着只需要进行一次页面的刷新,需要的时间显然会比前面的要少。
我用了三种浏览器测试上面的测试代码,大致得出的结果为:
方法二用时:125
方法二用时:43
方法二用时:25
得出的结果还是和理论上的一致了。
相关文章
- js面试题及答案2020_JS面试题大全
- 使用 Dapr JS SDK 让 Nest.js 集成 Dapr(微软开源的分布式应用程序运行时)
- html js 全局 变量,JS定义全局变量
- js数据转换为html,JavaScript怎么进行类型转换?「建议收藏」
- 面试官:说说JS作用域和作用域链,我是这样回答的
- js中四舍五入的方法_JS取整
- js中find的用法_js中find函数
- Vue.js – 引入外部 JS 文件
- Node.js 应用全链路追踪技术——全链路信息存储
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑(html2md.js 或 html2markdown.js)
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
- js中的onkeyup
- js调试工具console.log()方法查看js代码的执行情况详解编程语言
- NW.js和Electron优缺点综合对比
- 快速掌握JS操作MySQL数据库技巧(js操作mysql数据库)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- CSDN上快速结贴的方法,JS实现
- 限制textbox或textarea输入字符长度的JS代码
- js从10种颜色中随机取色实现每次取出不同的颜色
- js判断上传文件大小及格式代码
- js几秒以后倒计时跳转示例
- js正则表达式中test,exec,match方法的区别说明
- 通过隐藏iframe实现文件下载的js方法介绍
- js判断滚动条是否已到页面最底部或顶部实例