前端性能优化教程——优化资源加载
内容提要
本文介绍了优化关键渲染路径的技巧，包括优化CSS和JavaScript，使用预加载扫描器和嵌入关键CSS，以及最小化和使用async和defer属性来优化JavaScript。
延伸解读
理解渲染阻塞与解析阻塞的区别
文章指出，CSS 是渲染阻塞资源，会阻止浏览器显示任何内容，以避免无样式内容闪现（FOUC）。而缺少 async 或 defer 的 <script> 是解析器阻塞资源，会暂停 HTML 解析。两者影响不同：渲染阻塞延迟首次渲染，解析阻塞延迟 DOM 构建。优化时需分别对待，例如通过内联关键 CSS 减少渲染阻塞，通过 async/defer 消除解析阻塞。
预加载扫描器的能力与局限
预加载扫描器能提前发现并加载 HTML 中的关键资源，如 <img> 和 <link>，但无法识别 CSS 中的 background-image、@import、动态插入的脚本以及客户端生成的 HTML。因此，应避免这些模式，将关键资源直接放在 HTML 中。若无法避免，可使用 preload 提示来减少延迟。
优化 CSS 的实用技巧与权衡
文章建议最小化 CSS、删除未使用样式、避免 @import 并使用 <link>，以及内联关键 CSS。这些方法能提升首次内容绘制（FCP）和最大内容绘制（LCP）。但内联关键 CSS 会增加 HTML 体积且无法缓存，需测试评估。删除未使用 CSS 时，注意可能影响其他页面，应合理拆分文件。
async 与 defer 的选择策略
async 脚本下载完立即执行，不保证顺序；defer 脚本在文档解析完成后按顺序执行。type="module" 默认 defer，动态插入的脚本默认 async。若脚本依赖 DOM 或其他脚本，应使用 defer；若独立且无需顺序，可用 async。正确选择能避免阻塞解析，提升加载性能。
Q&A
什么是渲染阻塞资源？为什么CSS会阻塞渲染？
渲染阻塞资源是指会阻止浏览器显示页面内容的资源。CSS被认为是渲染阻塞资源，因为在CSS对象模型（CSSOM）构建完成之前，浏览器不会显示任何内容，以避免出现“未添加样式的内容闪现”（FOUC）现象。
解析器阻塞资源是什么？它如何影响网页加载？
解析器阻塞资源是指能够暂停HTML文档解析过程的资源，例如缺少async或defer属性的<script>标签。当浏览器遇到这样的脚本时，必须先下载、解析并执行脚本，然后才能继续处理剩余的HTML内容，从而延迟网页的加载。
预加载扫描器是什么？它有什么作用？
预加载扫描器是浏览器的一项优化技术，它通过辅助的HTML解析器扫描原始HTML响应，提前发现并加载那些主解析器可能会晚些才发现的资源，从而优化网页加载速度。例如，它可以提前开始下载<img>标签中的图片，即使主解析器被CSS或JavaScript阻塞。
如何优化CSS以提高网页加载速度？
优化CSS的方法包括：最小化CSS文件（删除空格和不可见字符）、删除未使用的CSS、避免使用@import而改用<link>元素、以及将关键CSS内联到HTML的<head>中。这些方法可以减少下载时间，加快首次内容绘制（FCP）。
async和defer属性在加载JavaScript时有什么区别？
async属性让脚本在下载完成后立即执行，不保证执行顺序；defer属性让脚本在页面解析完成后按顺序执行，通常与DOMContentLoaded事件触发时机一致。两者都能避免阻塞HTML解析。
什么情况下预加载扫描器无法发现资源？如何解决？
预加载扫描器无法发现通过CSS background-image属性加载的图片、通过JavaScript动态插入的<script>标签或动态import()加载的脚本、客户端生成的HTML代码以及CSS中的@import命令。解决方法是尽量避免这些加载方式，或使用preload资源提示来减少延迟。
