低效的DOM操作(js的问题)

使用 JavaScript 操作DOM(即添加、修改和删除元素)是相对容易,但操作效率却不怎么样。

比如,每次添加一系列DOM元素。添加一个DOM元素是一个昂贵的操作。连续添加多个DOM元素的代码是低效的。

当需要添加多个DOM元素时,一个有效的替代方法是使用 document fragments来代替,从而提高效率和性能。

html 复制代码
var div = document.getElementsByTagName("my_div");
	
var fragment = document.createDocumentFragment();

for (var e = 0; e < elems.length; e++) {  // elems previously set to list of elements
    fragment.appendChild(elems[e]);
}
div.appendChild(fragment.cloneNode(true));

除了这种方法固有的效率提高外,创建附加的DOM元素是很昂贵的,而在分离的情况下创建和修改它们,然后再将它们附加上,就会产生更好的性能。

相关推荐
乾元2 分钟前
网络切片的自动化配置与 SLA 保证——5G / 专网场景中,从“逻辑隔离”到“可验证承诺”的工程实现
运维·开发语言·网络·人工智能·网络协议·重构
代码游侠13 分钟前
应用——Web服务器项目代码解析
运维·服务器·开发语言·前端·笔记·html
Sirens.16 分钟前
Java异常处理解析:从防御式编程到自定义异常类
java·开发语言·笔记·学习·github·javac
lsx20240617 分钟前
MySQL 运算符
开发语言
逆境清醒20 分钟前
python教程总目录(更新中ing。。。)
开发语言·python
CC.GG27 分钟前
【Qt】常用控件----显示类控件(QLabel、QLCDNumber、QProgressBar、QCalendarWidget)
开发语言·数据库·qt
程芯带你刷C语言简单算法题32 分钟前
Day43~实现一个算法求一个数字的树根
c语言·开发语言·算法·c
Chase_______1 小时前
【JAVA基础指南(四)】快速掌握类和对象
java·开发语言
KiefaC1 小时前
【C++11】包装器及其应用
开发语言·c++
weixin_470740361 小时前
python生成环境部署
开发语言·python