如何通过优化 CSS 和 JavaScript 减少页面阻塞？

当页面加载时，CSS 和 JavaScript 可能因阻塞渲染或解析导致加载延迟，通过针对性优化可有效减少阻塞，提升页面加载性能。 CSS 优化： - 内联关键样式：提取首屏渲染必需的 CSS 内联到 HTML 头部，避免外部 CSS 文件阻塞渲染路径。 - 异步加载非关键 CSS：对非首屏样式（如打印样式）使用 media="print" 或 rel="preload" 标记，使其不阻塞主线程。 JavaScript 优化： - 异步/延迟加载：对非立即执行的 JS 使用 async（下载完成后立即执行）或 defer（DOM 解析完成后执行）属性，避免阻塞 HTML 解析。 - 代码分割：通过工具（如 Webpack）将 JS 拆分为小模块，仅加载当前页面所需代码，减少初始加载体积。 建议优先优化首屏关键资源，结合 Lighthouse 等工具检测阻塞资源，逐步调整加载策略以平衡性能与功能，同时关注用户交互所需的核心脚本加载顺序。