低效的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 分钟前
线性递推通用模板
java·开发语言·算法
Dream of maid14 分钟前
Python基础 6 (面向对象)
开发语言·python
郝学胜-神的一滴17 分钟前
「栈与缩点的艺术」二叉树前序序列化合法性判定:从脑筋急转弯到工程实现
java·开发语言·数据结构·c++·python·算法
她说..21 分钟前
Java Object类与String相关高频面试题
java·开发语言·jvm·spring boot·java-ee
Mr_Tony24 分钟前
Swift 中的 Combine 框架完整指南(含示例代码 + 实战)
开发语言·swift
无心水27 分钟前
22、Java开发避坑指南:日期时间、Spring核心与接口设计的最佳实践
java·开发语言·后端·python·spring·java.time·java时间处理
Hello.Reader32 分钟前
双卡 A100 + Ollama 最终落地手册一键部署脚本、配置文件、预热脚本与 Python 客户端完整打包
开发语言·网络·python
cch891840 分钟前
汇编VS C++:底层控制与高效开发之争
java·开发语言
lifewange1 小时前
代码托管平台
开发语言
yangyanping201081 小时前
Go语言学习之配置管理库Viper
开发语言·学习·golang