必须顶格放在第一行，否则浏览器进入怪异模式导致布局错乱、flex失效；不可省略，关乎屏幕阅读器、seo及自动翻译；须在前1024字节内，否则中文乱码。
必须放在第一行，缺了它，浏览器会进怪异模式——表单控件错位、盒模型计算异常、<code>flex 布局失效都可能因此而起。
为什么
不只是给翻译工具看的。屏幕阅读器靠它切换语音语调，搜索引擎靠它判断内容语言权重，Chrome 的自动翻译也会据此触发。漏写 lang，aria-label 和 title 的读音可能错乱，尤其对中英文混排页面影响明显。
很多人以为 只是“放元信息的地方”，其实这几项直接卡主线程：
-
<meta charset="UTF-8">必须在前 1024 字节内出现，否则中文会乱码（哪怕后面再补也来不及） -
<meta name="viewport" content="width=device-width, initial-scale=1.0">缺失会导致移动端强制缩放，iOS Safari 尤其敏感 -
<title></title>虽不阻塞渲染，但没它，浏览器标签页显示为空白或文件名，SEO 直接丢分 -
<link rel="stylesheet">是渲染阻塞资源，放错位置会让页面白屏更久
<script></script> 会怎样
把 <script></script> 放在 最前面，等于告诉浏览器：“先别画页面，等我执行完再说”。结果就是：DOM 树构建暂停、用户看到空白时间变长、首屏时间（FCP）飙升。常见补救方式只有三个：
- 加
defer属性（脚本按顺序执行，不阻塞解析） - 加
async属性（脚本异步下载+执行，顺序不保证） - 挪到
前（最稳妥，但需确保 DOM 已就绪）
别信“现代浏览器优化了”，实测 Chrome 125+ 在低端安卓机上仍会因 inline script 卡住渲染超过 300ms。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
