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

相关推荐
爱学习的小可爱卢几秒前
算法—Java Map 核心方法与实战场景指南
java·开发语言·算法
豆豆2 分钟前
建站系统怎么选?2026年SaaS平台与开源CMS对比分析
java·开发语言·开源·cms·网站建设·网站制作·网站开发
神仙别闹2 分钟前
基于C++实现的简单的SMTP服务器
服务器·开发语言·c++
遗憾随她而去.5 分钟前
react学习(一)
javascript·学习·react.js
Cobyte7 分钟前
5.响应式系统比对:手写 React 响应式状态库 Mobx
前端·javascript·vue.js
鹓于8 分钟前
PPT VBA随机选题系统实现详解
java·前端·javascript
阿拉斯攀登24 分钟前
20 个 Android JNI + CMake 生产级示例
android·java·开发语言·人工智能·机器学习·无人售货柜
!停28 分钟前
C++入门STL容器string使用基础
开发语言·c++
m0_7167652329 分钟前
数据结构--栈的插入、删除、查找详解
开发语言·数据结构·c++·经验分享·学习·青少年编程·visual studio