减少访问DOM的次数提升javascript性能

在JavaScript中，减少DOM访问次数是提高页面性能的一个重要手段。因为每次访问DOM都会涉及到从JavaScript执行环境到DOM环境的切换，这个过程相对耗时。以下是一些减少DOM访问次数的策略：

1. **批量修改DOM**：尽量避免频繁地逐一修改DOM元素，而是应该先将需要修改的数据准备好，然后一次性地应用到DOM上。例如，你可以使用`DocumentFragment`或者`innerHTML`属性来批量添加多个子元素。

   var fragment = document.createDocumentFragment();
   var items = ['item1', 'item2', 'item3'];
   items.forEach(function(item) {
       var li = document.createElement('li');
       li.textContent = item;
       fragment.appendChild(li);
   });
   document.getElementById('myList').appendChild(fragment);
   

2. **使用局部变量缓存DOM引用**：如果你需要多次访问同一个DOM元素，可以将其引用保存在一个局部变量中，以避免每次访问时都执行DOM查询。

   var myElement = document.getElementById('myElement');
   // 然后可以多次使用 myElement 而无需重新查询
   myElement.style.color = 'red';
   myElement.textContent = 'Hello, world!';
   

3. **避免在循环中访问DOM**：循环中的DOM访问会成倍增加性能负担。尽量在循环外部准备好数据，然后在循环外部一次性更新DOM。

   var items = ['item1', 'item2', 'item3'];
   var html = '';
   items.forEach(function(item) {
       html += '<li>' + item + '</li>';
   });
   document.getElementById('myList').innerHTML = html;
   

4. **利用事件委托**：当你有多个子元素需要绑定相同的事件处理函数时，可以只在它们的父元素上绑定一个事件监听器，然后通过事件对象中的`target`属性来判断是哪个子元素触发了事件。这样可以减少对多个子元素的单独事件绑定。

   document.getElementById('myList').addEventListener('click', function(event) {
       if (event.target && event.target.nodeName === 'LI') {
           console.log('Clicked:', event.target.textContent);
       }
   });
   

通过应用以上策略，你可以显著减少JavaScript中DOM的访问次数，从而提高页面的整体性能。