低效的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 小时前
Python PyQt6教程三-菜单与工具栏
开发语言·python
aini_lovee11 小时前
寻找 MAC 协议的 MATLAB 仿真
开发语言·macos·matlab
Jelena1577958579212 小时前
Java爬虫淘宝拍立淘item_search_img拍接口示例代码
开发语言·python
郝学胜-神的一滴12 小时前
Python数据模型:深入解析及其对Python生态的影响
开发语言·网络·python·程序人生·性能优化
一水鉴天12 小时前
整体设计 定稿 之26 重构和改造现有程序结构 之2 (codebuddy)
开发语言·人工智能·重构·架构
star _chen13 小时前
C++ std::move()详解:从小白到高手
开发语言·c++
lzhdim13 小时前
C#开发者必知的100个黑科技(前50)!从主构造函数到源生成器全面掌握
开发语言·科技·c#
刺客xs13 小时前
Qt----事件简述
开发语言·qt
程序员-King.13 小时前
【Qt开源项目】— ModbusScope-进度规划
开发语言·qt
前端一小卒13 小时前
一个看似“送分”的需求为何翻车?——前端状态机实战指南
前端·javascript·面试