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

相关推荐
ping某1 小时前
专栏-null 和 undefined 到底是什么?
前端·javascript·后端
swipe4 小时前
从 0 到 1 理解 React 虚拟列表:定高、不定高与 Canvas 版本完整拆解
前端·javascript·面试
铁皮饭盒4 小时前
Bun执行python代码
前端·javascript·后端
zzzzzz3106 小时前
当甲方说'logo放大的同时再缩小一点'时,我用 AI 把这个需求做出来了
javascript·css·程序员
Hilaku7 小时前
Node.js 还能再战十年?给你一个不换引擎的理由
前端·javascript·程序员
weedsfly7 小时前
前端必知必会:从 IIFE 到 ESM,模块化到底在解决什么?
前端·javascript
渣波7 小时前
拒绝 SQL 焦虑!手把手带你用 NestJS + Prisma + DTO 写出“防弹”级后端代码
javascript·数据库·后端
槑有老呆7 小时前
每次跟大模型聊天,都是一次「失忆」的 HTTP 请求
javascript
sarasuki7 小时前
彻底搞懂JS闭包:从作用域链、形成条件到优缺点
javascript
糖拌西瓜皮7 小时前
TypeScript 进阶:泛型、条件类型、类型守卫与装饰器
javascript·node.js