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

相关推荐
_extraordinary_3 分钟前
Java 类和对象
java·开发语言
Aliano2177 分钟前
TestNGException ClassCastException SAXParserFactoryImpl是Java自带的Xerces解析器——解决办法
java·开发语言·python
漫谈网络11 分钟前
回调函数应用示例
开发语言·python·回调函数
亚林瓜子26 分钟前
pyenv简单的Python版本管理器(macOS版)
开发语言·python·macos·pyenv
夜松云26 分钟前
Qt信号槽机制与UI设计完全指南:从基础原理到实战应用
开发语言·qt·ui·qt designer·布局管理·参数传递·qt信号槽
听吉米讲故事28 分钟前
Slidev集成Chart.js:专业数据可视化演示文稿优化指南
javascript·信息可视化·数据分析
珂朵莉MM37 分钟前
2024 睿抗机器人开发者大赛CAIP-编程技能赛-专科组(国赛)解题报告 | 珂学家
开发语言·人工智能·算法·leetcode·职场和发展·深度优先·图论
菥菥爱嘻嘻41 分钟前
JS手写代码篇---手写 new 操作符
开发语言·javascript·原型模式
_龙小鱼_1 小时前
Kotlin变量与数据类型详解
开发语言·微信·kotlin
保利九里1 小时前
java中的包机制
java·开发语言