前端的清单是一个详尽的列表，列出了在你将网站/HTML页面发布到生产环境之前需要拥有/测试的所有元素。

如何使用？

前端清单中的所有项目都是大多数项目所必需的，但有些元素可以省略或者在某些特定情况下不需要（例如在管理网页应用中，你可能不需要RSS订阅）。我们选择使用3个层次的灵活性：

![低][low_img] 表示该元素是推荐的，但在某些情况下可以省略。 ![中][medium_img] 表示该元素非常推荐，但在非常特定的情况下可能会被省略。然而，省略这些元素可能会对性能或SEO产生负面影响。 ![高][high_img] 表示在任何情况下都不能省略该元素。移除这些元素可能会导致页面功能故障或导致可访问性和SEO问题。测试应优先考虑这些元素。

一些资源带有表情符号，以帮助你理解清单上哪些类型的内容/帮助你可能在清单上找到。

  • 📖：文档或文章
  • 🛠：在线工具/测试工具
  • 📹：媒体或视频内容

你可以为前端清单应用程序做出贡献，阅读CONTRIBUTING.md文件，了解项目的所有信息。

头部

注意： 你可以在HTML文档的<head>中找到一个所有可能的清单。

元标签

  • [ ] Doctype： ![高][high_img] Doctype是HTML5，并且位于所有HTML页面的顶部。
<!doctype html> <!-- HTML5 -->

*接下来的2个元标签（Charset和Viewport）需要在头部首先出现。

  • [ ] Charset： ![高][high_img] 正确声明了字符集（UTF-8）。
<!-- 设置文档的字符编码 -->
<meta charset="utf-8">
  • [ ] Viewport： ![高][high_img] 正确声明了视口。
<!-- 响应式网页设计的视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • [ ] 标题： ![高][high_img] 所有页面都有标题（SEO：谷歌计算标题中使用的字符像素宽度，在472到482像素之间截断。平均字符限制约为55个字符）。
<!-- 文档标题 -->
<title>页面标题少于55个字符</title>
  • [ ] 描述： ![高][high_img] 提供了一个独特的meta描述，且不超过150个字符。
<!-- Meta描述 -->
<meta name="description" content="页面描述少于150个字符">
  • [ ] favicon： ![中][medium_img] 每个favicon都已创建并正确显示。如果你只有一个favicon.ico，将其放在网站的根目录。通常你不需要使用任何标记。然而，仍然建议使用下面的示例链接到它。今天，推荐使用PNG格式而不是.ico格式（尺寸：32x32px）。
<!-- 标准favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- 推荐的favicon格式 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
<!-- 推荐的现代favicon格式（不推荐用于旧版浏览器） -->
<link rel="icon" type="image/svg+xml" href="https://example.com/favicon.svg">
  • [ ] 苹果 Web App Meta: ![低][low_img] 苹果的 meta 标签存在。
