# 前端项目检查清单

由 [@hylerrix](https://github.com/hylerrix)提供， 基于： [Front-End Checklist](https://github.com/thedaviddias/Front-End-Checklist)

```checklist
- 前端项目检查清单
  - Head
    - 声明文档类型：Doctype
    - 设置文档编码
    - 提供移动端窗口缩放支持
    - 设置文档标题，55 个左右的字符限制内
    - 提供文档描述
    - 设置网站图标
    - 为苹果设备提供良好地支持
    - 为 Windows 设备提供良好地支持
    - 避免重复内容：Canonical
    - 指定网站语言
    - 指定网站文字排版方向
    - 指定网站的语言标签
    - 表明此类网页未定位到特定的语言或区域设置：x-default
    - 提供（IE 等）条件注释：Conditional comments
    - 提供 RSS 订阅
    - 找出渲染首屏的最小 CSS 集合放在 head 中：CSS Critical
  - HTML
    - 正确的使用 HTML5 语义化标签
    - 开发常见的错误页面
    - 对网站中的外部链接关闭当前窗口对象的可访问性：Noopener
    - 生产环境上删除不必要的注释
    - 使用 W3C 验证器进行兼容性测试
    - 使用 Linter 工具验证 HTML 格式
  - Webfonts
    - 检查支持的字体格式
    - 检查字体大小（所有版本不超过 2MB）
    - 使用字体加载器控制加载行为
  - CSS
   - 使用响应式网站设计
   - 提供打印样式表
   - 使用 CSS 预处理器
   - 确保 ID 的唯一性
   - 使用 CSS 样式重置表
   - 所有 JS 动态样式不写入 CSS 中
   - 避免使用CSS嵌入或内联，仅用于必要情况
   - 对部分属性加上浏览器内核前缀，确保浏览器兼容性
   - 将 CSS 文件合并到一个文件中（不适用于 HTTP2）
   - 压缩所有 CSS 文件
   - CSS 文件需要非阻塞加载
   - 删除未使用的 CSS
   - 进行 CSS 格式检查
   - 通过 CSS 验证器测试
   - 在主流桌面设备上进行了测试
   - 在主流移动端设备上进行了测试
   - 在主流操作系统图上进行了测试
   - 对设计图进行了高保真的还原
   - 所有页面都需要对 LTR 和 RTL 文本方向进行测试
  - Images
   - 优化所有图片：WebP格式可用于关键页面（如首页）
   - 为用户当前的视口提供最合适的图像
   - 提供 x2 或 x3 的图像来支持视网膜屏显示
   - 小图片放到一个雪碧图中
   - 设置宽度和高度属性（如果最终的渲染图像大小已知）
   - 所有 img 标签必须有 alt 属性来直观的描述图片
   - 图片使用懒加载：记得提供 noscript 标签
  - JavaScript
   - 确保没有内联代码
   - 压缩所有 JS 文件
   - 确保 JS 代码安全性
   - 提供 noscript 标签
   - 使用 async 或 defer 属性异步加载
   - 优化和更新 JS 依赖库
   - 检测浏览器所支持的功能：Modernizr
   - 用 Linter 工具检测代码错误
  - Security
   - 每个页面和所有外部内容(插件、图像...)都使用HTTPS。
   - HTTP 头设置 'Strict-Transport-Security'
   - 确保向服务器端发出的请求是合法的：防止 CSRF 攻击
   - 确保页面或网站没有 XSS 攻击的可能性
   - 防止浏览器尝试将响应的内容类型从服务器声明的内容类型中嗅探出来：Content Type Options
   - 保护网站的访问者免受劫持攻击：X-Frame-Options
   - 定义内容如何加载到您的网站上的方式以及允许加载的位置： Content Security Policy
  - Proformance
   - 在第一秒内展示出一个有意义的绘画
   - 压缩后的关键文件大小低于170Kb
   - 压缩 HTML 文件
   - 图片、JS 脚本和 CSS 需要懒加载
   - 确保每个 Cookie 不超过 4096 个字节，并且域名下不超过 20 个 Cookie
   - 限制对外部 API 的调用：如共享按钮
   - dns-prefetch，让第三方DNS服务商主动去执行域名解析的功能
   - preconnect，在空闲期间提前做好 DNS 查询, TCP 三次握手和 TLS 协商
   - prefetch，在空闲期间提前请求即将需要的资源：例如：图像的懒加载
   - preload，提前加载当前页面所需要的资源：例如：JS 脚本放在 <body> 的最后
   - 所有的网页都经过测试（不仅仅是首页），而且得分至少为90/100：使用 Google PageSpeed 等
  - Accessibility
   - 主要功能应该在没有启用 JS 的情况下能够正常运行：如主导航和搜索等功能
   - 颜色对比度至少通过WCAG AA标准验证（移动端需要通过 AAA）
   - 所有页面都有 H1，它不是网站的标题
   - 标题应以正确的顺序合理使用（H1 至 H6）
   - 使用特定的 HTML5 输入类型
   - label 与每个输入表单元素相关联：如果label无法显示，请使用aria-label代替
   - 测试你的页面是否符合 Accessibility 标准：使用 WAVE 工具
   - 确保所有交互式元素都可访问和可用
   - 所有页面都在屏幕阅读器中进行了测试：VoiceOver, ChromeVox, NVDA or Lynx
   - 如果焦点被禁用，它将被 CSS 中的可见状态所替代
  - SEO
   - 主流搜索引擎的 Analytics 正确被安装和使用：Google、Baidu 等
   - 标题文字有助于表达当前页面的主要内容
   - 创建 sitemap.xml 文件并提交到 Google Search Console (以前的 Google 管理员工具)
   - robots.txt正确配置，不要阻止网页被爬取
   - 使用结构化数据便于爬虫理解页面内容
   - 提供 HTML 网站地图，可通过网站页脚中的链接进行访问
   - 提供分页内容指示器：rel="prev" 和 rel="next"
```
