一、减少重绘重排
因为重绘和重排都会导致页面的重新渲染,过多的操作一定会影响性能,所以我们需要尽可能的减少重绘和重排。关于重绘和重排之前写过一篇文章。重绘和重排详解
二、使用事件委托
事件委托就是将事件委托给其父元素来去监听,当子元素触发事件时,具体操作的元素对象在父元素。下面看一个事件委托的例子。
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
<script>
let ul = document.querySelector('ul')
ul.addEventListener('click', (e) => {
let target = e.target
console.log(target.innerHTML)
} )
</script>
</body>
我们通过监听ul
这个标签的点击事件,如果其中的子标签触发事件时,会根据事件冒泡也会冒泡到父标签的事件。
如下所示,如果对每一个子对象都监听其上的事件。
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
<script>
let lis = document