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

相关推荐
xuzhiqiang07242 小时前
Java进阶之路,Java程序员职业发展规划
java·开发语言
MediaTea2 小时前
Python:生成器表达式详解
开发语言·python
ShenJLLL3 小时前
vue部分知识点.
前端·javascript·vue.js·前端框架
overmind4 小时前
oeasy Python 115 列表弹栈用pop删除指定索引
开发语言·python
Never_Satisfied5 小时前
在c#中,使用windows自带功能将文件夹打包为ZIP
开发语言·windows·c#
hnxaoli5 小时前
win10程序(十六)通达信参数清洗器
开发语言·python·小程序·股票·炒股
电饭叔5 小时前
文本为 “ok”、前景色为白色、背景色为红色,且点击后触发 processOK 回调函数的 tkinter 按钮
开发语言·python
Never_Satisfied6 小时前
在c#中,string.replace会替换所有满足条件的子字符串,如何只替换一次
开发语言·c#
Demon_Hao8 小时前
JAVA快速对接三方支付通道标准模版
java·开发语言