JavaScript优化技巧：提升页面加载速度方法

本文深入探讨了JavaScript性能优化的核心策略，聚焦于如何精准识别并消除首屏渲染的关键阻塞点：通过requestIdleCallback（配合setTimeout降级）智能调度非关键任务，避免主线程争抢；彻底规避DOMContentLoaded前的同步脚本阻塞，合理使用defer与异步动态加载；以IntersectionObserver高效替代scroll监听实现无卡顿懒加载；并将关键CSS内联、非关键CSS异步加载，杜绝@import拖慢样式解析。所有技巧均围绕一个核心理念展开——真正的性能提升不在于堆砌优化手段，而在于揪出那几毫秒里真正扼杀用户体验的“罪魁祸首”，比如一次微小的offsetHeight调用，可能比加载一个20KB库更具破坏力。

用 requestIdleCallback 延迟非关键 JS 执行

浏览器主线程空闲时才执行低优先级任务，避免阻塞渲染。适合处理日志上报、预加载非首屏资源、DOM 渲染后微调等场景。

• requestIdleCallback 不是所有环境都支持（如 Safari 旧版本），需用 setTimeout 降级
• 回调中必须检查 deadline.timeRemaining() > 0，不能假设能跑完全部逻辑
• 不要在其中修改 DOM 或触发重排，否则可能引发布局抖动

if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    // 非关键逻辑，比如埋点采集
    sendAnalytics();
  }, { timeout: 2000 });
} else {
  setTimeout(sendAnalytics, 0);
}

避免在 DOMContentLoaded 前执行大量同步脚本

HTML 解析遇到