JavaScript性能优化与调试技巧（实践篇）｜青训营在编写JavaScript代码时，我们经常会遇到一些性能问题

在编写JavaScript代码时，我们经常会遇到一些性能问题，例如代码运行缓慢、浏览器崩溃等。这时，我们需要优化代码的性能，提高代码的执行效率，下面列举一些常见的性能优化技巧实践。

1. 减少DOM操作

频繁的DOM操作会导致重绘和重新布局，影响性能。建议将多个DOM操作合并为一个操作，或者使用DocumentFragment来批量插入DOM元素。

//合并DOM
const container = document.getElementById('container'); 
const fragment = document.createDocumentFragment(); 
for (let i = 0; i < 1000; i++) { 
    const element = document.createElement('div'); 
    element.textContent = 'Item ' + i; 
    fragment.appendChild(element); 
}
container.appendChild(fragment);

2. 避免不必要的重绘和回流

重绘和回流会消耗大量的计算资源。尽量避免在循环中修改样式属性或获取布局信息。如果需要对多个样式进行修改，可以使用CSS的class切换。

 .move { 
 left: 1000px; 
 top: 1000px;  }

const element = document.getElementById('myElement');
element.classList.add('move');

3. 使用事件委托

将事件监听器绑定到父元素，利用事件冒泡机制来处理子元素的事件，可以减少事件处理函数的数量，提高性能。

const container = document.getElementById('container'); 
container.addEventListener('click', (event) => { 
    if (event.target.classList.contains('item')) {  
    } 
});

4. 使用节流与防抖

在处理一些高频触发的事件时，使用节流和防抖可以限制事件处理函数的执行频率，提高性能。

// 节流 
function throttle(func, delay) {
    let timerId; 
    return function (...args) { 
      if (!timerId) {
        timerId = setTimeout(() => { 
          func(...args);
          timerId = null;
        }, delay); 
      } 
    };
}

// 使用节流处理scroll事件 
window.addEventListener('scroll', throttle(handleScroll, 200));

// 防抖 
function debounce(func, delay) {
  let timerId;
  return function (...args) { 
    clearTimeout(timerId); 
    timerId = setTimeout(() => {
      func(...args);
    }, delay);
  }; 
}

// 使用防抖处理输入事件 
input.addEventListener('input', debounce(handleInput, 300));

5. 使用Web Workers

对于涉及大量计算或耗时操作的任务，可以将其放入Web Worker中，在后台线程中运行，避免阻塞主线程，提高页面响应性能。

const worker = new Worker('worker.js'); 
worker.postMessage('Hello from main thread!');
worker.onmessage = function (event) { 
  const result = event.data; 
};

// worker.js代码 
self.onmessage = function (event) { 
  const message = event.data; 
  // 执行计算或耗时操作 
  const result = doSomeWork(message); 
  self.postMessage(result); 
};

6. 懒加载资源

延迟加载非关键的资源（如图片、脚本等），在用户需要时再进行加载，减少页面初始加载时间，提高用户体验。

<img data-src="image.jpg" class="lazyload" alt="Lazy-loaded Image">
<script> 
  const lazyloadImages = document.querySelectorAll('.lazyload'); 
  const observer = new IntersectionObserver(function (entries, observer) { 
    entries.forEach(function (entry) {
      if (entry.isIntersecting) { 
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img); 
      } 
    });
  }); 
  lazyloadImages.forEach(function (img) { 
    observer.observe(img);
  });
</script>

7. 使用缓存

合理利用浏览器缓存机制，减少不必要的请求。设置正确的Cache-Control和Expires头信息，让浏览器缓存静态资源。

<IfModule mod_expires.c> 
  ExpiresActive on 
  ExpiresDefault "access plus 3 year"
</IfModule>

8. 使用事件缓存

对于频繁触发的事件，可以使用事件缓存来减少事件处理函数的调用次数。例如：

// 定义事件缓存标志位
let isProcessing = false; 

// 监听滚动事件
window.addEventListener('scroll', function() { 
  // 如果正在处理中，则跳过本次事件
  if (isProcessing) return;
  
  // 设置处理中标志位
  isProcessing = true; 
  
  // 执行滚动相关操作
  
  // 在合适的时机重置处理中标志位
  setTimeout(function() {
    isProcessing = false; 
  }, 100); 
});

总结

学习JS任重道远，JS技术更新迭代速度较快，我们应不断学习，汲取新知识，并且巩固掌握的知识。时间已经来到8月份了，距离大项目评审也越来越近，在学习知识的同时，不要忘记推进项目~

JavaScript性能优化与调试技巧（实践篇） ｜ 青训营