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

相关推荐
早點睡39015 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-dropdown-picker
javascript·react native·react.js
xiaoye37085 小时前
Java 自动装箱 / 拆箱 原理详解
java·开发语言
ZTLJQ7 小时前
数据的基石:Python中关系型数据库完全解析
开发语言·数据库·python
夏霞7 小时前
c# signlar 客户端传递参数给服务端配置方法
开发语言·c#
迷藏4947 小时前
**发散创新:基于 Rust的开源权限管理系统设计与实战**在现代软件架构中,**权限控制**早已不
java·开发语言·rust·开源
2301_818419017 小时前
C++中的解释器模式变体
开发语言·c++·算法
跟着珅聪学java8 小时前
js编写中文转unicode 教程
前端·javascript·数据库
英俊潇洒美少年8 小时前
Vue3 深入响应式系统
前端·javascript·vue.js
摇滚侠8 小时前
Java 项目《谷粒商城-1》架构师级Java 项目实战,对标阿里 P6-P7,全网最强,实操版本
java·开发语言
颜酱8 小时前
回溯算法实战练习(3)
javascript·后端·算法