# 前端自检清单

## 目录

1. [**Head**](#head)
2. [**HTML**](#html)
3. [**Webfonts**](#webfonts)
4. [**CSS**](#css)
5. [**Images**](#images)
6. [**JavaScript**](#javascript)
7. [**Security**](#security)
8. [**Performance**](#performance)
9. [**Accessibility**](#accessibility)
10. [**SEO**](#seo)

## 如何使用？

**前端自检表** 中的所有项对于大多数项目都是必需的，但是有些元素可以省略或不是必需的(例如，对于管理web应用程序，你可能并不需要RSS订阅)。我们使用三个级别来灵活区分：

* ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 意味着 **推荐** 该项，但在某些特定情况下可以省略。
* ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 意味着 **强烈推荐** 该项，并且在某些特定情况下最终可以省略。如果省略某些元素，可能会对性能或SEO产生不良影响。
* ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 意味着该项 **不能被省略** ，不管你有什么理由。如果忽略了这项，页面中可能会造成功能障碍，或存在可访问性或SEO问题。测试优先级需要首先关注在这些元素上。

有些资源拥有相对的符号，可帮助你了解清单中可能找到的内容或类型：

* 📖: 文档或文章
* 🛠: 在线工具或测试工具
* 📹: 媒体或视频内容

> 你可以通过阅读 [README\_APP 文件](https://github.com/thedaviddias/Front-End-Checklist/blob/master/README_APP.md) 为 **前端自检表应用** 做出一些贡献，README文件里详细的阐述了关于此项目的所有事情。

## Head

> **注意：** 你可以找到一份可能在HTML document的`<head>`里包含了[所有东西的列表](https://github.com/xiaohesong/TIL/blob/master/front-end/dom/head.md)。

### Meta tag

* [ ] **Doctype:**  ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) Doctype是HTML5并且在所有HTML页面的顶部。

> ```markup
> <!doctype html> <!-- HTML5 -->
> ```
>
> * 📖 [Determining the character encoding - HTML5 W3C](https://www.w3.org/TR/html5/syntax.html#determining-the-character-encoding)

_接下来的两个meta标记(Charset and Viewport) 需要首先出现在head里。_

* [ ] **Charset:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) charset (UTF-8) 是被正确声明

```markup
<!-- Set character encoding for the document -->
<meta charset="utf-8">
```

* [ ] **Viewport:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) viewport 是被正确声明

```markup
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
```

* [ ] **Title:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 标题用于所有页面(SEO:谷歌计算标题中使用的字符的像素宽度，并在472到482像素之间截断。平均字符限制在55个字符左右)。

```markup
<!-- Document Title -->
<title>Page Title less than 55 characters</title>
```

> * 📖 [Title - HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)
> * 🛠 [SERP Snippet Generator](https://www.sistrix.com/serp-snippet-generator/)

* [ ] **Description:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 为描述提供了meta，它是唯一的，并且不具有超过150个字符。

```markup
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
```

> * 📖 [Meta Description - HTML - MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_an_author_and_description)

* [ ] **Favicons:** ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 每个favicon 都被创建并正确显示。如果你只有一个`favicon.ico`，请将其放在你网站的根目录下。通常，你不需要使用任何标记。但是，使用下面示例的`link`，它仍然是一个很好的实践。现如今，**PNG格式已优于** `ico`格式(尺寸:32x32px)。

```markup
<!-- 标准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 Generator](https://www.favicon-generator.org/)
> * 🛠 [RealFaviconGenerator](https://realfavicongenerator.net/)
> * 📖 [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet)
> * 📖 [Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS Tricks](https://css-tricks.com/favicon-quiz/)
> * 📖 [PNG favicons - caniuse](https://caniuse.com/#feat=link-icon-png)

* [ ] **Apple Web App Meta:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 对于Apple的meta-tag

```markup
<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
```

> * 📖 [Configuring Web Applications](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
> * 📖 [Supported Meta Tags](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)

* [ ] **Windows Tiles:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) window tiles 呈现并且被link

```markup
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />
```

`browserconfig.xml`文件所需的最低`xml`标记如下：

```markup
<?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>
```

> * 📖 \[Browser configuration schema reference]\([https://msdn.microsoft.com/en-us/library/dn320426(v=vs.85).aspx](https://msdn.microsoft.com/en-us/library/dn320426\(v=vs.85\).aspx))

* [ ] **Canonical:** ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 使用`rel="canonical"`避免重复内容

```markup
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">
```

> * 📖 [Use canonical URLs - Search Console Help - Google Support](https://support.google.com/webmasters/answer/139066?hl=en)
> * 📖 [5 common mistakes with rel=canonical - Google Webmaster Blog](https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html)

### HTML tags

* [ ] **Language attribute:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 你网站的`lang`属性被指定，并与当前页面的语言相关。

```markup
<html lang="en">
```

* [ ] **Direction attribute:** ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 方向是在HTML标记上指定的(它可以用于其他html标记)。

```markup
<html dir="rtl">
```

> * 📖 [dir - HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)

* [ ] **Alternate language:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 替代语言，指定网站的语言标签，并与当前页面的语言相关。

```markup
<link rel="alternate" href="https://es.example.com/" hreflang="es">
```

* [ ] **Conditional comments:**  ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 如果需要，IE将提供条件注释。

> - 📖 \[About conditional comments (Internet Explorer) - MSDN - Microsoft]\([https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx](https://msdn.microsoft.com/en-us/library/ms537512\(v=vs.85\).aspx))

* [ ] **RSS feed:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 如果你的项目是博客或有文章，则提供RSS链接。
* [ ] **CSS Critical:**  ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) CSS critical(或"折叠以上")收集用于呈现页面可见部分的所有CSS。它嵌入在主CSS调用之前和`<style></style>`之间的一行中(缩小)。

> - 🛠 [Critical by Addy Osmani on GitHub](https://github.com/addyosmani/critical) automates this.

* [ ] **CSS order:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 在`<head>`中，所有CSS文件都要在JavaScript文件之前加载(除了有时JS文件在页面顶部异步加载)。

### Social meta

可视化并自动生成带有[元标记](https://metatags.io/)的social 元标记。

_**Facebook OG**_ 和 _**Twitter Cards**_ 是的，对于任何网站，强烈推荐。如果你的目标用户是某个特定的用户，并且想要确保显示效果，可以考虑其他社交(social )媒体标签。

*   [ ] **Facebook Open Graph:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 所有的Facebook Open Graph (OG)都经过测试，没有人出错或有虚假信息。

    图像至少需要600 x 315像素，但推荐1200 x 630像素。

> **注意：** 使用`og:image:width`和`og:image:height`将为爬虫指定图像的尺寸，这样爬虫就可以立即呈现图像，而不必异步下载和处理图像。

```markup
<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">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
```

> * 📖 [A Guide to Sharing for Webmasters](https://developers.facebook.com/docs/sharing/webmasters/)
> * 📖 [Best Practices - Sharing](https://developers.facebook.com/docs/sharing/best-practices/)
> * 🛠 Test your page with the [Facebook OG testing](https://developers.facebook.com/tools/debug/)

* [ ] **Twitter Card:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)&#x20;

```markup
<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="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
```

* 📖 [Getting started with cards — Twitter Developers](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started)
* 🛠 Test your page with the [Twitter card validator](https://cards-dev.twitter.com/validator)

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

## HTML

### 最佳实践

* [ ] **HTML5 Semantic Elements:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) HTML5语义元素被适当地使用(header, section, footer, main...)。

> - 📖 [HTML Reference](http://htmlreference.io/)

* [ ] **Error pages:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 存在错误的404和5xx页面。请记住，5xx错误页面需要集成它们的CSS(当前服务器上没有外部调用)。
* [ ] **Noopener:** ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 如果使用`target="_blank"`的外部链接，那么你的链接应该具有`rel="noopener"`属性，以防止标签被阻止。如果你需要支持旧版本的火狐，使用`rel="noopener noreferrer"`。

> - 📖 [About rel=noopener](https://mathiasbynens.github.io/rel-noopener/)

* [ ] **Clean up comments:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 在将页面发送到生产环境之前，需要删除不必要的代码。

### HTML testing

* [ ] **W3C compliant:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有页面都需要使用W3C验证器进行测试，以识别HTML代码中的可能问题。

> - 🛠 [W3C validator](https://validator.w3.org/)

* [ ] **HTML Lint:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 我使用工具来帮助我分析HTML代码中可能出现的任何问题。

> - 🛠 [Dirty markup](https://dirtymarkup.com/)
> - 🛠 [webhint](https://webhint.io/)

* [ ] **Link checker:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 在我的页面中没有破坏性的link，验证下你是否有任何404错误。

> - 🛠 [W3C Link Checker](https://validator.w3.org/checklink)

* [ ] **Adblockers test:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 你的网站会在启用广告拦截器的情况下正确显示你的内容（你可以提供一条消息，鼓励他们停用其广告拦截器）。

> - 📖 [Use AdBlocking in your Dev Environment](https://andreicioara.com/use-adblocking-in-your-dev-environment-48db500d9b86)

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

## Webfonts

> **注意：** 使用WebFonts可能导致非样式文本的闪烁/不可见文本的闪烁-考虑使用回退字体和/或使用WebFont加载器来控制行为。
>
> * 📖 [Google Technical considerations about webfonts](https://developers.google.com/fonts/docs/technical_considerations)

* [ ] **Webfont format:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有现代浏览器都支持WOFF、WOFF2和TTF。

> - 📖 [WOFF - Web Open Font Format - Caniuse](https://caniuse.com/#feat=woff).
> - 📖 [WOFF 2.0 - Web Open Font Format - Caniuse](https://caniuse.com/#feat=woff2).
> - 📖 [TTF/OTF - TrueType and OpenType font support](https://caniuse.com/#feat=ttf)
> - 📖 [Using @font-face - CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/)

* [ ] **Webfont size:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) Webfont大小不超过2 MB(包括所有变体)。
* [ ] **Webfont loader:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 使用webfont加载器控制加载行为

> - 🛠 [Typekit Web Font Loader](https://github.com/typekit/webfontloader)

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

## CSS

> **注意：** 看看大多数前端开发人员所遵循的[CSS指南](https://cssguidelin.es/)和[Sass指南](https://cssguidelin.es/)。如果你对CSS属性有疑问，可以访问[CSS Reference](http://cssreference.io/)。为了保持一致性，还有一个简短的[代码指南](https://codeguide.co/)。

* [ ] **Responsive Web Design:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 该网站采用响应式网页设计。
* [ ] **CSS Print:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 提供了一个打印样式表，并且在每个页面上都是正确的。
* [ ] **Preprocessors:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 你的项目使用的是CSS预处理器（例如 [Sass](http://sass-lang.com/), [Less](http://lesscss.org/), [Stylus](http://stylus-lang.com/)）。
* [ ] **Unique ID:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 如果使用ID，则它们对于页面是唯一的。
* [ ] **Reset CSS:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 使用CSS重置(重置、规范化或重新启动)并保持最新。_(如果您使用的是Bootstrap或Foundation之类的CSS框架，那么它已经包含了一个规范化。)_

> - 📖 [Reset.css](https://meyerweb.com/eric/tools/css/reset/)
> - 📖 [Normalize.css](https://necolas.github.io/normalize.css/)
> - 📖 [Reboot](https://getbootstrap.com/docs/4.0/content/reboot/)

* [ ] **JS prefix:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 所有类(或id——在JavaScript文件中使用)都以js-开头，并且CSS文件中对其进行样式处理。

> ```markup
> <div id="js-slider" class="my-slider">
> <!-- Or -->
> <div id="id-used-by-cms" class="js-slider my-slider">
> ```

* [ ] **embedded or inline CSS:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 不惜一切代价避免在`<style>`标签中嵌入CSS或使用内联CSS：仅用于有效原因(例如，用于滑块的background-image，关键的CSS)。
* [ ] **Vendor prefixes:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 使用CSS供应商前缀，并根据浏览器支持兼容性生成相应的前缀。

> - 🛠 [Autoprefixer CSS online](https://autoprefixer.github.io/)

### Performance

* [ ] **Concatenation:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) CSS文件连接在一个文件中(_不适用于HTTP/2_)。
* [ ] **Minification:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有CSS文件被压缩。
* [ ] **Non-blocking:** ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) CSS文件需要是非阻塞的，以防止DOM花费时间来加载。

> - 📖 [loadCSS by filament group](https://github.com/filamentgroup/loadCSS)
> - 📖 [Example of preload CSS using loadCSS](https://gist.github.com/thedaviddias/c24763b82b9991e53928e66a0bafc9bf)

* [ ] **Unused CSS:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 移除未使用的CSS。

> - 🛠 [UnCSS Online](https://uncss-online.com/)
> - 🛠 [PurifyCSS](https://github.com/purifycss/purifycss)
> - 🛠 [PurgeCSS](https://github.com/FullHuman/purgecss)
> - 🛠 [Chrome DevTools Coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage)

### CSS testing

* [ ] **Stylelint:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有CSS或SCSS文件都没有任何错误。

> - 🛠 [stylelint, a CSS linter](https://stylelint.io/)
> - 📖 [Sass guidelines](https://sass-guidelin.es/)

* [ ] **Responsive web design:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有页面都在以下断点进行测试：320px，768px，1024px(根据你的分析，可以更大/不同)。
* [ ] **CSS Validator:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 对CSS进行了测试，纠正了相关错误。

> - 🛠 [CSS Validator](https://jigsaw.w3.org/css-validator/)

* [ ] **Desktop Browsers:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)  所有页面都在所有当前桌面浏览器(Safari、Firefox、Chrome、Internet Explorer、EDGE……)上进行测试。
* [ ] **Mobile Browsers:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有页面都在所有当前的移动浏览器(原生浏览器、Chrome、Safari……)上进行测试。
* [ ] **OS:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有页面都在所有当前操作系统(Windows、Android、iOS、Mac……)上进行测试。
* [ ] **Design fidelity:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 根据项目和质检，你可能会被要求更接近设计。你可以使用一些工具来比较创造性和代码实现，并确保一致性。&#x20;

> [Pixel Perfect - Chrome Extension](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en)

* [ ] **Reading direction:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 如果需要支持LTR和RTL语言，则需要对所有页面进行测试。

> - 📖 [Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks](https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/)
> - 📖 [Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks](https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2/)

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

## Images

> **注意：** 要全面了解图片优化，请查看Addy Osmani的免费电子书[Essential Image Optimization](https://images.guide/)。

### Best practices

* [ ] **Optimization:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有图像都经过优化，以便在浏览器中呈现。WebP格式可用于关键页面(如主页)。

> - 🛠 [Imagemin](https://github.com/imagemin/imagemin)
> - 🛠 使用[ImageOptim](https://imageoptim.com/) to optimise your images for free.
> - 🛠 Use [Kraken.io](https://kraken.io/web-interface) awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.
> - 🛠 [TinyPNG](https://tinypng.com/) losslessly optimise png, apng (animated png) and jpg images. Free and paid version available.
> - 🛠 [ZorroSVG](http://quasimondo.com/ZorroSVG/) jpg-like compression for transparent images using svg masking.
> - 🛠 [SVGO](https://github.com/svg/svgo) a Nodejs-based tool for optimizing SVG vector graphics files.
> - 🛠 [SVGOMG](https://jakearchibald.github.io/svgomg/) a web-based GUI version of SVGO for optimising your svgs online.

* [ ] **Picture/Srcset:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 使用picture/srcset为用户的当前视图提供最合适的图像。

> - 📖 [How to Build Responsive Images with srcset](https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/)

* [ ] **Retina:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 提供的布局图像2x或3x，支持Retina显示。
* [ ] **Sprite:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 小图像位于sprite文件中(对于图标，它们可以位于SVG sprite图像中)。
* [ ] **Width and Height:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 如果已知最终呈现的图像大小，则在`<img>`上设置`width` 和`height` 属性(对于CSS大小调整可以省略)。
* [ ] **Alternative text:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有都有一个可选的文本，可以直观地描述`<img>`。

> - 📖 [Alt-texts: The Ultimate Guide](https://axesslab.com/alt-texts/)

* [ ] **Lazy loading:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 图像是延迟加载的(始终提供noscript回退)。

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

## JavaScript

### 最佳实践

* [ ] **JavaScript Inline:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 不要有任何内联的JavaScript代码(混合在你的HTML代码里的)。
* [ ] **Concatenation:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) JavaScript文件被合并起来。
* [ ] **Minification:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) JavaScript文件被压缩(可以添加`.min`后缀)。

> - 📖 [Minify Resources (HTML, CSS, and JavaScript)](https://developers.google.com/speed/docs/insights/MinifyResources)

* [ ] **JavaScript security:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)&#x20;

> - 📖 [Guidelines for Developing Secure Applications Utilizing JavaScript](https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#Guidelines_for_Developing_Secure_Applications_Utilizing_JavaScript)

* [ ] **`noscript` tag:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 如果不支持页面上的脚本类型，或者当前在浏览器中关闭了脚本，那么在HTML body 中使用`<noscript>`标签。这将有助于客户端渲染重型应用程序，如React.js，请参阅示例。

> ```markup
> <noscript>
>   You need to enable JavaScript to run this app.
> </noscript>
> ```

* [ ] **Non-blocking:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) JavaScript文件使用`async`异步加载，或者使用`defer`属性延迟加载。

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

* [ ] **Optimized and updated JS libraries:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 在项目中使用的所有JavaScript库都是必需的(对于简单的功能，最好使用原生的JavaScript)，并更新到它们的最新版本，并且不要用不必要的方法胜过JavaScript。

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

* [ ] **Modernizr:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 如果需要针对某些特定特性，你可以使用自定义Modernizr在`<html>`标签中添加class。

> - 🛠 [Customize your Modernizr](https://modernizr.com/download?setclasses)

### JavaScript testing

* [ ] **ESLint:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 通过ESLint 来标记不会有错误(基于你的配置和规范规则)

> - 📖 [ESLint - The pluggable linting utility for JavaScript and JSX](https://eslint.org/)

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

## Security

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

### 最佳实践

* [ ] **HTTPS:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) HTTPS用于每个页面和所有外部内容（插件，图像......）。

> - 🛠 [Let's Encrypt - Free SSL/TLS Certificates](https://letsencrypt.org/)
> - 🛠 [Free SSL Server Test](https://www.ssllabs.com/ssltest/index.html)
> - 📖 [Strict Transport Security](http://caniuse.com/#feat=stricttransportsecurity)

* [ ] **HTTP Strict Transport Security (HSTS):** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) HTTP标头设置为“Strict-Transport-Security”。

> - 🛠 [Check HSTS preload status and eligibility](https://hstspreload.org/)
> - 📖 [HTTP Strict Transport Security Cheat Sheet - OWASP](https://www.owasp.org/index.php/HTTP_Strict_Transport_Security_Cheat_Sheet)
> - 📖 [Transport Layer Protection Cheat Sheet - OWASP](https://www.owasp.org/index.php/Transport_Layer_Protection_Cheat_Sheet)

* [ ] **Cross Site Request Forgery (CSRF):** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 你确保向服务器端发出的请求是合法的，并且来自你的网站/应用程序，以防止CSRF攻击。

> - 📖 \[Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP]\([https://www.owasp.org/index.php/Cross-Site\_Request\_Forgery\_(CSRF)\_Prevention\_Cheat\_Sheet](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_\(CSRF\)_Prevention_Cheat_Sheet))

* [ ] **Cross Site Scripting (XSS):** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 你的页面或网站不存在XSS可能存在的问题。

> - 📖 \[XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP]\([https://www.owasp.org/index.php/XSS\_(Cross\_Site\_Scripting)\_Prevention\_Cheat\_Sheet](https://www.owasp.org/index.php/XSS_\(Cross_Site_Scripting\)_Prevention_Cheat_Sheet))
> - 📖 [DOM based XSS Prevention Cheat Sheet - OWASP](https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet)

* [ ] **Content Type Options:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 防止谷歌Chrome和Internet Explorer试图从服务器声明的响应中嗅出响应的内容类型。

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

* [ ] **X-Frame-Options (XFO):** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 保护你的访问者免受劫持攻击。

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

* [ ] **Content Security Policy:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 定义如何在站点上加载内容，以及允许从何处加载内容。也可以用来防止劫持攻击。

> - 📖 [Content Security Policy - An Introduction - Scott Helme](https://scotthelme.co.uk/content-security-policy-an-introduction/)
> - 📖 [CSP Cheat Sheet - Scott Helme](https://scotthelme.co.uk/csp-cheat-sheet/)
> - 📖 [CSP Cheat Sheet - OWASP](https://www.owasp.org/index.php/Content_Security_Policy_Cheat_Sheet)
> - 📖 [Content Security Policy Reference](https://content-security-policy.com/)

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

## Performance

### 最佳实践

* [ ] **Goals to achieve:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 你的页面应该达到以下目标:
  * 首先在1秒内出现有意义的内容
  * 互动时间低于5秒的“平均”配置(一个200美元的Android在一个缓慢的3G网络上与400ms RTT和400kbps传输速度)和重复访问要低于2秒。
  * 关键文件大小压缩低于170Kb

> - 🛠 [Website Page Analysis](https://tools.pingdom.com/)
> - 🛠 [WebPageTest](https://www.webpagetest.org/)
> - 📖 [Size Limit: Make the Web lighter](https://evilmartians.com/chronicles/size-limit-make-the-web-lighter)

* [ ] **Minified HTML:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) HTML要被压缩
* [ ] **Lazy loading:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 图像、脚本和CSS需要延迟加载，以提高当前页面的响应时间(请参阅它们各自部分的详细信息)。
* [ ] **Cookie size:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 如果你使用cookie，请确保每个cookie不超过4096字节，并且你的域名不超过20个cookie。

> - 📖 [Cookie specification: RFC 6265](https://tools.ietf.org/html/rfc6265)
> - 📖 [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)
> - 🛠 [Browser Cookie Limits](http://browsercookielimits.squawky.net/)

* [ ] **Third party components:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 如果可能的话，依赖外部JS的第三方iframe或组件(如共享按钮)将被静态组件替换，从而限制对外部api的调用，并保持用户活动的私密性。

> - 🛠 [Simple sharing buttons generator](https://simplesharingbuttons.com/)

### Preparing upcoming requests

> * 📖 [Explanation of the following techniques](https://css-tricks.com/prefetching-preloading-prebrowsing/)

* [ ] **DNS resolution:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 可能需要的第三方服务的DNS在空闲期间使用dn -prefetch提前解析。

```markup
<link rel="dns-prefetch" href="https://example.com">
```

* [ ] **Preconnection:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 使用preconnect在空闲时间提前完成DNS查找、TCP握手和与即将需要的服务的TLS协商。

```markup
<link rel="preconnect" href="https://example.com">
```

* [ ] **Prefetching:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 使用`prefetch`在空闲时间期间预先请求将很快需要的资源（例如，延迟加载的图像）。

```markup
<link rel="prefetch" href="image.png">
```

* [ ] **Preloading:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 使用`preload`提前在当前页面中所需的资源（例如，放置在末尾的脚本）。

```markup
<link rel="preload" href="app.js">
```

> * 📖 [Difference between prefetch and preload](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)

### Performance testing

* [ ] **Google PageSpeed:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 你的所有页面都经过了测试(不仅仅是主页)，得分至少为90/100。

> - 🛠 [Google PageSpeed](https://developers.google.com/speed/pagespeed/insights/)
> - 🛠 [Test your mobile speed with Google](https://testmysite.withgoogle.com/)
> - 🛠 [WebPagetest - Website Performance and Optimization Test](https://www.webpagetest.org/)
> - 🛠 [GTmetrix - Website speed and performance optimization](https://gtmetrix.com/)
> - 🛠 [Speedrank - Improve the performance of your website](https://speedrank.app/)

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

## Accessibility

> **注意:** 你可以观看注意事项视频列表[A11ycasts with Rob Dodson](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) 📹

### 最佳实践

* [ ] **Progressive enhancement:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 主导航和搜索等主要功能应该在不启用JavaScript的情况下工作。

> - 📖 [Enable / Disable JavaScript in Chrome Developer Tools](https://www.youtube.com/watch?v=kBmvq2cE0D8)

* [ ] **Color contrast:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 颜色对比至少通过WCAG AA标准验证(移动端需要通过AAA)。

> - 🛠 [Contrast ratio](https://leaverou.github.io/contrast-ratio/)

#### Headings

* [ ] **H1:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有页面都有H1，他不是页面的标题。
* [ ] **Headings:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 标题应正确使用，顺序正确（H1至H6）。

> - 📹 [Why headings and landmarks are so important -- A11ycasts #18](https://www.youtube.com/watch?v=vAAzdi1xuUY\&index=9\&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)

### Semantics

* [ ] **Specific HTML5 input types are used:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 这对于显示针对不同类型的定制键盘和小部件的移动设备尤其重要。

> - 📖 [Mobile Input Types](http://mobileinputtypes.com/)

### Form

* [ ] **Label:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 标签与每个输入表单元素相关联。如果无法显示标签，则使用`aria-label`。

> - 📖 [Using the aria-label attribute - MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)

### Accessibility testing

* [ ] **Accessibility standards testing:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 使用WAVE工具测试你的页面是否符合可访问性标准。

> - 🛠 [Wave testing](http://wave.webaim.org/)

* [ ] **Keyboard navigation:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 仅使用键盘以可预见的顺序测试您的网站。所有交互式元素都可以访问和使用。
* [ ] **Screen-reader:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 所有页面都在屏幕阅读器（VoiceOver，ChromeVox，NVDA或Lynx）中进行了测试。
* [ ] **Focus style:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 如果禁用了focus ，则用CSS中的可见状态替换它。

> - 📹 [Managing Focus - A11ycasts #22](https://www.youtube.com/watch?v=srLRSQg6Jgg\&index=5\&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)

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

## SEO

* [ ] **Google Analytics:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 安装并正确配置了谷歌分析。

> - 🛠 [Google Analytics](https://analytics.google.com/analytics/web/)
> - 🛠 [GA Checker (and others)](http://www.gachecker.com/)

* [ ] **Headings logic:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 标题文本有助于理解当前页面中的内容。

> - 🛠 [Tota11y, tab Headings](http://khan.github.io/tota11y/#Try-it)

* [ ] **sitemap.xml:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 存在sitemap.xml并已提交给Google Search Console（以前是Google网站管理员工具）。

> - 🛠 [Sitemap generator](https://websiteseochecker.com/html-sitemap-generator/)

* [ ] **robots.txt:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) robots.txt没有阻止网页。

> - 📖 [The robots.txt file](https://varvy.com/robottxt.html)
> - 🛠 Test your robots.txt with [Google Robots Testing Tool](https://www.google.com/webmasters/tools/robots-testing-tool)

* [ ] **Structured Data:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 使用结构化数据的页面经过测试且没有错误。结构化数据有助于抓取工具了解当前页面中的内容。

> - 📖 [Introduction to Structured Data - Search - Google Developers](https://developers.google.com/search/docs/guides/intro-structured-data)
> - 📖 [RDFa - Linked Data in HTML](https://rdfa.info/)
> - 📖 [JSON-LD](https://json-ld.org/)
> - 📖 [Microdata](https://www.w3.org/TR/microdata/)
> - 🛠 Test your page with the [Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/)
> - 🛠 Complete list of vocabularies that can be used as structured data. [Schema.org Full Hierarchy](http://schema.org/docs/full.html)

* [ ] **Sitemap HTML:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 提供了HTML站点地图，可通过网站页脚中的链接访问。

> - 📖 [Sitemap guidelines - Google Support](https://support.google.com/webmasters/answer/183668?hl=en)

* [ ] **Pagination link tags:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 提供`rel="prev"`和`rel="next"`来指示分页内容。

> - 🛠 [Pagination (rel="prev/next") Testing Tool](https://technicalseo.com/seo-tools/rel-prev-next/)
> - 📖 [Pagination guidelines - Google Support](https://support.google.com/webmasters/answer/1663744?hl=en)

```markup
<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">
```

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

> 原文：[选自github](https://github.com/thedaviddias/Front-End-Checklist)
