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

相关推荐
小小晓.16 小时前
C++小白记:vector
开发语言·c++·算法
晓得迷路了16 小时前
栗子前端技术周刊第 138 期 - NestJS 12、Astro 7.1、npm 12...
前端·javascript·nestjs
小刘学技术16 小时前
AI人工智能决策树分类器:原理、实现与应用
开发语言·人工智能·python·算法·决策树·机器学习·数据挖掘
脱胎换骨-军哥16 小时前
C++ 嵌入式编程实例:从寄存器操作到底层驱动开发
开发语言·c++·驱动开发
霸道流氓气质17 小时前
摄像头视频预览实现教程:从原理到落地(ZLMediaKit+ flv.js+ Spring Boot)
javascript·spring boot·音视频
鱼子星_17 小时前
【C++】vector
开发语言·c++·笔记·stl
double_eggm17 小时前
uniapp.3
开发语言·前端·javascript
白玉cfc17 小时前
熟悉Objective-C
开发语言·ios·objective-c
abcy07121317 小时前
flink窗口类型
开发语言·python·算法
-银雾鸢尾-17 小时前
C#中的继承
开发语言·c#