javascript基础六（DOM优化）

最新推荐文章于 2025-06-15 14:13:34 发布

原创最新推荐文章于 2025-06-15 14:13:34 发布 · 311 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

63 篇文章

订阅专栏

javascript

32 篇文章

订阅专栏

本文探讨了DOM操作中的多种优化方法，包括innerHTML与DOM方法的性能对比、cloneNode的优势、减少DOM操作频率、使用querySelectorAll()等现代选择器、合并DOM操作以减少重排和重绘、缓存DOM节点以提高访问速度及利用文档碎片进行批量插入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * DOM优化：
 * 1：innerHTML与DOM操作方法，那个效率会更高
 * chrome：DOM方法要比innerHTML的方法要好
 * firefox：正好相反
 * 2：cloneNode复制节点要比创建新节点，性能优化的多
 * 3：减少DOM的频繁操作
 * 4：新的选择器querySelectorAll()
 *
 * DMON与浏览器
 * 1：重排；改变页面的内容
 * 2：重绘：浏览器的显示内容
 * 3：添加顺序
 * 		-尽量在appendChild前添加操作
 * 4:合并DOM操作
 * 5:缓存布局信息 （用变量来代替dom）
 * 6:文档碎片
 * 		-createDocumentFragment
 *
 * DOM与前端模板
 */
var oUl = document.getElementById('ul');

var oLi = document.querySelectorAll("#ul li");

var str = "";
console.time('hello');
for(var i=0;i<5000;i++){
	//innerHTML方法
	str += "<li>"+i+"</li>";
}
oUl.innerHTML = str;
console.timeEnd('hello');

console.time('DOM');
for(var i=0;i<5000;i++){
	//innerHTML方法

	//DOM方法
	var oLi = document.createElement("li");
	oLi.innerHTML = 'li';
	oUl.appendChild(oLi);
}
// oUl.innerHTML = str;
console.timeEnd('DOM');

console.time('cloneNode');
var oLi = document.createElement("li");
oLi.innerHTML = "li";
for(var i=0;i<5000;i++){
	var newLi = oLi.cloneNode(true);
	// oLi.innerHTML = 'li';
	oUl.appendChild(newLi);
}
console.timeEnd('cloneNode');