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

相关推荐
清风徐来QCQ8 分钟前
八股文(1)
java·开发语言
SuperEugene10 分钟前
Axios + Vue 错误处理规范:中后台项目实战,统一捕获系统 / 业务 / 接口异常|API 与异步请求规范篇
前端·javascript·vue.js·前端框架·axios
行走的陀螺仪11 分钟前
手写 Vue3 极简 i18n
前端·javascript·vue.js·国际化·i18n
lsx20240612 分钟前
网站主机技术
开发语言
摇滚侠14 分钟前
你是一名 java 程序员,总结定义数组的方式
java·开发语言·python
羽沢3119 分钟前
一篇简单的STOMP教程QAQ
前端·javascript·stomp
xyq202424 分钟前
Vue3 条件语句详解
开发语言
Kel1 小时前
深入 OpenAI Node SDK:一个请求的奇幻漂流
javascript·人工智能·架构
浩浩kids1 小时前
R•Homework
开发语言·r语言
子兮曰1 小时前
AI写代码坑了90%程序员!这5个致命bug,上线就炸(附避坑清单)
前端·javascript·后端