浏览器崩溃的预防措施

// 使用后及时解除事件监听
function setupListener() {
  const button = document.getElementById('myButton');
  button.addEventListener('click', handleClick);
}

// 不再需要时移除
function teardownListener() {
  const button = document.getElementById('myButton');
  button.removeEventListener('click', handleClick);
}

// 不好的做法 - 全局变量累积
function processData(data) {
  window.tempResult = heavyProcessing(data);
  // 使用后未清理
}

// 更好的做法
function processDataBetter(data) {
  const tempResult = heavyProcessing(data);
  // 使用后自动回收
}

// 主线程代码
const worker = new Worker('worker.js');

worker.postMessage({ data: largeDataSet });

worker.onmessage = function(e) {
  console.log('Worker result:', e.data);
  // 完成后及时终止
  worker.terminate();
};

// worker.js
self.onmessage = function(e) {
  const result = processLargeData(e.data);
  self.postMessage(result);
};

// 处理大数据集时分块执行
function processInChunks(data, chunkSize, callback) {
  let index = 0;
  
  function processChunk() {
    const chunk = data.slice(index, index + chunkSize);
    callback(chunk);
    index += chunkSize;
    
    if (index < data.length) {
      // 使用setTimeout让浏览器有机会处理其他任务
      setTimeout(processChunk, 0);
    }
  }
  
  processChunk();
}

// 监控内存使用
if (window.performance && performance.memory) {
  setInterval(() => {
    const { usedJSHeapSize, jsHeapSizeLimit } = performance.memory;
    const percent = (usedJSHeapSize / jsHeapSizeLimit) * 100;
    
    if (percent > 80) {
      console.warn('内存使用接近上限:', percent.toFixed(2) + '%');
      // 触发清理操作
    }
  }, 5000);
}

// 监控长任务
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn('长任务 detected:', entry);
    }
  }
});
observer.observe({ entryTypes: ['longtask'] });

// 不好的做法 - 高频interval
setInterval(() => {
  // 频繁操作
}, 10);

// 更好的做法 - 使用requestAnimationFrame
function animate() {
  // 动画或频繁更新逻辑
  requestAnimationFrame(animate);
}
animate();

// 避免存储过大数据
try {
  const largeData = JSON.stringify(hugeObject);
  if (largeData.length > 5 * 1024 * 1024) { // 5MB
    console.error('数据过大，不适合存储在localStorage');
  } else {
    localStorage.setItem('bigData', largeData);
  }
} catch (e) {
  console.error('存储失败:', e);
}

// 全局错误处理
window.addEventListener('error', (event) => {
  console.error('全局错误:', event.error);
  // 可以在这里发送错误报告
  return true; // 阻止默认错误处理
});

// 未处理的Promise rejection
window.addEventListener('unhandledrejection', (event) => {
  console.error('未处理的Promise rejection:', event.reason);
});

// 图片懒加载
document.addEventListener('DOMContentLoaded', () => {
  const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
  
  if ('IntersectionObserver' in window) {
    const lazyImageObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove('lazy');
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    
    lazyImages.forEach((lazyImage) => {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

// 定期清理缓存和不再需要的对象
setInterval(() => {
  // 清理缓存
  if (window.caches) {
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheName !== 'my-essential-cache') {
            return caches.delete(cacheName);
          }
        })
      );
    });
  }
  
  // 清理不再需要的全局引用
  if (window.tempData && !window.tempData.inUse) {
    delete window.tempData;
  }
}, 3600000); // 每小时清理一次