viewport必须紧贴charset后置于head最前，否则浏览器按默认980px桌面视口先行渲染，解析到viewport时强制重排导致闪屏；content须为width=device-width,initial-scale=1，禁用user-scalable=no。
viewport meta 必须在所有 CSS link 之前
移动端首次渲染错乱（比如先闪一下桌面宽，再缩放）的根本原因，是浏览器在解析到第一个 <meta name="viewport"> 之前，已经按默认桌面视口开始布局。一旦后面才遇到 viewport，就得重排——这就是“闪屏”。
所以它必须出现在 靠前位置：紧贴 <title></title> 后、任何 <link rel="stylesheet"> 前。不能被 Open Graph、Twitter Card 等无关 <meta> 挡住，也不能晚于外部 CSS。
-
content写最简形式：width=device-width, initial-scale=1，别加user-scalable=no - 重复写多个
viewport没用——浏览器只认第一个，后面的直接忽略 - 本地开发用
http://localhost时 iOS 不触发缓存逻辑，真机测试务必上公网地址
关键 CSS 的 link 要早加载，非关键的延迟加载
浏览器必须等所有阻塞渲染的 CSSOM 构建完才能绘制首屏。如果把整站 CSS 打包成一个大文件放最前面，首屏就卡在等它下载解析；但如果把它拆开、只让首屏必需的部分早加载，就能明显提速。
- 把首屏样式抽成
base.css或critical.css，用<link rel="stylesheet" href="/css/base.css" media="all">放在viewport后立即加载 - 非关键 CSS（比如动画、后台管理页样式）改用
media="print"，或 JS 动态插入并切换media值来激活 - 避免混用
<style></style>内联块和外部<link>：内联快但不缓存，外部可复用但要请求；混合时浏览器仍得等全部 CSSOM 合并完成才渲染
苹果触屏图标必须用 180×180 PNG 且路径绝对
加了 <link rel="apple-touch-icon"> 却还显示网页截图，不是代码漏写，而是 Safari 请求后没拿到合格资源——iOS 完全静默 fallback，不报错也不警告。
立即学习“前端免费学习笔记（深入）”；
- 只认
rel="apple-touch-icon"，rel="icon"、rel="apple-touch-icon-precomposed"全部无效 - 尺寸必须严格
180×180像素，差 1px（如 179×180）就跳过；PNG 不能带 alpha 通道，否则自动填黑底但渲染发灰 - href 必须是根相对路径（
/icon-180.png）或绝对 URL（https://example.com/icon-180.png），相对路径（./icon.png）、协议相对路径（//cdn.com/icon.png）在子页面下大概率失败 - 验证方式很简单：直接在 Safari 地址栏访问该 URL，确认返回
Status: 200 OK且Content-Type: image/png
prefetch 下一页资源，别用 preload 搞混
想让用户点进下一页时更快？用 preload 是错的——它会抢占当前页带宽，拖慢首屏。真正该用的是 prefetch，它明确告诉浏览器：“这个资源用户**可能**下次需要，请空闲时低优先级下载。”
- 适用于下一页 HTML（
href="product.html"）、通用组件 JS、关键 CSS，但别用于字体（as="font"在 prefetch 中静默失败） - 路径必须为根相对或绝对，避免子路径下解析失败；配合
<link rel="preconnect" href="https://cdn.example.com" crossorigin>提前建连第三方域名 - Network 面板里确认
Initiator列显示为prefetch，Priority是Low，跳转后资源状态码应为200 (from memory cache)或304
移动端首屏优化的复杂点不在代码怎么写，而在顺序、路径、尺寸、响应头这些细节——浏览器不会报错，但只要其中一环出问题，用户看到的就是白屏、闪动、模糊图标或慢半拍的跳转。
