低效的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元素是很昂贵的,而在分离的情况下创建和修改它们,然后再将它们附加上,就会产生更好的性能。

相关推荐
2601_961845153 分钟前
2026法考资料pdf|电子版|资料已整理
开发语言·前端框架·pdf·c#·xhtml·csrf·view design
何以解忧,唯有..4 分钟前
Go 语言数据类型详解:从基础到复合类型
开发语言·golang·mfc
Mortalbreeze6 分钟前
C++ Lambda表达式详解:从捕获列表到底层原理
开发语言·c++
MATLAB代码顾问12 分钟前
Python NumPy数值计算核心指南
开发语言·python·numpy
只做人间不老仙18 分钟前
C++ grpc 拦截器示例学习
开发语言·c++·学习
踏着七彩祥云的小丑19 分钟前
Go学习第7天:Map集合 + 递归函数 + 类型转换
开发语言·学习·golang·go
何以解忧,唯有..21 分钟前
Go语言变量的声明方式详解
开发语言·后端·golang
触底反弹23 分钟前
一文彻底搞懂 JavaScript 栈和队列(建议收藏)
javascript·算法·面试
半夜燃烧的香烟28 分钟前
springboot3.0 集成minio上传文件,支持多个桶名
java·开发语言·spring boot
不会C语言的男孩29 分钟前
Linux 系统编程 · 第 1 章:Linux 系统概述
c语言·开发语言