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

相关推荐
ghost1436 分钟前
C#学习第15天:泛型
开发语言·学习·c#
碎梦归途8 分钟前
23种设计模式-创建型模式之单例模式(Java版本)
java·开发语言·jvm·单例模式·设计模式
满怀101513 分钟前
【Python进阶】元组:不可变序列的十大核心应用
开发语言·python
萌萌哒草头将军21 分钟前
✈️ Colipot Agent + 🔥 MCP Tools = 让你的编程体验直接起飞🚀
javascript·visual studio code·mcp
程序猿John23 分钟前
Python入门安装和语法基础
开发语言·python
一键三联啊26 分钟前
ArrayList的subList的数据仍是集合
java·开发语言
rocky19130 分钟前
谷歌浏览器插件 录制菜单路由跳转行为 事件重复解决方案
前端·javascript
purrrew34 分钟前
【数据结构_8】栈和队列
java·开发语言·数据结构
凤年徐44 分钟前
【C/C++】深入理解指针(二)
c语言·开发语言·c++·经验分享·笔记·指针
rocky1911 小时前
谷歌浏览器插件 录制元素拖动事件
前端·javascript