前端性能优化教程——优化资源加载
内容提要
前端资源加载优化：CSS会阻塞渲染，应压缩、删除未用样式、避免@import，并内联关键CSS。JavaScript默认阻塞解析，可用async或defer异步加载，避免客户端渲染关键内容；压缩和丑化JS可加快下载。预加载扫描器能提前发现资源，但无法识别CSS背景图、动态脚本、@import等，应尽量避免。
延伸解读
CSS 阻塞渲染的应对策略
文章指出 CSS 会阻塞渲染，因为浏览器需构建 CSSOM 后才显示内容，以避免无样式内容闪现。优化手段包括压缩 CSS、删除未使用样式、避免 @import 以及内联关键 CSS。其中，内联关键 CSS 能减少网络请求，但会增加 HTML 体积且无法长期缓存，需权衡利弊。
JavaScript 加载的异步选择
JavaScript 默认阻塞解析，使用 async 或 defer 可异步加载。async 脚本下载完立即执行，顺序不确定；defer 脚本在文档解析完成后按顺序执行。type="module" 默认 defer，动态插入的脚本则类似 async。应避免用 JavaScript 渲染关键内容，以免延迟 LCP 元素下载。
预加载扫描器的盲区
预加载扫描器能提前发现 HTML 中的资源，但无法识别 CSS 背景图、动态插入的脚本、客户端生成的 HTML 以及 @import 引入的样式。这些资源属于晚期发现，会拖慢加载。应尽量将关键资源直接写在 HTML 中，或使用 preload 提示来减少延迟。
Q&A
为什么CSS会阻塞页面渲染？
因为浏览器需要先构建CSS对象模型（CSSOM）才能显示内容，以避免出现无样式内容闪烁（FOUC）现象。
async和defer脚本有什么区别？
async脚本下载完成后立即执行，执行顺序不确定；defer脚本等到页面解析完成后按顺序执行，通常与DOMContentLoaded事件触发时机一致。
预加载扫描器无法识别哪些资源加载方式？
无法识别CSS background-image引用的图片、通过JavaScript动态插入的script标签或动态import()加载的脚本、客户端生成的HTML代码以及CSS中的@import命令。
如何优化CSS以提高页面加载速度？
可以压缩CSS文件、删除未使用的CSS、避免使用@import、内联关键CSS，并使用link元素代替@import以并行下载样式表。
为什么应避免使用@import加载CSS？
因为@import会导致请求链，浏览器必须先下载包含@import的CSS文件才能发现并下载导入的样式表，延迟首次渲染，且无法被预加载扫描器检测到。
客户端渲染有什么性能问题？
客户端渲染的标记无法被预加载扫描器识别，可能导致关键资源（如LCP图片）下载延迟，并可能形成长任务，影响交互延迟。
