首屏关键资源（如banner图、logo字体）不能用loading="lazy"，否则会延迟加载导致白屏或文字闪烁；真正该懒加载的是非首屏图片，且所有加该属性的必须设置width/height防CLS。
大图/大字体为什么不能直接用 loading="lazy"
首屏关键资源（比如 banner 图、logo 字体）加 loading="lazy" 会直接延迟加载，浏览器可能等用户滚动才触发，导致白屏或文字闪烁。这不是“优化”，是误用。
真正该懒加载的，是列表页中第 5 张以后的图片、折叠区域里的图标、非视口内的 SVG——它们本就不该参与首屏渲染路径。
- 所有
loading="lazy"的width和height，否则滚动时重排布局（CLS） -
在 Safari 15.4+ 才支持loading="lazy"，旧安卓 WebView 完全忽略，得 fallback 到data-src+IntersectionObserver - 别同时写
src和loading="lazy"再手动监听——浏览器可能先按src加载一遍，重复请求
preload 是高优先级提示，不是“提前加载所有东西”的开关。它只对「当前导航中确定马上要用」的资源有效，比如首屏大图、关键字体、内联 JS 依赖的模块。
- 只预加载
as类型明确的资源：，as="font"必须配crossorigin - 千万别 preload 非关键 CSS 或整站 iconfont——它会抢占带宽，挤掉真正要紧的资源
- preload 的资源必须在当前 HTML 中真实用到，否则浏览器会警告 “
Preload request for … was ignored”
本地大 HTML 文件里，外部 CSS 为啥比内联还慢？
这不是 CSS 本身的问题，是文件系统 I/O 和解析机制差异：20,000 条记录的本地 HTML 加载外部 main.css，浏览器要暂停 HTML 解析 → 查找文件 → 读取磁盘 → 解析 CSS → 构建 CSSOM → 继续渲染。每一步都串行，且本地 file:// 协议下无缓存、无并发、无压缩。
- 内联样式（
）直接随 HTML 一起解析，省掉一次磁盘寻址和文件打开开销 - 但内联体积超过 ~14KB（gzip 后）会跨 TCP 包，反而拉高 TTFB；所以仅限首屏必需样式，别把整站 CSS 塞进去
- 如果必须用外部 CSS，至少确保服务器启用了 Brotli、HTTP/2，并设置
Cache-Control: public, max-age=31536000
第三方字体加载失败导致白屏，怎么兜底？
Google Fonts 或自托管字体加载超时（尤其弱网），配合 font-display: block 会让文本空白长达 3 秒，用户以为页面卡死。
- 改用
font-display: swap：先用系统字体渲染，字体加载完再替换，避免不可见文本（FOIT） - 关键字体建议子集化（只含中文常用字+英文字母），并
preload： - 彻底规避风险：用
@font-face定义 fallback 字体栈，确保即使所有字体都失败，仍能显示可读文本
关键点在于：非阻塞不是靠加个属性就完事，而是得清楚每个资源在关键渲染路径中的位置、浏览器何时需要它、以及失败时是否有退路。多数卡顿，其实卡在“本该立刻用的东西，被当成可延迟资源处理了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
