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

相关推荐
转调5 分钟前
每日一练:地下城游戏
开发语言·c++·算法·leetcode
Java探秘者6 分钟前
Maven下载、安装与环境配置详解:从零开始搭建高效Java开发环境
java·开发语言·数据库·spring boot·spring cloud·maven·idea
2303_8120444615 分钟前
Bean,看到P188没看了与maven
java·开发语言
秋夫人17 分钟前
idea 同一个项目不同模块如何设置不同的jdk版本
java·开发语言·intellij-idea
不穿格子衬衫33 分钟前
常用排序算法(下)
c语言·开发语言·数据结构·算法·排序算法·八大排序
萧鼎39 分钟前
Python调试技巧:高效定位与修复问题
服务器·开发语言·python
wdxylb40 分钟前
使用C++的OpenSSL 库实现 AES 加密和解密文件
开发语言·c++·算法
Geek之路1 小时前
QT系统学习篇(1)
开发语言·qt·学习
罗曼蒂克在消亡1 小时前
GraphQL规范
开发语言·graphql
HealthScience1 小时前
怎么将bash(sh)的所有输出保存到log/txt中?
开发语言·bash