低效的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_Octopus1 分钟前
JSON 日志里的 `{“$ref“:“$.xxx“}`:从 fastjson 兼容包到原生 fastjson2 的迁移实录
开发语言·python·json
geovindu1 分钟前
python:HandWriting Recognition using paddlepaddle
开发语言·后端·python·paddlepaddle
七牛开发者16 分钟前
拆解 dsh:Session 的事件溯源与状态重建
javascript·github·agent
梨想橙汁21 分钟前
JS BOM 浏览器对象:定时器与同步异步底层理解
前端·javascript
梨想橙汁27 分钟前
ES6+ 必用新特性:箭头函数、解构、模板字符串、扩展运算符
前端·javascript
梨想橙汁28 分钟前
DOM 与 JS 事件:页面元素操作、事件冒泡、事件委托实战
前端·javascript
wuyk55535 分钟前
Python 零基础入门第九章:用户输入与 While 循环
开发语言·python
兮动人39 分钟前
Python变量与常量
开发语言·python·机器学习·python变量与常量
风筝在晴天搁浅1 小时前
解题代码清爽版
java·开发语言
一个游离的指针1 小时前
浏览器的渲染原理
前端·javascript