一、DOM操作影响性能的原因
前端性能优化主要是DOM操作的优化,DOM优化的总原则是减少DOM的操作。造成DOM影响性能的主要原因
- 1、
DOM
的实现和ECMAScipt
的实现是分离的,通过Javascript
代码调用DOM
接口实际上相当两个独立的模块之间的交互。 - 2、对
DOM
的操作会影响浏览器的重绘和重排。
- 增加、删除和修改可见的
DOM
元素 - 页面初始化的渲染
- 移动
DOM
元素 - 修改
CSS
样式,改变DOM
元素的尺寸 DOM
元素内改变,使得尺寸被撑大- 浏览器窗口尺寸的改变
- 浏览器窗口的滚动
- 增加、删除和修改可见的
二、解决方式
1、合并多次的DOM操作为单次的DOM操作
//不建议使用 el.style.borderColor = '#ddd'; el.style.borderStyle = 'solid'; el.style.borderWidth = '1px'; //建议使用 el.style.cssText += 'border:1px solid #ddd'; //或者直接添加class el.className += 'className';
2、使用文档碎片(重点)
var box = document.getElementById("box"); var fragment = document.createDocumentFragment(); var liDom = document.createElement("li"); liDom.innerHTML = "你好"; fragment.appendChild(liDom); box.appendChild(fragment);
- 3、设置
DOM
的样式display='none'
来隐藏元素操作 4、事件绑定到父节点上
document.getElementById("ul").addEventListener("click", function(e) { console.log(e.target.nodeName); if (e.target && e.target.nodeName.toUpperCase() === "LI") { //处理事件 } })