JavaScriptTips使用DocumentFragment加快DOM渲染速度
使用 速度 渲染 dom 加快
2023-06-13 09:14:23 时间
大家在使用JavaScript的时候,DOM操作是最平常不过的了,随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素,比如通过ajax请求获取到数据,然后更新页面上的元素,一般情况下,这种操作我们会用类似node.appendChild()这中方式来完成。这个方法是无缓冲的,也就是说我们每次调用appendChild方法的时候,浏览器都会重新渲染页面。当然,使用这种方法也没有什么不行,因为我们在一般情况下都是对少量的DOM节点进行更新,也并不会带来太大的性能问题,但是如果大量的更新DOM节点,那么性能的差距就会越来越明显了。因为浏览器要不停的渲染页面,尤其是一些复杂的标签,大量的重新渲染非常消耗性能,影响用户体验。那么有什么好的方法能让这类DOM操作的效率提高呢?
虽然我们平时在开发中遇到这样情况的时候并不多,但还是有必要了解一下,JS中提供了一个DocumentFragment的机制,相信大家对这个并不陌生,它可以提供一个缓冲的机制,将DOM节点先放到内存中,当节点都构造完成后,再将DocumentFragment对象添加到页面中,这时所有的节点都会一次渲染出来,这样就能减少浏览器很多的负担,明显的提高页面渲染速度。例如下面的代码:
复制代码代码如下:
虽然我们平时在开发中遇到这样情况的时候并不多,但还是有必要了解一下,JS中提供了一个DocumentFragment的机制,相信大家对这个并不陌生,它可以提供一个缓冲的机制,将DOM节点先放到内存中,当节点都构造完成后,再将DocumentFragment对象添加到页面中,这时所有的节点都会一次渲染出来,这样就能减少浏览器很多的负担,明显的提高页面渲染速度。例如下面的代码:
functionCreateNodes(){
for(vari=0;i<10000;i++){
vartmpNode=document.createElement("div");
tmpNode.innerHTML="test"+i+"<br/>";
document.body.appendChild(tmpNode);
}
}
functionCreateFragments(){
varfragment=document.createDocumentFragment();
for(vari=0;i<10000;i++){
vartmpNode=document.createElement("div");
tmpNode.innerHTML="test"+i+"<br/>";
fragment.appendChild(tmpNode);
}
document.body.appendChild(fragment);
}
上面的代码给出了两个函数,分别是用普通的DOM方法和DocumentFragement两种方式向页面添加一万个div节点,大家可以自己实验一下,使用第二种方式要比第一种快很多。这里只是简单的div标签的平铺添加,如果是更加复杂的HTML标签或是多层的嵌套标签,那么性能的差距就会更加明显。
通过上面的例子,大家在开发JavaScript应用的时候,如果遇到这种大量节点的情况,不妨将DocumentFragment作为一个备选的方案。
相关文章
- 【亲测】使用宝塔网站加速插件来加速网站速度,优化网站
- vue中使用定时器setInterval
- JDAX-GUI 反编译工具下载使用以及相关技术介绍
- Pr蒙版怎么使用 Pr蒙版的使用教程【详解】
- 多种姿势花样使用Frida注入
- 使用这个库,让你的服务操作 Redis 速度飞起
- Oracle 视图 DBA_CONS_OBJ_COLUMNS 官方解释,作用,如何使用详细说明
- 使用SQL Server审计实现安全管控(sqlserver审计)
- 使用Oracle中的占位符加快SQL查询速度(oracle占位符)
- 使用Oracle格式化函数提高数据处理速度(oracle格式化函数)
- 如何使用Oracle表统计信息表优化数据库性能?(oracle表统计信息表)
- Linux RPM包使用指南(linuxrpm使用)
- Oracle 获得更快查询速度:使用索引技术(oracle如何使用索引)
- MongoDB输出:使用它获得数据的洞察力(mongodb输出)
- 的使用SQL Server中灵活运用数组加快开发速度(sqlserver中数组)
- MySQL 使用拼音索引提高检索速度(mysql 拼音索引)
- 使用 MSSQL 的随机函数加快数据抽取速度(mssql 随机函数)
- Oracle中使用avg函数求平均值(avgoracle)
- MySQL中如何使用enum数据类型(mysql中emnu)
- Oracle数据库之旅探索递归的奥秘(oracle使用递归)
- 快速使用Redis集群加快数据处理速度(redis集群的简单使用)
- 速度飞快使用Redis获得最佳体验(redis 速度快)
- 成功使用Oracle DB搭建虚拟机环境(oracle db vm)
- 决定何时使用DataGrid、DataList或Repeater(ASP.NET技术文章)
- 在ASP中使用均速分页法提高分页速度
- 如何使用索引提高查询速度
- 使用php测试硬盘写入速度示例
- asp中使用MSXML2.DOMDocument处理XML数据时的注意事项