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

相关推荐
踢球的打工仔18 小时前
typescript-var和let作用域
前端·javascript·typescript
郝学胜-神的一滴18 小时前
机器学习特征提取:TF-IDF模型详解与实践指南
开发语言·人工智能·python·程序人生·机器学习·tf-idf·sklearn
啥都不懂的小小白18 小时前
JavaScript入门指南:从零开始掌握网页交互
开发语言·javascript·交互
半夏知半秋18 小时前
rust学习-循环
开发语言·笔记·后端·学习·rust
维C泡泡18 小时前
STL(初识string)
开发语言·c++
郝学胜-神的一滴18 小时前
Linux线程使用注意事项:骈文技术指南
linux·服务器·开发语言·数据结构·c++·程序人生
叫我:松哥18 小时前
基于 Flask 的音乐推荐与可视化分析系统,包含用户、创作者、管理员三种角色,集成 ECharts 进行数据可视化,采用混合推荐算法
开发语言·python·信息可视化·flask·echarts·pandas·推荐算法
此剑之势丶愈斩愈烈18 小时前
mybatis-plus乐观锁
开发语言·python·mybatis
CC.GG18 小时前
【Qt】常用控件----容器类控件(QGroupBox、QTabWidget )以及布局管理器
开发语言·qt
缘如风18 小时前
Qt Creator 断点调试断点停不住
开发语言·qt