前端性能清单：首屏与交互体感

用户感知的「快」，往往不是实验室里的总分，而是首屏能否尽快可读、交互是否跟手、滚动是否掉帧。下面这份清单按「先测量、再治理」排列，适合中小型站点与导航或内容型产品直接对照。

1. 先建立同一套测量

在生产环境抽样看最大内容绘制、交互延迟与布局偏移，并区分移动与桌面。实验室数据用于回归，真实用户监控用于决策。没有基线就优化，很容易做出「分数好看、用户无感」的改动。

2. 关键与优先级

• 关键样式、字体与首屏图片走高优先级；非关键脚本延迟执行。
• 预连接只给少数关键源，避免连接数膨胀。
• 页面尽早输出，服务端缓存与边缘缓存能显著降低等待时间。

3. 字体与图片

字体：限制家族与字重；合理使用交换显示策略；子集化中文时注意常用字覆盖。图片：现代格式、正确宽高避免布局抖动、响应式裁切；主视觉图压缩到「够清」而不是原图直出。导航站图标众多，统一尺寸与矢量图标可减少请求抖动。

4. 交互体感

长列表虚拟滚动；输入防抖；避免在主线程做重计算。动画优先使用合成层属性，并提供减少动效选项。交互延迟差时，用性能面板找长任务，拆到空闲回调或后台线程。

5. 导航站特别注意

首页卡片多：分页或折叠次要分类；懒加载非首屏区块；搜索联想要限流。暗色模式切勿用整页大图滤镜硬转。第三方统计与客服脚本放到交互后加载。

建议每个迭代只打一到两个指标，把改动写进变更记录，方便回滚。性能是产品体验的一部分，不是一次性专项。把测量截图与优化前后对比留给下一迭代评审，团队更容易坚持。