应将 置于 开头、 之后，以尽早触发 favicon 请求； 紧随其后，避免闪屏；css 需早于 js 和非关键 meta，确保首屏样式及时生效；第三方 meta 和 preload 放最后，减少关键路径延迟。
为什么要放在最前面
浏览器解析 HTML 是从上到下流式进行的，<link rel="icon"> 越早声明，越早触发 favicon 请求，避免被后续阻塞资源延迟加载。尤其在慢网或高并发场景下，这个请求若被卡在后面，标签页可能长时间显示默认图标。
- 必须放在
开头，紧随<meta charset>之后（如果用了 UTF-8，<meta charset="UTF-8">应是第一个） - 不要用
type或sizes属性增加解析负担，除非真需要多尺寸支持；简单场景只用<link rel="icon" href="/favicon.ico"> - 避免写成
<link rel="shortcut icon">—— 已废弃，现代浏览器不依赖它，反而可能干扰解析
<meta name="viewport"> 必须紧随其后
移动端渲染行为在解析到第一个 <meta name="viewport"> 时就确定了初始缩放和布局宽度。如果它被 CSS 或 JS 阻塞在后面，页面会先以桌面模式渲染一次（造成“闪屏”），再重排——用户肉眼可见的错乱。
- 位置：第二个或第三个
<meta>，绝对不能晚于任何外部<link rel="stylesheet"> - 内容建议用最简形式：
<meta name="viewport" content="width=device-width, initial-scale=1">，别加user-scalable=no（可访问性风险） - 不要重复声明多个
viewportmeta —— 浏览器只认第一个，后面的被忽略，还徒增字节
CSS <link rel="stylesheet"> 要早于 JS 和其他 meta
CSS 是渲染阻塞资源，浏览器必须构建完 CSSOM 才能开始绘制。但它的加载顺序会影响 FOUC（无样式闪现）和首屏时间。把关键 CSS 的 <link> 放得靠前，能让样式尽早就位。
- 优先加载首屏必需的 CSS，比如
<link rel="stylesheet" href="/css/base.css" media="all">；非关键 CSS 用media="print"或onload动态切换 - 避免在 CSS
<link>前插入大量<meta>（如 Open Graph、Twitter Card），它们不参与渲染，但拖慢 CSS 解析起始点 - 不要混用
<style></style>内联块和外部<link>—— 内联样式虽快，但无法缓存；外部链接虽需请求，但可复用；二者混合时，浏览器仍要等所有 CSSOM 合并完成才渲染
第三方 <meta> 和 <link>（如 OG、preload）放最后
Open Graph、Twitter Card、<link rel="preload"> 这些对页面渲染无直接影响，但若插在中间，会延长关键路径长度，间接推迟 CSS/JS 加载时机。
-
<meta property="og:title">等社交元信息，统一放到<link rel="stylesheet">全部声明完毕之后 -
<link rel="preload">只对关键资源（如字体、首屏图片）有效，且必须带as属性；放太前可能因资源未声明而被忽略，放太晚又失去预加载意义 —— 推荐紧贴对应<link rel="stylesheet">或<script></script>之前 - 避免
<link rel="dns-prefetch">放在 head 中间 —— 它不阻塞，但 DNS 查询是后台动作，放最后更利于主线程聚焦渲染
实际中容易忽略的是：服务器返回的 Content-Type 头是否带 charset，如果 HTML 没写 <meta charset>，而服务端也没设对，整个 head 解析都可能乱码——顺序再优也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
