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

相关推荐
邪修king15 分钟前
Re:Linux系统篇(十九):进程篇(八): 进程等待详解:wait/waitpid,僵尸进程到底该如何回收
java·开发语言
nice先生的狂想曲28 分钟前
javascript高级程序设计(六)——2026.9.5
前端·javascript
我爱写代码i37 分钟前
SKAPP SK影视反编译详细教程+源码 含苹果端ipa
开发语言·javascript·ecmascript
吴声子夜歌1 小时前
Java扩展——OkHttp
java·开发语言·okhttp
啊阿狸不会拉杆1 小时前
《计算机网络-自顶向下方法》5.7 网络管理、SNMP和NETCONF/YANG 读书笔记
开发语言·计算机网络·php
এ慕ོ冬℘゜1 小时前
前端实战:基于jQuery递归实现通用树形组织菜单(可直接复用)
前端·javascript·jquery
长友cy1 小时前
Qt官方示例D-BusListNames阅读
开发语言
萧瑟余晖1 小时前
Java深入解析篇六十一之编译器API(javax.tools)详解
java·开发语言
蜡台1 小时前
Kotlin 零基础完整版实战教程|从语法入门到Android工程实战
android·开发语言·kotlin
jimy12 小时前
C++ 的 “移动语义”——Move Semantics
开发语言·c++