2026-04-10

Astro 项目里的交互预算实践

如何给首页和内容页设置不同的交互预算，避免动效和脚本侵蚀首屏体验。

过去一周我把网站交互拆成两种层级：

1. 基础层：无 JavaScript 也必须可阅读、可导航、可访问。
2. 增强层：只在浏览器能力充足时启用，并可被用户偏好关闭。

预算不是“能不能做”，而是“最多做多少”

我现在给首页的增强脚本设了两个硬限制：

• 只做一次性进场，不做持续性重计算。
• 只给关键区块做动画，不给整页所有节点做动画。

这样做的收益是非常直接的。页面感受更轻，动效还在，但不会打断阅读节奏。

落地检查单

• 首屏静态 HTML 是否独立完整？
• JS 失败时按钮和链接是否仍可用？
• prefers-reduced-motion 是否关闭所有非必要动画？

只要这三项都通过，交互预算基本就没有跑偏。