性能与无障碍9 条
本章口诀 · 性能与无障碍
避重排/重绘+语义化标签+可聚焦 focus
- 重排与重绘Reflow / Repaint改个样式整页卡一下
- GPU 加速提示will-change动画还是有点卡
- 图片懒加载Lazy Loading一进页面几十张图一起加载
- 语义化标签Semantic HTML标签全用 div 堆出来
- ARIA 无障碍ARIA Attributes读屏软件读不懂按钮
- 颜色对比度Color Contrast (WCAG)浅灰字配白底看不清
- 键盘导航Keyboard Navigation只能鼠标点，键盘没法用
- 减弱动效偏好prefers-reduced-motion动画晃得人头晕
- 深色模式适配Dark Mode / prefers-color-scheme系统切深色模式页面全白刺眼