Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JohnsenZhou/Front-End-Checklist
🗂 一份完美的前端开发清单——专为现代网站和追求极致的开发者打造
https://github.com/JohnsenZhou/Front-End-Checklist
Last synced: about 2 months ago
JSON representation
🗂 一份完美的前端开发清单——专为现代网站和追求极致的开发者打造
- Host: GitHub
- URL: https://github.com/JohnsenZhou/Front-End-Checklist
- Owner: JohnsenZhou
- License: cc0-1.0
- Fork: true (thedaviddias/Front-End-Checklist)
- Created: 2017-10-23T09:01:52.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-11T13:43:40.000Z (about 4 years ago)
- Last Synced: 2024-06-04T00:41:32.213Z (4 months ago)
- Homepage: http://lab.johnsenzhou.com/Front-End-Checklist/
- Size: 351 KB
- Stars: 1,162
- Watchers: 49
- Forks: 136
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[![Front-End Checklist Logo](https://github.com/thedaviddias/Front-End-Checklist/blob/master/src/img/banners/front-end-checklist-banner-light.jpg?raw=true)](http://frontendchecklist.com)
前端开发清单
前端开发清单是一份在站点/HTML页面发布到生产环境之前需要测试的所有元素的详尽列表。[![Join the chat at https://gitter.im/Front-End-Checklist/Lobby](https://badges.gitter.im/Front-End-Checklist/Lobby.svg)](https://gitter.im/Front-End-Checklist/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)
[![Backers on Open Collective](https://opencollective.com/front-end-checklist/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/front-end-checklist/sponsors/badge.svg)](#sponsors)
[![Contributors](https://img.shields.io/github/contributors/thedaviddias/Front-End-Checklist.svg)](https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors)
[![StackShare](https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat)](https://stackshare.io/thedaviddias/front-end-checklist)
[![CC0](https://img.shields.io/badge/license-CC0-green.svg)](https://creativecommons.org/publicdomain/zero/1.0/)它基于前端开发人员多年的经验沉淀,以及其他优秀的开源清单。
## 目录
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订阅源)。我们选择使用一下3级区分:
* ![Low][low_img] **推荐**,但在某些特定情况下可以省略。
* ![Medium][medium_img] **强烈推荐**,但是可能在某些特殊情况下能被省略。某些元素,如果省略将会对性能或SEO方面产生不良影响。
* ![High][high_img] **不能被任何理由忽略**。忽略可能会导致你的页面部分功能障碍或者产生可访问性以及SEO等问题。测试优先级需要首先考虑这些元素。某些资源拥有特定的标识符,帮助你去理解清单上不同类型的内容或帮助。
* 📖: 文档或文章
* 🛠: 在线工具/测试工具
* 📹: 媒体或视频内容---
## Head
> **注意:** 你能在[HEAD列表](https://github.com/joshbuchea/HEAD)中找到HTML文档``标签内所有可配置的属性。
### Meta 标签
* [ ] **Doctype(文档类型):** ![High][high_img] 以下Doctype标签声明文档为HTML5类型,需要写在HTML文件的顶部。
```html
```
> * 📖 [设置文档字符编码格式 - HTML5 W3C](https://www.w3.org/TR/html5/syntax.html#determining-the-character-encoding)
* 下列两个 meta 标签需要首先声明在head中:Charset 和 Viewport。*
* [ ] **Charset(字符):** ![High][high_img] 正确声明`Charset` meta (UTF-8)。
```html
```
* [ ] **Viewport(视口):** ![High][high_img] 正确声明`viewport` meta。
```html
```
* [ ] **Title(标题):** ![High][high_img] 所有页面都必须使用`title`标签(SEO:Google会计算标题中使用的字符的像素宽度,范围在472和482像素之间,所以平均字符数限制大约在55个字符左右)。
```html
网站标题不超过55个字符
```> * 📖 [Title 标签 - HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)
> * 🛠 [SERP 代码段生成器](https://www.sistrix.com/serp-snippet-generator/)* [ ] **Description(描述):** ![High][high_img] 提供`description`标签, 它是唯一的,且内容不能超过150个字符。
```html
```
> * 📖[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][medium_img] 每个`favicon`都被创建并正确显示,如果你只有一个`favicon.ico`,把它放在你网站的根目录下。 通常来说你不需要做任何操作他就能正常显示。 然而, 使用一下示例中的方法是比较好的做法。不过现在我们推荐使用**PNG**格式,相比`.ico`格式有较好的优势(推荐尺寸: 32x32px)。
```html
```
> * 🛠 [Favicon 生成器](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 技巧](https://css-tricks.com/favicon-quiz/)
> * 📖 [PNG favicons - caniuse](https://caniuse.com/#feat=link-icon-png)* [ ] **Apple Web App Meta:** ![Low][low_img] 苹果设备目前使用的 Meta 标签
```html
```
> * 📖 [在苹果设备中配置Web应用程序](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
> * 📖 [苹果设备支持的Meta标记列表](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)- [ ] **Windows Tiles:**![Low][low_img] Windows 操作系统磁贴
```html
```
browserconfig.xml文件的最小所需xml标记如下所示:
```xml
```
> 📖 [浏览器配置模式参考](https://msdn.microsoft.com/en-us/library/dn320426(v=vs.85).aspx)
* [ ] **Canonical:** ![Medium][medium_img] 使用`rel="canonical"`以避免重复的内容。
```html
```
> - 📖 [使用规范的URLs - Search Console Help - Google Support](https://support.google.com/webmasters/answer/139066?hl=en)
> - 📖 [rel = canonical的5个常见错误 - Google Webmaster Blog](https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html)### HTML 标签
* [ ] **Language tag(语言标签):** ![High][high_img] 指定你网站的语言标签并与当前页面语言相关联。
```html
```
* [ ] **Direction tag(方向标签):** ![Medium][medium_img] `direction`属性规定元素内容的文本方向。(可以在另一个HTML标签上使用)
```html
```
> * 📖 [dir 属性 - HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
* [ ] **Alternate language(备用语言):** ![Low][low_img] 指定网站的语言标签并与当前页面的语言相关联。
```html
```
* [ ] **x-default:** ![Low][low_img] 表明此类网页未定位到特定的语言或区域设置。
```html
```
> * 📖 [x-default - Google](https://webmasters.googleblog.com/2013/04/x-default-hreflang-for-international-pages.html)
* [ ] **Conditional comments(条件注释):** ![Low][low_img] 如有需要,可针对IE添加条件注释。
> 📖 [关于条件注释(Internet Explorer) - MSDN - Microsoft](https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx)
* [ ] **RSS feed(RSS 订阅):** ![Low][low_img] 如果你的项目是一个博客或者有大量的文章,可以添加一个RSS链接。
* [ ] **CSS Critical(最小 CSS 合集):** ![Medium][medium_img] `CSS critical`收集并呈现当前页面可见部分的核心CSS。在主要的CSS调用渲染之前以单行(最小化)在``中嵌入。
> * 🛠 [由Addy Osmani于GitHub撰写的Critical](https://github.com/addyosmani/critical)
* [ ] **CSS order(加载顺序):** ![High][high_img] 所有CSS文件都需要在JavaScript文件加载之前加载完成(除了有时JS文件异步加载到页面之外的情况)。
### Social meta 标签
强烈推荐***Facebook OG*** and ***Twitter Cards***。如果你针对某些特定的存在并希望确保显示,也可以考虑其他社交媒体的meta。
* [ ] **Facebook Open Graph:** ![Low][low_img] 所有Facebook Open Graph(OG)都经过测试并且没有任何错误。图片至少需要600 x 315像素,建议使用1200 x 630像素。
> **注意:** 使用 `og:image:width` 和 `og:image:height` 将会爬取制定尺寸的图像,以便图像能够快速呈现,无需进行异步下载和处理。
```html
```
> * 📖 [A Guide to Sharing for Webmasters](https://developers.facebook.com/docs/sharing/webmasters/)
> * 🛠 使用[Facebook OG testing](https://developers.facebook.com/tools/debug/)测试你的页面。
> * 📖 [Best Practices - Sharing](https://developers.facebook.com/docs/sharing/best-practices/)* [ ] **Twitter 卡片:** ![Low][low_img]
```html
```
> * 📖 [推特卡片使用入门 — Twitter Developers](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started)
> * 🛠 使用[Twitter card validator](https://cards-dev.twitter.com/validator)测试你的页面。**[⬆ 返回顶部](#目录)**
---
## HTML
### 最佳实践
* [ ] **HTML5 Semantic Elements(HTML5语义化元素):** ![High][high_img] 正确地使用HTML5语义化标签(header, section, footer, main...).
> 📖 [HTML 参考](http://htmlreference.io/)
* [ ] **Error pages(错误页面):** ![High][high_img] 404页面和5xx错误页面的存在。记得在5xx错误页面中集成CSS样式文件(在当前服务器上无外部调用)。
* [ ] **Noopener:** ![Medium][medium_img] 如果你使用外部链接`target="_blank"`, 你的链接必须有个`rel="noopener"`属性,防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器,请使用`rel="noopener noreferrer"`。
> 📖 [关于 rel=noopener](https://mathiasbynens.github.io/rel-noopener/)
* [ ] **Clean up comments(清除注释):** ![Low][low_img] 在将页面发布到生产环境之前,应该删除不必要的代码。
### HTML 测试
* [ ] **W3C compliant(兼容):** ![High][high_img] 所有页面需要使用W3C验证器进行测试,以检测HTML代码中的可能存在的问题。
> * 🛠 [W3C validator](https://validator.w3.org/)
* [ ] **HTML Lint:** ![High][high_img] 使用工具来帮助我们分析HTML代码中可能存在的问题。
> * 🛠 [肮脏的标记列表](https://www.10bestdesign.com/dirtymarkup/)
> * 🛠 [webhint](https://webhint.io/)* [ ] **Desktop Browsers:** ![High][high_img] 所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。
* [ ] **Mobile Browsers:** ![High][high_img] 所有页面都在移动端浏览器上通过测试(Native browser, Chrome, Safari...).
* [ ] **Link checker(链接检查器):** ![High][high_img] 页面中链接没有失效,请确认你没有404错误。
> * 🛠 [W3C Link Checker](https://validator.w3.org/checklink)
* [ ] **Adblockers test(广告拦截器测试):** ![Medium][medium_img] 你的的网站会在启用广告拦截器的情况下正确显示页面内容(你可以提供一条消息,引导人们停用其广告拦截器)。
> [Pixel Perfect - Chrome 扩展](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en)
**[⬆ 返回顶部](#目录)**
---
## Webfonts
> **注意:** 使用webfonts可能会导致文档样式闪烁以及文本不可见,所以在使用时需要考虑使用后备字体,或者使用webfont加载器来控制字体加载行为。
>
> * 📖 [Google Technical considerations about webfonts](https://developers.google.com/fonts/docs/technical_considerations)* [ ] **Webfont format(字体格式):** ![High][high_img] 现代浏览器都支持WOFF、WOFF2、TTF格式
> * 📖 [WOFF - Web开放字体格式 - Caniuse](https://caniuse.com/#feat=woff).
> * 📖 [WOFF 2.0 - Web开放字体格式 - Caniuse](https://caniuse.com/#feat=woff2).
> * 📖 [TTF/OTF - TrueType和OpenType字体支持](https://caniuse.com/#feat=ttf)
> * 📖 [Using @font-face - CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/)* [ ] **Webfont size(字体大小):** ![High][high_img] Webfont大小不超过 2 MB (包括所有版本在内)。
* [ ] **Webfont loader(字体加载器):** ![Low][low_img] 使用Webfont加载器控制加载行为。
> * 🛠 [Typekit Web字体加载器](https://github.com/typekit/webfontloader)
**[⬆ 返回顶部](#目录)**
## CSS
> **注意:** 大部分前端开发人员都会看看[CSS指南](https://cssguidelin.es/)和[Sass指南](https://sass-guidelin.es/)。如果你对CSS属性有疑问,可以访问[CSS参考文档](http://cssreference.io/)。
* [ ] **响应式网站设计:** ![High][high_img] 网站使用响应式设计。
* [ ] **CSS打印属性:** ![Medium][medium_img] 提供打印样式表,并确保使用正确。
* [ ] **预处理器:** ![Medium][medium_img] 你的网站使用css预处理器(推荐[Sass](http://sass-lang.com/)).
* [ ] **唯一ID:** ![High][high_img] 如果使用了ID,确保ID的唯一性。
* [ ] **Reset CSS:** ![High][high_img] 使用CSS reset(如reset.css, normalize.css, reboot) *(如果你使用的是CSS框架,例如Bootstrap或Foundation,则reset.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 前缀:** ![Low][low_img] 所有以**js-**开头的class(或者JavaScript文件中使用的id)不写入css文件。
```html