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

相关推荐
IT猿手几秒前
基于 ZOH 离散化与增量 PID 的四旋翼无人机轨迹跟踪控制研究,MATLAB代码
开发语言·算法·matlab·无人机·动态路径规划·openclaw
IT猿手1 分钟前
基于控制障碍函数(Control Barrier Function, CBF)的无人机编队三维动态避障路径规划,MATLAB代码
开发语言·matlab·无人机·动态路径规划·无人机编队
huaweichenai4 分钟前
java的时间操作介绍
java·开发语言
就不掉头发8 分钟前
C++右值与右值引用
开发语言·c++
IT猿手14 分钟前
基于 CBF 的多无人机编队动态避障路径规划研究,无人机及障碍物数量可以自定义修改,MATLAB代码
开发语言·matlab·无人机·动态路径规划
炸膛坦客16 分钟前
单片机/C/C++八股:(十六)C 中 malloc/free 和 C++ 中 new/delete 有什么区别?
c语言·开发语言·c++
@insist12316 分钟前
软件设计师-组网技术基础:网络设备、传输介质与局域网核心协议
开发语言·网络·软考·软件设计师·软件水平考试
bluceli20 分钟前
JavaScript动态导入与代码分割:优化应用加载性能的终极方案
javascript
kyriewen21 分钟前
原型与原型链:JavaScript 的“家族关系”大揭秘
前端·javascript·ecmascript 6
滴滴答答哒25 分钟前
layui表格头部按钮 加入下拉选项
前端·javascript·layui