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

相关推荐
前端Hardy3 小时前
面试官:JS数组的常用方法有哪些?这篇总结让你面试稳了!
javascript·面试
yuki_uix3 小时前
Props、Context、EventBus、状态管理:组件通信方案选择指南
前端·javascript·react.js
全栈老石4 小时前
手写无限画布4 —— 从视觉图元到元数据对象
前端·javascript·canvas
Leon5 小时前
新手引导 intro.js 的使用
前端·javascript·vue.js
牛奶6 小时前
JS随笔:浏览器 API(DOM 与 BOM)
前端·javascript·面试
牛奶6 小时前
JS随笔:异步编程与事件循环
前端·javascript·面试
牛奶6 小时前
JS随笔:数据结构与集合
前端·javascript·面试
小陆猿7 小时前
股票实时行情Echarts动态图表
前端·javascript
牛奶7 小时前
JS随笔:ES6+特性与模块化实践
前端·javascript
牛奶7 小时前
JS随笔:基础语法与控制结构
前端·javascript