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

相关推荐
lly2024061 小时前
HTML与CSS:构建网页的基石
开发语言
一只会写代码的猫1 小时前
面向高性能计算与网络服务的C++微内核架构设计与多线程优化实践探索与经验分享
java·开发语言·jvm
2013编程爱好者2 小时前
Vue工程结构分析
前端·javascript·vue.js·typescript·前端框架
是小胡嘛2 小时前
C++之Any类的模拟实现
linux·开发语言·c++
csbysj20203 小时前
Vue.js 混入:深入理解与最佳实践
开发语言
不羁的fang少年4 小时前
前端常见问题(vue,css,html,js等)
前端·javascript·css
change_fate4 小时前
el-menu折叠后文字下移
前端·javascript·vue.js
Gerardisite5 小时前
如何在微信个人号开发中有效管理API接口?
java·开发语言·python·微信·php
Want5955 小时前
C/C++跳动的爱心①
c语言·开发语言·c++
coderxiaohan5 小时前
【C++】多态
开发语言·c++