Deferring and Async Loading Scripts

JavaScript 的加载与执行会阻塞 HTML 解析和 DOM 构建，是造成前端延迟的首要原因。第一招就是合理使用 `defer` 与 `async` 属性来改变脚本的执行时机。`defer` 让脚本在文档解析完成后、`DOMContentLoaded` 事件触发之前按顺序执行，适合依赖 DOM 且对顺序有要求的核心模块；`async` 则在脚本下载完成后立即执行，不阻塞解析，适合独立、无依赖的第三方埋点或统计脚本。实际优化时，应尽量将非关键的 JavaScript 全部标记为 `defer`，把功能独立且不影响首屏的脚本用 `async` 加载。此外，还可以通过动态创建 `script` 标签或使用 `import()` 实现更细粒度的按需加载，避免一次性下载全部代码。需要注意的是，`defer` 和 `async` 不可混用，因为 `async` 会覆盖 `defer`，导致执行顺序不可控。正确做法是内联首屏所需的关键脚本，其余脚本一律延迟加载，并利用浏览器的预加载扫描器为高优先级资源提前发起请求。通过这一招，能显著缩短首屏渲染前的脚本阻塞时间。

Code Splitting and Lazy Loading Routes

第二招是代码分割，第三招是懒加载，两者紧密配合，共同解决首屏包体积过大的问题。现代前端工程通常使用 Webpack 或 Vite 打包，若把所有代码打包成一个巨大的 bundle，用户访问首页时必须下载和解析大量与当前页面无关的逻辑，延迟自然居高不下。代码分割通过 `import()` 动态导入，将应用拆分成多个较小的 chunk，只在需要时加载。例如，把路由对应的页面组件、图表库、富文本编辑器等重量级模块单独拆分，避免首屏包含它们。懒加载则是围绕代码分割的最佳实践：在 React 中使用 `React.lazy` 与 `Suspense`，在 Vue 中使用 `defineAsyncComponent`，让组件进入视口或即将渲染时才发起网络请求。这两招结合，能大幅减少首屏传输字节数和 JS 解析时间。实际操作中，建议先分析打包产物，找到体积占比超过 10KB 且不立即使用的模块，将其从主包中移除；同时为每个路由创建独立的 chunk，避免用户访问登录页时却下载后台管理系统的代码。图片和视频也可使用 `loading="lazy"` 延迟加载。但要注意，分割粒度不宜过细，否则大量小请求同样会造成额外开销，需要根据项目规模平衡 chunk 数量。

Maximizing Browser Cache and CDN Edge

第四招是充分利用浏览器缓存与 CDN 边缘节点，让重复访问的用户获得近乎瞬时的加载体验。静态资源的文件内容通常不会频繁变化，再次访问时若仍从源服务器下载，既浪费带宽又增加延迟。通过设置合理的 `Cache-Control` 响应头，可以为不同类型的资源定义缓存策略。例如，带有内容哈希文件名的资源（如 `app.a1b2c3.js`）可以使用 `immutable` 进行长期缓存；而 HTML 文档则建议使用 `no-cache`，让浏览器每次回源验证更新。Service Worker 也可以实现更灵活的缓存策略，如 Cache First 或 Network First，应对离线场景和高延迟网络。将静态资源托管到 CDN 后，用户从地理位置上最近的边缘节点获取文件，网络往返时间（RTT）会大幅降低。选择 CDN 时应关注节点覆盖范围、是否支持 HTTP/2/3 以及边缘压缩能力。同时，在 CDN 配置中单独设置图片的缩放、格式转换和缓存过期时间，能进一步减少资源体积。一个重要细节是：缓存必须与版本更新策略配套，否则发布新功能后用户仍可能命中旧缓存。可以通过内容哈希文件名或短期 `max-age` 配合 `revalidate` 来解决。合理利用缓存，能显著提升回访速度和整体稳定性。

Accelerating Critical Rendering Path

第五招是优化关键渲染路径，核心思想是优先保证首屏必需的资源以最短路径到达浏览器。首先要内联或精简首屏 CSS，避免让一个庞大的全局样式表阻塞渲染；JavaScript 则尽量改为异步加载。其次，使用 `` 提前加载首屏真正需要的字体、图片和脚本，同时用 `preconnect` 提前建立与第三方域的连接，减少握手延迟。具体步骤包括：梳理首屏关键资源，确定它们的加载优先级；移除未用到的 CSS 和 JS；将大图转换为 WebP 或 AVIF 格式，并采用响应式 `srcset` 匹配不同屏幕。对于非关键样式，可以先拆分为独立文件，等到浏览器空闲时再加载。关键渲染路径还包括减少 DOM 层级、合并样式计算，但最根本的前提是服务器响应时间（TTFB）要足够短，否则页面 HTML 迟迟不到，前端一切优化都无从谈起。建议借助 Lighthouse 的性能评分，重点观察 First Contentful Paint（FCP）和 Largest Contentful Paint（LCP）两项指标，反复调整资源加载顺序。经过这一整套优化，浏览器可以在极短时间内绘制出有意义的画面，用户的感知延迟将显著下降，体验流畅度得到质的提升。