<!-- 苹果 Touch Icon (至少 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- 在全屏运行 web 应用程序 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 状态栏样式（请参见下面的支持 meta 标签以获取可用值） -->
<!-- 如果没有前面的 meta 标签，则无效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
  • [ ] Windows 瓷砖： ![低][low_img] Windows 瓷砖存在并已链接。
<!-- 微软瓷片 -->
<meta name="msapplication-config" content="browserconfig.xml" />

browserconfig.xml 文件所需的最小 xml 命名空间如下：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>
  • [ ] 规范： ![中][medium_img] 使用 rel="canonical" 避免重复内容。
<!-- 有助于防止重复内容问题 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">

HTML 标签

  • [ ] 语言属性： ![高][high_img] 网站的 lang 属性已指定，并与当前页面的语言相关联。
<html lang="en">
  • [ ] 方向属性： ![中][medium_img] 在 html 标签上指定了演讲的方向（如果需要，也可以在其他 HTML 标签上使用）。
<html dir="rtl">
  • [ ] 替代语言： ![低][low_img] 网站的 language 标签已指定，并与当前页面的语言相关联。
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • [ ] x-default： ![低][low_img] 网站的国际登陆页面的语言标签。
<link rel="alternate" href="https://example.com/" hreflang="x-default" />
  • [ ] 条件注释： ![低][low_img] 如果需要，为 IE 存在条件注释。

  • [ ] RSS 提要： ![低][low_img] 如果您的项目是一个博客或有文章，则提供了 RSS 链接。

  • [ ] CSS 临界： ![中][medium_img] CSS 临界（或“折叠以上”）收集了用于呈现页面可见部分的所有 CSS。它嵌入在您的主 CSS 调用之前，并位于 <style></style> 之间，为一行（压缩）。

  • [ ] CSS 排序： ![高][high_img] 所有 CSS 文件都在 <head> 中的任何 JavaScript 文件之前加载。（有时 JS 文件会在页面顶部异步加载，这除外）。

社交元数据

使用 Meta Tags 可视化和自动生成我们的社交元数据标签。

Facebook OG 和 Twitter Cards 对于任何网站来说都是强烈推荐的。如果您针对这些平台的目标存在，并希望确保显示，请考虑使用其他社交媒体标签。

  • [ ] Facebook Open Graph： ![低][low_img] 所有 Facebook Open Graph（OG）都已测试，没有人缺失或信息错误。图像至少应为 600 x 315 像素，尽管推荐使用 1200 x 630 像素。

说明： 使用 og:image:width 和 og:image:height 将图像尺寸指定给爬虫，以便它可以立即渲染图像，而无需异步下载和处理它。

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- 下一个标签是可选的，但建议使用 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
  • [ ] Twitter 卡片： ![低][low_img]
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="内容标题">
<meta name="twitter:description" content="内容描述不超过200个字符">
<meta name="twitter:image" content="https://example.com/image.jpg">

⬆ 返回顶部

HTML

最佳实践

  • [ ] HTML5语义元素： 正确使用HTML5语义元素（头部、段落、页脚、主体等）。

  • [ ] 错误页面： 存在404错误页面和5xx错误。请记住，5xx错误页面需要集成其CSS（不要在当前服务器上使用外部调用）。

  • [ ] 无为空白： 如果你使用target="_blank"的外部链接，你的链接应该有一个rel="noopener"属性以防止标签跳转。如果你需要支持旧版本的Firefox，请使用rel="noopener noreferrer"。

  • [ ] 清理注释： 在发送页面到生产环境之前，需要删除不必要的代码。

HTML测试

  • [ ] W3C兼容性： 所有页面都需要用W3C验证器进行测试，以识别HTML代码中可能存在的问题。
  • [ ] HTMLlint： 我使用工具来帮助我分析HTML代码中可能存在的问题。
  • [ ] 链接检查器： 页面中没有破环的链接，确保没有404错误。
  • [ ] 广告拦截器测试： 在启用广告拦截器的网站上正确显示内容（你可以提供一个消息，鼓励人们禁用他们的广告拦截器）。

⬆ 返回顶部

网络字体

说明： 使用网络字体可能会导致闪现无样式文本/隐藏文本 - 考虑使用回退字体和/或使用网络字体加载器来控制行为。 * 📖 谷歌关于网络字体的技术考虑

  • [ ] 网络字体格式： 所有现代浏览器都支持WOFF、WOFF2和TTF格式。

  • [ ] 网络字体大小： 网络字体大小不超过2MB（包括所有变体）。

  • [ ] 网络字体加载器： 使用网络字体加载器控制加载行为

⬆ 返回顶部

CSS

说明： 观看大多数前端开发者遵循的CSS指南和Sass指南。如果你对CSS属性有疑问，可以访问CSS参考。还有一个简短的代码指南用于一致性。

  • [ ] 响应式网页设计： 网站正在使用响应式网页设计。
  • [ ] CSS打印： 提供了一个打印样式表，并且在每个页面上都是正确的。
  • [ ] 预处理器： 你的项目正在使用CSS预处理器（例如Sass，Less，Stylus）。
  • [ ] 唯一ID： 如果使用了ID，它们对页面是唯一的。
  • [ ] 重置CSS： 使用重置CSS（重置、规范化或重启）并且是最新的。（如果你正在使用像Bootstrap或Foundation这样的CSS框架，它已经包含在内。）
  • [ ] JS前缀： 所有类（或在JavaScript文件中使用的id-）都以js-开头，并且不会被样式化为CSS文件。
<div id="js-slider" class="my-slider">
<!-- 或 -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • [ ] 内联或内嵌CSS： 切勿在<style>标签中嵌入CSS，也不要使用内联CSS：只有在有效的原因下使用（例如，用于滑块的背景图像）。
  • [ ] 厂商前缀： 使用CSS厂商前缀，并根据您的浏览器支持兼容性相应生成。

性能

  • [ ] 合并： CSS文件已合并为一个文件（HTTP/2不适用）。
  • [ ] 压缩： 所有CSS文件都已压缩。
  • [ ] 非阻塞： CSS文件需要是非阻塞的，以防止DOM在加载时花费时间。

CSS测试

  • [ ] Stylelint：![高][high_img] 所有CSS或SCSS文件都没有错误。

  • [ ] 桌面浏览器：![高][high_img] 所有页面都在所有当前桌面浏览器（Safari、Firefox、Chrome、Internet Explorer、EDGE...）上测试。

  • [ ] 移动浏览器：![高][high_img] 所有页面都在所有当前移动浏览器（原生浏览器、Chrome、Safari...）上测试。

  • [ ] 操作系统：![高][high_img] 所有页面都在所有当前操作系统（Windows、Android、iOS、Mac...）上测试。

  • [ ] 设计保真度：![低][low_img] 根据项目和创意质量，您可能需要接近设计。您可以使用一些工具将创意与代码实现进行比较，并确保一致性。

像素完美 - Chrome扩展

  • [ ] 阅读方向：![高][high_img] 如果需要支持左对齐(LTR)和右对齐(RTL)语言，所有页面都需要进行测试。

⬆ 返回顶部

图片

说明： 要完全理解图片优化，请查看免费电子书基本图片优化，作者是Addy Osmani。

最佳实践

  • [ ] 优化：![高][high_img] 所有图片都已优化以在浏览器中渲染。对于关键页面（如主页），可以使用WebP格式。

    • 🛠 Imagemin
    • 🛠 使用ImageOptim免费优化您的图片。
    • 🛠 使用KeyCDN Image Processing实时优化图片。
    • 🛠 使用Kraken.io作为png和jpg优化的优秀替代方案。免费计划下每文件最多1MB。
    • 🛠 TinyPNG使用svg掩码技术优化png、apng（动画png）和jpg图片，质量损失非常小。免费和付费版本均可用。
    • 🛠 ZorroSVG为透明图片提供jpg-like压缩，使用svg掩码。
    • 🛠 SVGO是一个基于Nodejs的工具，用于优化SVG矢量图形文件。
    • 🛠 SVGOMG是一个基于网络的SVGO GUI版本，用于在线优化您的svgs。

  • [ ] Picture/Srcset：![中][medium_img] 使用picture/srcset为用户当前视口提供最合适的图片。

  • [ ] Retina：![低][low_img] 提供2倍或3倍的布局图片，支持Retina显示屏。
  • [ ] 雪碧图：![中][medium_img] 小图片位于雪碧图文件中（对于图标，它们可以位于SVG雪碧图图像中）。
  • [ ] 宽度和高度：![高][high_img] 如果最终渲染图像大小已知，则在<img>元素上设置width和height属性（对于CSS尺寸，可以省略）。
  • [ ] 替代文本：![高][high_img] 所有<img>元素都有替代文本，以视觉方式描述图像。
  • [ ] 懒加载：![中][medium_img] 图片被懒加载（始终提供无脚本备用）。

⬆ 返回顶部

JavaScript

最佳实践

  • [ ] JavaScript内联：![高][high_img] 您的JavaScript代码没有内联（与HTML代码混合）。
  • [ ] 连接：![高][high_img] JavaScript文件已连接。
  • [ ] 最小化：![高][high_img] JavaScript文件已最小化（您可以添加.min后缀）。
  • [ ] JavaScript安全性：![高][high_img]
  • [ ] noscript标签：![中][medium_img] 如果页面上的脚本类型不受支持或浏览器中当前关闭了脚本功能，请在HTML主体中使用<noscript>标签。这对于像React.js这样的客户端渲染重型应用将非常有用，参见示例。
<noscript>
  你需要启用JavaScript才能运行这个应用。
</noscript>
* [ ] **非阻塞：** 使用`async`或`defer`属性异步加载JavaScript文件。

> * 📖 [移除渲染阻塞的JavaScript](https://developers.google.com/speed/docs/insights/BlockingJS)

* [ ] **优化和更新的JS库：** 确保项目中使用的所有JavaScript库都是必需的（对于简单功能优先使用原生Javascript），更新到最新版本，并避免不必要的方法使JavaScript负载过重。

> * 📖 [你可能不需要jQuery](http://youmightnotneedjquery.com/)
> * 📖 [用原生JavaScript构建强大的web应用程序](https://plainjs.com/)

* [ ] **Modernizr：** 如果你需要针对一些特定功能使用Modernizr，可以在`<html>`标签中使用自定义Modernizr添加类。

> * 🛠 [自定义你的Modernizr](https://modernizr.com/download?setclasses)

### JavaScript测试

* [ ] **ESLint：** 根据您的配置或标准规则，ESLint没有标记错误。

> * 📖 [ESLint - JavaScript和JSX的可插拔式linting实用程序](https://eslint.org/)

**[⬆ 返回顶部](#表单目录)**

---

## 安全性

### 扫描并检查您的网站

> * [securityheaders.io](https://securityheaders.io/)
> * [Mozilla Observatory](https://observatory.mozilla.org/)

### 最佳实践

* [ ] **HTTPS：** 每个页面和所有外部内容（插件、图像等）都使用HTTPS。

> * 🛠 [Let's Encrypt - 免费SSL/TLS证书](https://letsencrypt.org/)
> * 🛠 [免费SSL服务器测试](https://www.ssllabs.com/ssltest/index.html)
> * 📖 [严格传输安全策略](http://caniuse.com/#feat=stricttransportsecurity)

* [ ] **HTTP严格传输安全策略（HSTS）：** 设置HTTP头部为'Strict-Transport-Security'。

> * 🛠 [检查HSTS预加载状态和资格](https://hstspreload.org/)
> * 📖 [HTTP严格传输安全策略备忘单 - OWASP](https://cheatsheetseries.owasp.org/cheatsheets/HTTP_Strict_Transport_Security_Cheat_Sheet.html)
> * 📖 [传输层保护备忘单 - OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Transport_Layer_Protection_Cheat_Sheet.html)

* [ ] **跨站请求伪造（CSRF）：** 确保对服务器端发出的请求是合法的，并且来源于您的网站/应用，以防止CSRF攻击。

> * 📖 [跨站请求伪造（CSRF）防范备忘单 - OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)

* [ ] **跨站脚本（XSS）：** 您的页面或网站没有XSS的可能问题。

> * 📖 [XSS（跨站脚本）防范备忘单 - OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
> * 📖 [基于DOM的XSS防范备忘单 - OWASP](https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html)

* [ ] **内容类型选项：** 防止Google Chrome和Internet Explorer尝试根据服务器声明的内容类型对响应内容进行MIME嗅探。

> * 📖 [X-Content-Type-Options - Scott Helme](https://scotthelme.co.uk/hardening-your-http-response-headers/#x-content-type-options)

* [ ] **X-Frame-Options (XFO)：** 保护您的访客免受点击劫持攻击。

> * 📖 [X-Frame-Options - Scott Helme](https://scotthelme.co.uk/hardening-your-http-response-headers/#x-frame-options)
> * 📖 [RFC7034 - HTTP头字段X-Frame-Options](https://tools.ietf.org/html/rfc7034)

* [ ] **内容安全策略：** 定义在您的网站上加载内容的方式以及允许从何处加载内容。也可以用来防止点击劫持攻击。

> * 📖 [内容安全策略 - 引言 - Scott Helme](https://scotthelme.co.uk/content-security-policy-an-introduction/)
> * 📖 [CSP备忘单 - Scott Helme](https://scotthelme.co.uk/csp-cheat-sheet/)
> * 📖 [CSP备忘单 - OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html)
> * 📖 [内容安全策略参考](https://content-security-policy.com/)

**[⬆ 返回顶部](#表单目录)**

---

## 性能

### 最佳实践

* [ ] **要实现的目标：** 您的页面应达到以下目标：
  * 第一个有意义的绘制在1秒内
  * 对于“平均”配置（在慢速3G网络上，带有400ms RTT和400kbps传输速度的$200 Android设备上，时间为5秒；重复访问时为2秒）和
  * 关键文件大小在压缩后的170Kb以内

> * 🛠 [网站页面分析](https://tools.pingdom.com)
> * 🛠 [WebPageTest](https://www.webpagetest.org/)
> * 📖 [大小限制：让网页更轻](https://evilmartians.com/chronicles/size-limit-make-the-web-lighter)

* [ ] **压缩HTML：** 您的HTML已压缩。

* [ ] **懒加载：** 图像、脚本和CSS需要懒加载以提高当前页面的响应时间（详情见各自部分）。

* [ ] **Cookie大小：** 如果您正在使用Cookie，请确保每个Cookie不超过4096字节，且您的域名名不超过20个Cookie。

> * 📖 [Cookie规范：RFC 6265](https://tools.ietf.org/html/rfc6265)
> * 📖 [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)
> * 🛠 [浏览器Cookie限制](http://browsercookielimits.squawky.net/)

* [ ] **第三方组件：** 尽可能替换依赖外部JS的第三方iframe或组件（如分享按钮），使用静态组件，从而减少对外部API的调用并保持用户活动私密。

> * 🛠 [简单的分享按钮生成器](https://simplesharingbuttons.com/)

### 准备即将到来的请求

> * 📖 [以下技术的解释](https://css-tricks.com/prefetching-preloading-prebrowsing/)
* [ ] **DNS解析：** 使用`dns-prefetch`在空闲时间提前解析可能需要的第三方服务的DNS。

```html
<link rel="dns-prefetch" href="https://example.com">
  • [ ] 预连接： 使用preconnect在空闲时间提前完成即将需要的服务（如DNS查找、TCP握手和TLS协商）。
<link rel="preconnect" href="https://example.com">
  • [ ] 预读取： 使用prefetch在空闲时间提前请求即将需要的资源（例如懒加载的图片）。
<link rel="prefetch" href="image.png">
  • [ ] 预加载： 使用preload在空闲时间提前加载当前页面所需的资源（例如放置在<body>末尾的脚本）。
<link rel="preload" href="app.js">

性能测试

  • [ ] Google PageSpeed： 所有页面（不仅仅是首页）都经过了测试，并且得分至少为90/100。

⬆ 返回顶部

可访问性

说明： 您可以观看与Rob Dodson一起的A11ycasts视频播放列表 📹

最佳实践

  • [ ] 渐进增强： 主要功能（如主导航和搜索）应在JavaScript启用时正常工作。
  • [ ] 颜色对比度： 颜色对比度应至少通过WCAG AA标准（移动设备应为AAA）。

标题

  • [ ] H1： 所有页面都有一个H1标签，而不是网站的标题。
  • [ ] 标题： 标题应正确使用并按正确的顺序排列（H1 到 H6）。

语义化

  • [ ] 使用了特定的HTML5输入类型： 这对于显示自定义键盘和不同类型的设备的表单尤为重要。

表单

  • [ ] 标签： 每个输入表单元素都与一个标签关联。如果无法显示标签，则使用aria-label代替。

可访问性测试

  • [ ] 可访问性标准测试： 使用WAVE工具测试您的页面是否遵守可访问性标准。
  • [ ] 键盘导航： 使用键盘以可见顺序测试您的网站。所有交互元素都是可达和可用的。
  • [ ] 屏幕阅读器： 所有页面都在屏幕阅读器（如VoiceOver、ChromeVox、NVDA或Lynx）中进行测试。
  • [ ] 焦点样式： 如果焦点被禁用，它将在CSS中替换为可见状态。

⬆ 返回顶部

SEO

  • [ ] Google Analytics： 已经安装并正确配置了Google Analytics。
  • [ ] 搜索控制台： 已经安装并正确配置了搜索控制台。这是Google提供的一项免费服务，帮助您监控、维护和排查您网站在Google搜索结果中的存在问题。
  • [ ] 标题逻辑： 标题文本有助于理解当前页面的内容。
  • [ ] sitemap.xml： 存在一个sitemap.xml文件，并已提交到Google Search Console（之前称为Google Webmaster Tools）。
  • [ ] robots.txt： 未使用robots.txt文件阻止网页。
  • [ ] 结构化数据： 使用结构化数据的页面已经过测试且没有错误。结构化数据有助于爬虫理解当前页面的内容。
  • [ ] sitemap HTML： 提供了一个HTML sitemap，并通过网站底部的链接进行访问。

翻译

前端清单也在其他语言中提供。感谢所有翻译者及其出色的工作！

前端清单徽章

如果你想展示你遵循前端清单的规则，请在你的README文件上放置此徽章！

➔ 遵循前端清单

[![遵循前端清单](https://img.shields.io/badge/Front-End-Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ 返回顶部

贡献

通过打开一个问题或一个拉取请求来提出更改或添加内容。

指南

前端清单仓库包含两个分支：

1. master

这个分支由README.md文件组成，该文件会自动反映在前端清单网站上。

2. develop

这个分支将用于对结构进行重大更改，如果需要的话。最好使用master分支来修复小错误或添加新项目。

支持

如果您有任何问题或建议，请随时使用Gitter或Twitter联系我们：

作者

David Dias

贡献者

本项目要感谢所有贡献者！[贡献]

支持者

感谢您成为我们的支持者！🙏 [成为支持者]

赞助商

通过成为赞助商来支持本项目。您的徽标将显示在这里，并带有指向您网站的链接。[成为赞助商]

许可

CC0

⬆ 返回顶部