浏览器对同一域名并发请求限制（通常6个），导致资源排队阻塞，拖慢fcp和首屏渲染；需用preload+preconnect明确优先级、defer控制执行时机、内联关键css解耦渲染路径。
为什么和<script>堆在<head>里会触发并发瓶颈</script>
浏览器对同一域名的并发请求数有限制（HTTP/1.1 通常为6个），link和script标签默认同步发起请求，一旦
更隐蔽的问题是：这些资源哪怕体积小，只要没加preload或defer，就会卡住HTML流式解析，DOM树构建被迫中断，首屏内容“有HTML但没渲染”。
- Chrome DevTools Network 面板中，按
Waterfall排序，观察main.css、vendor.js是否排在长队列末尾且Initiator显示parser - HTTP/2 虽支持多路复用，但若服务端未启用或CDN配置错误，仍退化为HTTP/1.1行为
- 第三方资源（如
fonts.googleapis.com）也计入同域名并发限制，尤其当它们未预连接时
如何用preload + preconnect绕过并发排队
preload不是提前加载所有东西，而是向浏览器明确声明：“这个资源我马上就要，现在就去拿”，它不阻塞渲染，也不影响执行顺序；preconnect则提前建立DNS、TCP、TLS连接，省掉后续请求的握手开销。
关键点在于：必须配as属性，否则浏览器无法正确归类资源类型，preload会失效甚至降级为fetch优先级。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 字体必须写成：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>，漏掉as="font"会导致它被当成普通脚本处理，无法参与字体加载流程 - 首屏关键JS可预加载：
<link rel="preload" href="app.js" as="script">，再配合<script src="app.js" defer></script>确保执行时机 - 对第三方域名（如
cdn.example.com）加<link rel="preconnect" href="https://cdn.example.com">，放在最顶部 - 不要对非关键资源滥用
preload——它会抢占带宽，反而挤掉真正需要的资源
内联关键CSS + 异步加载剩余样式才是解耦关键路径的核心
把首屏必需的CSS内联进，本质是砍掉一次HTTP请求，让CSSOM能在HTML解析过程中同步构建，避免“DOM ready但无样式可用”的白屏。
但内联不是把整个main.css复制粘贴进去——那会让HTML体积暴涨、失去缓存能力、调试困难。只取真正影响首屏渲染的规则，比如body、.hero、.nav、字体定义、按钮基础样式。
- 工具推荐：
critters（Webpack/Vite插件）或penthouse（基于Puppeteer截图分析），自动提取首屏CSS - 非关键CSS用
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">，利用media="print"让浏览器忽略其渲染阻塞性，加载完再激活 - 绝对禁用
@import——它在CSS内部发起新请求，是串行+不可预加载+无法并行的三重阻塞，实测比link多300ms+延迟 - 检查
node_modules里引入的第三方CSS是否含@import：grep -r "@import" src/ node_modules/
script标签加defer后，位置真的不重要了吗
加了defer的<script></script>确实下载不阻塞HTML解析，执行也保证在DOM构建完成后、DOMContentLoaded前按顺序进行——所以理论上放在或前效果一致。
但现实里有两个容易被忽略的坑：
- 如果多个
defer脚本之间有依赖（比如vue.js必须在app.js之前），它们必须按依赖顺序书写，浏览器严格按HTML中出现顺序执行，调换位置就报错 - 某些老旧构建工具或CDN会自动把
<script defer></script>挪到前，导致与预期顺序不一致，建议在构建后检查最终HTML输出 - 内联脚本（
<script>console.log('init')</script>）即使加defer也无效，它默认就是同步执行；如需延迟，得手动包一层document.addEventListener('DOMContentLoaded', ...)
preload和preconnect是给浏览器下指令，defer和内联CSS是改资源交付节奏——三者配合，才能真正解开并发限制带来的结构渲染延迟。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
