访问DOM次数越多,耗费的性能也就越高
通常经验法则是减少访问DOM次数,把运算尽量留在ECMAScript这一端处理
大部分现代浏览器提供的API只返回元素节点,如果可用的话推荐使用这些API
因为这些API的执行效率比在JavaScript代码中实现过滤的效率要高
比如:使用children比childNodes效率更高,集合相更少
具体可以参考:HTML 回流与重绘
对DOM元素进行一系列操作时,可以通过以下步骤减少重绘和重排:
这三步过程中触发两次重排——第一步和第三步。 但是在第二步操作中将会产生很多次重排
有三种基本方式可以使得DOM脱离文档:
<script> const fragment = document.createDocumentFragment(); const fruits = ['Apple', 'Orange', 'Banana', 'Melon']; fruits.forEach(fruit => { const li = document.createElement('li'); li.innerHTML = fruit; fragment.appendChild(li); }); document.getElementById('a').append(fragment) </script>
当页面存在大量元素,且每个元素都绑定事件处理器(比如onclick方法),这种情况会影响性能
每绑定一个事件处理器都是有代价:
DOM事件要经历三个阶段:
1、事件流html 元素触发事件的顺序。
2、事件捕获(从外向内)
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
事件从最深的节点开始,然后逐步向上传播事件;
原理: 基于这样一个事实,事件逐层冒泡并能被父级元素捕获。使用事件代理,只需要给外层元素绑定一个处理器,就可以处理在其子元素上触发的所有事件,比如使用target判断元素
例子:
点击某一行的苹果,这一行的背景颜色改变orange,文字变成橙子
如果给每一个li标签添加onclick事件,对性能会造成较大消耗,所以可以给ul绑定onclick事件
代码:
<ul id="a" onclick="aclick()"> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> <li class="ali"> 苹果 </li> </ul> <script> function aclick(e) { var e = e || window.event; e.target.style.cssText = 'background-color:orange'; e.target.innerText = '橙子'; } </script>
平时写代码时可以优化的点①:
减少重绘和回流,要进行多次DOM操作时,最好将这部分先从文档流中脱离,然后处理好后放回文档流中
平时写代码时可以优化的点②:
使用事件代理,只需要给外层元素绑定一个处理器,就可以处理在其子元素上触发的所有事件,比如使用target判断元素