首屏卡顿主因是img、script、link标签误用：img缺loading/width/height引发请求阻塞与布局抖动；script未用defer/async导致渲染暂停；link未合理使用preload/preconnect错失资源调度先机。

img、script、link 这三类标签写法不对，页面首屏加载就容易卡顿甚至白屏。关键不是“能不能用”，而是“怎么用才不拖慢用户”。

img 标签必须带 loading 和 alt，width/height 不能省

没加 loading="lazy" 的图片会阻塞主线程，尤其在列表页或瀑布流中，几十张图同时请求直接压垮网络栈。而缺失 width 和 height 会导致布局抖动（layout shift），Lighthouse 评分暴跌。

• alt 不是可选项——它影响 SEO、屏幕阅读器解析，也决定图片加载失败时的 fallback 文本
• 不要写 width="100%" height="auto"，这会让浏览器无法预估尺寸；用固定像素值或 CSS aspect-ratio 更稳
• srcset + sizes 要配对使用，否则高 DPR 设备仍可能拉取低清图
• 避免在 onerror 里反复切换 src，fallback 图片也挂了就会死循环

script 标签默认是同步阻塞的，defer 和 async 别混用

script 放在 head 里又没加属性，等于告诉浏览器：“停，等我下载执行完再画页面”。这不是加载慢，是主动锁死渲染流水线。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• defer：脚本按顺序下载，DOM 构建完再执行，适合依赖 DOM 的初始化逻辑
• async：脚本一下载完立刻执行，顺序不保证，适合统计、埋点等独立模块
• 内联脚本（<script>...</script>）没有 defer 或 async 效果，必须外链
• 现代项目优先用 type="module"，它天然具备 defer 行为且支持 import 语法

link 标签的 rel 值决定资源加载时机和用途

很多人只记得 rel="stylesheet"，但漏掉关键优化项，比如预加载关键资源或提前 DNS 解析。

• rel="preload" 必须配 as 属性（如 as="style"、as="font"），否则浏览器当普通 link 处理
• rel="preconnect" 要慎用——只对跨域第三方域名（如 CDN、字体服务）有效，同域加了反而增加开销
• rel="dns-prefetch" 是 preconnect 的轻量替代，兼容性更好，但不建立 TCP 连接
• 多个 preload 不要堆在 head 开头，建议按资源依赖顺序排列，避免抢占主样式表带宽

真正难的不是记住这些规则，而是判断某个 img 该不该懒加载、某段 script 是否真需要 async、哪个第三方域名值得 preconnect——这些都得结合实际网络水线、资源依赖图和用户设备分布来定，不能抄配置完事。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！