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

相关推荐
代码中介商几秒前
C++ 智能指针完全指南(二):shared_ptr 深度详解
开发语言·c++
@Ma5 分钟前
Python 实现企业微信外部群主动消息发送及成功接入后如何避坑,避免风控封号
开发语言·python·企业微信
HjhIron7 分钟前
从栈到队列,再到链表:前端开发者必知的线性数据结构
前端·javascript
DA02219 分钟前
01-Python-数据类型和语法
开发语言·python
阿猫的故乡9 分钟前
Vue自定义指令从入门到实用:自动聚焦、权限控制、防抖、懒加载……全案例教学
前端·javascript·vue.js
周末也要写八哥20 分钟前
线程的生命周期之“守护“线程
java·开发语言·jvm
该用户已成仙26 分钟前
vue3 使用 vuedraggable 报错 TypeError: isFunction2 is not a function
前端·javascript·vue.js
.千余31 分钟前
【C++】C++继承入门(上):继承语法与基本特性详解
开发语言·c++·笔记·学习·其他
TPBoreas31 分钟前
前端面试问题打把-场景题
开发语言·前端·javascript