低效的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 小时前
根据apk包名动态修改Android品牌与型号
android·开发语言
黄河滴滴4 小时前
java系统变卡变慢的原因是什么?从oom的角度分析
java·开发语言
老华带你飞4 小时前
农产品销售管理|基于java + vue农产品销售管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
superman超哥4 小时前
Rust Workspace 多项目管理:单体仓库的优雅组织
开发语言·rust·多项目管理·rust workspace·单体仓库
C_心欲无痕4 小时前
vue3 - 类与样式的绑定
javascript·vue.js·vue3
kylezhao20194 小时前
C#通过HSLCommunication库操作PLC用法
开发语言·c#
JIngJaneIL5 小时前
基于springboot + vue房屋租赁管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
期待のcode5 小时前
Java的抽象类和接口
java·开发语言
wadesir6 小时前
Go语言中高效读取数据(详解io包的ReadAll函数用法)
开发语言·后端·golang
南山安6 小时前
Tailwind CSS:顺风CSS
javascript·css·react.js