HTML head内各类资源的性能最优加载顺序是什么
2026-9-28
HTML head 资源性能最优排序方案
最优排序（从上到下，越靠上放置优先级越高）
- 远程javascript的Preconnect：
<link rel="preconnect" href="//consentscript.tld"> - CDN域名的DNS-Prefetch：
<link rel="dns-prefetch" href="//my.cdn.com"> - 预加载的本地javascript：
<link rel="preload" as="script" href="my.js"> - 内联样式：
<style>body{color:black;}</style> - 内联javascript：
<script>myFunc...;</script> - 本地javascript：
<script type="text/javascript" src="my.js" async defer></script> - 远程javascript：
<script type="text/javascript" src="https://remote.server/my.js" async defer></script>
排序逻辑说明
- 优先放置网络资源提示类标签
preconnect和dns-prefetch属于浏览器网络优化提示，不会阻塞HTML解析，放置在最前可以让浏览器第一时间启动DNS查询、TCP握手、TLS协商等网络连接操作，等后续用到对应域名的资源时，连接已经提前建立完成，能节省大量网络耗时。 - 其次放置preload预加载声明
preload是明确告知浏览器该资源为当前页面关键资源，需要优先分配带宽下载，提前声明可以避免该资源被其他低优先级资源抢占带宽，预加载声明后紧跟对应的资源引用标签，也不会出现预加载资源闲置的性能警告。 - 接着放置内联关键样式
内联CSS没有额外的网络请求开销，属于渲染阻塞资源，放置在靠前位置可以让浏览器最快拿到首屏渲染需要的样式规则，快速构建CSSOM和渲染树，能有效提升FCP、LCP等核心Web Vital指标。 - 再放置内联javascript
如果内联JS是首屏必需的逻辑（如全局配置初始化、首屏适配逻辑等），放在内联CSS之后可以保证JS执行时CSSOM已经构建完成，不会出现样式读取异常，同时内联JS无网络请求开销，不会额外拖慢首屏渲染。如果内联JS不属于首屏必需逻辑，可以调整到所有脚本的最后放置，进一步降低对首屏渲染的影响。 - 最后放置异步延迟脚本
不管是本地还是远程的脚本，因为都加了async和defer属性，不会阻塞HTML解析，放在末尾不会影响首屏渲染。本地脚本优先于远程脚本放置，是因为本地资源通常加载速度更快，可以更早执行完成。
内容的提问来源于stack exchange，提问作者Evgeniy
相关产品推荐
相关产品推荐
