上线前总觉得漏了点什么：照着这份清单过一遍
页面做完了，谁也不敢说没漏东西：图标少配了几个尺寸、图片没压、标题层级乱、分享出去的缩略图没设。这份清单把上线前该确认的项按大类排好，逐条勾过去，很多平时想不起来的小问题会在发布之前被拦住，比出问题再回头改省事。
它解决什么问题
页面自测全凭印象，漏项往往在发布之后才被用户或同事发现。
零散的检查要点记不住，每次上线都要重新回忆一遍。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 分大类整理 | 结构、样式、图片、性能、可访问性等各自成组 |
| 可勾选进度 | 网页上逐项打勾，能看出还剩哪些没确认 |
| 条目具体 | 多数条目直接说清要检查什么，不是笼统的口号 |
| 长期维护 | 清单开源协作，条目会随实践更新 |
| 适合团队复用 | 可以拿来当上线前的固定流程 |
| 免费使用 | 打开网页即可逐项自查 |
别全选，挑与项目相关的那部分
这份清单覆盖很全，全勾一遍要花不少时间，实际用起来应该按项目裁剪：内容型站点重点确认图片与分享相关的条目，工具型后台则盯紧表单、错误提示与性能指标。建议把它当成发布前的固定动作，先处理影响最大的几条，剩下的上线后按优先级补，不要为了走完清单而压着不发。
条目里涉及具体数值的地方要留神，不同项目能接受的标准差别很大，别把参考值当成硬指标。清单本身是通用经验，自家团队踩过的坑应该补进自己那份里，长期维护一份内部清单比每次翻外部清单省事。网页以英文为主，条目都很短，配合翻译读起来不费劲，当作长期习惯比一次过完更有用。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| web.dev | 官方免费资源 | 讲清性能指标该怎么看，比清单更适合深入优化 |
| Can I use | 免费闭源 | 查特性兼容范围，配合清单里的兼容条目使用 |
| MDN Web Docs | 开源免费 | 需要确认某个写法是否可靠时，回官方文档核对 |
谁适合用
- 独立开发者，上线前没有同事帮忙把关的人
- 带团队、想给发布流程定一套固定动作的前端负责人
- 刚接手一个老项目、需要整体过一遍的开发者
怎么开始
- 打开站点，先看清单分成哪几个大类。
- 按当前项目类型，划掉明显不相关的条目。
- 按大类逐条检查自己的页面，完成一项勾一项。
- 把发现的问题按影响排序，先修影响大的。
- 把团队自己的经验补成内部清单，下次直接复用。
常见问题
清单要全部勾完吗？
不必。按项目类型筛掉不相关的，重点放在影响用户的那几条。
有中文吗？
内容以英文为主，条目简短，可配合翻译工具，语言以站点实际提供的为准。
勾完就算没问题了吗？
不能保证。清单是经验汇总，具体标准与业务要求还要另行确认。
能自己维护一份吗？
可以。内容开源，支持提交改进，团队也可以另存一份内部清单。
授权与合规
清单在 GitHub 上以开源方式维护，网页版逐项可勾选，内容免费使用，也欢迎社区补充条目。 官网：frontendchecklist.io。
继续找同类资源
这条属于「学习资料」栏目，同栏目还有更多可直接使用的免费资源，可以在 学习资料全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
资源信息
界面语言
英文
授权方式
开源免费
适用平台
Web
获取方式
直链下载
资源更新
2026-09-20
页面更新
2026-09-20
↓ 获取资源
点击按钮直接前往资源页面。
