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

相关推荐
宇木灵4 小时前
C语言基础学习-二、运算符
c语言·开发语言·学习
咕噜咕噜啦啦5 小时前
Vue3响应式开发
前端·javascript·vue.js
yangSimaticTech5 小时前
沿触发的4个问题
开发语言·制造
舟舟亢亢5 小时前
算法总结——二叉树【hot100】(上)
java·开发语言·算法
百锦再6 小时前
Java中的char、String、StringBuilder与StringBuffer 深度详解
java·开发语言·python·struts·kafka·tomcat·maven
普通网友6 小时前
多协议网络库设计
开发语言·c++·算法
努力努力再努力wz6 小时前
【Linux网络系列】:TCP 的秩序与策略:揭秘传输层如何从不可靠的网络中构建绝对可靠的通信信道
java·linux·开发语言·数据结构·c++·python·算法
牛奶6 小时前
你不知道的JS(下):深入编程
前端·javascript·电子书
牛奶7 小时前
你不知道的JS(下):深入JS(下)
前端·javascript·电子书
牛奶7 小时前
你不知道的JS(下):总结与未来
前端·javascript·电子书