前端性能优化

IntersectionObserver：懒加载的终极方案

// 创建一个观察器实例
// entries 是所有被观察元素的状态集合
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 判断元素是否进入视口（可见）
    if (entry.isIntersecting) {
      const img = entry.target; // 获取当前图片元素
      // 将 data-src 中的真实图片地址赋给 src，开始加载
      img.src = img.dataset.src;
      // 加载完成后，停止观察，避免重复触发
      observer.unobserve(img);
    }
  });
});

// 找到所有带有 data-src 的图片（懒加载图片）
document.querySelectorAll('img[data-src]').forEach(img => {
  // 让观察器开始监听每个图片
  observer.observe(img);
});

requestIdleCallback：把非关键任务丢到空闲时执行

requestIdleCallback(function(deadline) {
  while (deadline.timeRemaining() > 0) {
    // 循环执行非关键任务
  }
});

微信公众号