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

相关推荐
原来是好奇心11 小时前
深入Spring Boot源码(六):Actuator端点与监控机制深度解析
java·开发语言·源码·springboot
new code Boy11 小时前
escape谨慎使用
前端·javascript·vue.js
奶球不是球11 小时前
elementplus组件中el-calendar组件自定义日期单元格内容及样式
javascript·css·css3
过期动态11 小时前
JDBC高级篇:优化、封装与事务全流程指南
android·java·开发语言·数据库·python·mysql
WizLC11 小时前
【Java】各种IO流知识详解
java·开发语言·后端·spring·intellij idea
傻啦嘿哟12 小时前
实战:用Splash搞定JavaScript密集型网页渲染
开发语言·javascript·ecmascript
Knight_AL12 小时前
Java 线程池预热(Warm-up)实战:开启与不开启到底差多少?
java·开发语言
liwulin050612 小时前
【PYTHON】COCO数据集中的物品ID
开发语言·python
小鸡吃米…12 小时前
Python - XML 处理
xml·开发语言·python·开源
冰敷逆向12 小时前
苏宁滑块VMP深入剖析(一):解混淆篇
javascript·爬虫·安全·web