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

相关推荐
格林威3 分钟前
工业相机“心跳”监测脚本(C# 版) 支持海康 / Basler / 堡盟工业相机
开发语言·人工智能·数码相机·opencv·计算机视觉·c#·视觉检测
我能坚持多久5 分钟前
String类常用接口的实现
c语言·开发语言·c++
夜宵饽饽7 分钟前
Agent文件系统检索核心:Grep和Glob工具
javascript·github
花间相见9 分钟前
【大模型微调与部署03】—— ms-swift-3.12 命令行参数(训练、推理、对齐、量化、部署全参数)
开发语言·ios·swift
默 语13 分钟前
Java的“后路“:不是退场,而是换了一种活法
java·开发语言·python
t***54413 分钟前
Orwell Dev-C++和Embarcadero Dev-C++哪个更稳定
开发语言·c++
黑牛儿15 分钟前
同样是 PHP-FPM 调优,别人能支撑 1000 + 并发,你却还在报 502?
开发语言·php
wjs202416 分钟前
R 数据类型
开发语言
慕容卡卡16 分钟前
你所不知道的RAG那些事
java·开发语言·人工智能·spring boot·spring cloud
Lyyaoo.16 分钟前
【JAVA基础面经】List(Vector+ArrayList+LinkedList)
java·开发语言·list