应精准使用 preload 加载首屏关键资源（如字体、主 CSS、核心 JS），禁用图片 preload；首屏图用 loading="eager"，其余用 loading="lazy"；移除未用 CSS/JS；配置 viewport 禁缩放；动画优先用 transform/opcity 并合理创建合成层。
用 preload 提前加载关键资源，但别乱用
移动端首屏白屏时间敏感，preload 能让浏览器在解析 HTML 时就发起关键资源（如首屏字体、主 CSS、核心 JS）的请求。但它不是 prefetch，不适用于推测性加载。
- 只对明确影响首屏渲染的资源使用：
-
as属性必须准确，否则浏览器可能忽略或降级为普通GET（比如字体漏写as="font"且没加crossorigin，会直接失败） - 不要
preload图片：多数图片由 CSS 或 JS 控制展示时机，提前加载反而挤占带宽 - Webpack/Vite 用户可配合
html-webpack-plugin或vite-plugin-preload自动注入，避免手写遗漏
图片懒加载用 loading="lazy"，但首屏图必须禁用
现代移动端浏览器原生支持 loading="lazy"，比 JS 实现的懒加载更轻量、更可靠，且能配合浏览器滚动预测优化。
- 首屏图片（
loading="eager"，否则可能触发两次加载（一次 lazy 触发，一次 fallback） -
background-image不支持该属性，需改用object-fit替代，或用 IntersectionObserver 手动控制 - Safari 15.4+ 才完整支持，iOS 15.4 以下设备会忽略该属性，需保留 JS fallback（如监听
scroll+getBoundingClientRect）
移除未使用的 CSS 和 JS，尤其警惕 UI 框架全量引入
移动端内存和解析能力有限，100KB 未用 CSS 可能多花 80ms 解析时间，而一个全量 element-plus 或 ant-design-vue 包常含 300KB+ 无用样式。
- 使用 Chrome DevTools 的 Coverage 面板（
Ctrl+Shift+P→coverage）定位未执行代码块 - 对 CSS：用
purgecss或框架自带的 tree-shaking（如unocss、tailwindcss的content配置） - 对 JS：确保构建工具开启
sideEffects: false，并检查是否误将按需导入写成全量 import（如import { Button } from 'ant-design-vue'✅，而非import antd from 'ant-design-vue'❌） - 第三方 SDK（如统计、埋点）务必动态加载，首次交互或页面可见后再
import()
启用 viewport 最小缩放与合成层加速
移动端渲染卡顿常源于强制同步布局（layout thrashing）和非合成层动画。基础 meta 配置和 CSS 层级控制能直接规避部分主线程压力。
立即学习“前端免费学习笔记（深入）”；
-
：禁用双击缩放可减少手势事件监听开销，也避免因缩放触发重排 - 动画优先用
transform和opacity，它们能触发 GPU 合成层；避免用top/left/width/height触发 layout - 对需要频繁动画的元素（如轮播图容器），可强制创建合成层：
will-change: transform或transform: translateZ(0)，但仅用于真正高频变化的元素，滥用会增加内存占用
真实场景里，最常被忽略的是「首屏资源链路闭环」：从 preload 发起请求，到 CSS 关键字提取，再到图片加载策略对齐视口行为——每个环节断开一点，性能收益就打七折。
