前端开发清单

Join the chat at https://gitter.im/Front-End-Checklist/Lobby Front‑End_Checklist followed Contributors StackShare CC0

前端开发清单是一份在站点/HTML页面发布到生产环境之前需要测试的所有元素的详尽列表。

它基于前端开发人员多年的经验沉淀,以及其他优秀的开源清单。

在Product Hunt上投票或推荐来帮助前端开发清单的推广🌈。

目录

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Images
  6. JavaScript
  7. Security
  8. Performance
  9. Accessibility
  10. SEO

How to use?

前端开发清单中的所有项目都是大部分项目所必需的, 但某些元素可以省略或者并不是这么重要 (在管理Web应用程序的情况下,你可能并不需要RSS订阅源)。我们选择使用一下3级区分:

  • Low 意味着该项目被推荐,但在某些特定情况下可以省略。
  • Medium 意味着该项目是强烈推荐的,但是可能在某些特殊情况下能被省略。某些元素,如果省略将会对性能或SEO方面产生不良影响。
  • High 意味着项目不能被任何理由忽略。忽略可能会导致你的页面部分功能障碍或者产生可访问性以及SEO等问题。测试优先级需要首先考虑这些元素。

某些资源拥有特定的标识符,帮助你去理解清单上不同类型的内容或帮助。

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

Head

注意: 你能在HEAD列表中找到HTML文档<head>标签内所有可配置的属性。

Meta 标签

  • [ ] Doctype(档案类型): High Doctype是HTML5,需要声明在HTML文件的顶部。
<!-- Doctype HTML5 -->
<!doctype html>

接下来三个 meta 标签 (Charset, X-UA Compatible, Viewport) 需要首先在head中声明

  • [ ] Charset(字符类型): High 正确声明Charset meta(UTF-8)。 html <!-- 设置文档的字符编码 --> <meta charset="utf-8">

  • [ ] X-UA-Compatible(IE相关设定): Medium 正确声明X-UA-Compatible meta。

<!-- 指示Internet Explorer使用其最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

📖 指定旧文档模式(Internet Explorer)

  • [ ] Viewport(视口): High 正确声明viewport meta。
<!-- 响应式网页设计viewpoint声明 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  • [ ] Title(标题): High 所有页面都使用title(SEO:Google会计算标题中使用的字符的像素宽度,范围在472和482像素之间,所以平均字符数限制大约在55个字符左右)。
<!-- 文档标题 -->
<title>网站标题不超过55个字符</title>
  • [ ] Description(描述): High 提供description标签, 它是唯一的同时内容不能超过150个字符。
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
  • [ ] Favicons: Medium 每个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">
  • [ ] Apple Touch Icon: Low 苹果设备favicon适配。 (创建至少200x200像素尺寸的Apple图标文件以支持你可能需要的用到的所有尺寸)
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">

📖 配置Web应用程序

  • [ ] Windows Tiles:Low Windows tiles are present and linked.
<!-- Microsoft Tiles -->
<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>

📖 浏览器配置模式参考

  • [ ] Canonical: Medium 使用rel="canonical"以避免重复的内容。
<!-- 帮助防止重复内容出现 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML 标签

  • [ ] Language tag(语言标签): High 指定你网站的语言标签并与当前页面语言相关联。
<html lang="zh_cn">
  • [ ] Direction tag(方向标签): Medium direction属性规定元素内容的文本方向。(可以在另一个HTML标签上使用)。
<html dir="rtl">
  • [ ] Alternate language(备用语言): Low 指定网站的语言标签并与当前页面的语言相关联。
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • [ ] Alternate language(条件注释): Low 如有需要,可针对IE添加条件注释。

📖 关于条件注释(Internet Explorer) - MSDN - Microsoft

  • [ ] RSS feed(RSS 訂閱): Low 如果你的项目是一个博客或者有大量的文章,可以添加一个RSS链接。
  • [ ] Inline critical CSS(最小 CSS 合集): Medium CSS critical收集并呈现当前页面可见部分的核心CSS。在主要的CSS调用渲染之前以单行(最小化)在<style></style>中嵌入。
  • [ ] CSS order(加载顺序): High 所有CSS文件都需要在JavaScript文件加载之前加载完成(除了有时JS文件异步加载到页面之外的情况)。

Social meta

强烈推荐Facebook OG and Twitter Cards。如果你针对某些特定的存在并希望确保显示,也可以考虑其他社交媒体的meta。

  • [ ] Facebook Open Graph: Low 所有Facebook Open Graph(OG)都经过测试并且没有任何错误。图片至少需要600 x 315像素,建议使用1200 x 630像素。

注意: 使用 og:image:widthog: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">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
  • [ ] Twitter Card: Low
<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">

⬆ 返回顶部


HTML

最佳实践

  • [ ] HTML5 Semantic Elements(HTML5语义化元素): High 正确的使用HTML5语义化标签(header, section, footer, main…).

📖 HTML 参考

  • [ ] Error pages(错误页面): High 404页面和5xx错误的存在。5xx错误页面需要集成其CSS(在当前服务器上无外部调用)。

  • [ ] Noopener: Medium 如果你使用外部链接target="_blank", 你的链接必须有个rel="noopener"属性,防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器,请使用rel="noopener noreferrer"

📖 关于 rel=noopener

  • [ ] Clean up comments(清除注释): Low 在将页面发布到生产环境之前,应该删除不必要的代码。

HTML 测试

  • [ ] W3C compliant(兼容): High 所有页面需要使用W3C验证器进行测试,以检测HTML代码中的可能存在的问题。
  • [ ] HTML Lint: High 使用工具来帮助我们分析HTML代码中可能存在的问题。
  • [ ] Desktop Browsers: High 所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE…)。
  • [ ] Mobile Browsers: High 所有页面都在移动端浏览器上通过测试(Native browser, Chrome, Safari…).

  • [ ] Link checker(链接检查器): High 页面中链接没有断开,请确认你没有404错误。

  • [ ] Adblockers test(广告拦截器测试): Medium 你的的网站会在启用广告拦截器的情况下正确显示页面内容(你可以提供一条消息,引导人们停用其广告拦截器)。

  • [ ] Pixel perfect: High 页面的像素级实现。根据设计稿的质量,你的页面可能做不到100%的还原,但你的网页需要尽可能的靠近设计稿。

Pixel Perfect - Chrome 扩展

⬆ 返回顶部


Webfonts

  • [ ] Webfont format(字体格式): High 现代浏览器都支持WOFF、WOFF2、TTF格式

注意: 使用webfonts可能会导致文档样式闪烁以及文本不可见,所以在使用时需要考虑使用后备字体,或者使用webfont加载器来控制字体加载行为。

  • [ ] Webfont size(字体大小): High Webfont大小不超过 2 MB (包括所有版本在内)。

  • [ ] Webfont loader(字体加载器): Low 使用webfont加载器控制加载行为。

⬆ 返回顶部

CSS

注意: 大部分前端开发人员都会看看CSS指南Sass指南。如果你对CSS属性有疑问,可以访问CSS参考文档

  • [ ] 响应式网站设计: High 网站使用响应式设计。
  • [ ] CSS打印属性: Medium 提供打印样式表,并确保使用正确。
  • [ ] 预处理器: Medium 你的网站使用css预处理器(推荐Sass).
  • [ ] 唯一ID: High 如果使用了ID,确保ID的唯一性。
  • [ ] Reset CSS: High 使用CSS reset(如reset.css, normalize.css, reboot) (如果你使用的是CSS框架,例如Bootstrap或Foundation,则reset css已被包含在其中)
  • [ ] JS 前缀: Low 所有以js-开头的class(或者JavaScript文件中使用的id)不写入css文件。
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • [ ] CSS embed or line: High 避免使用CSS嵌入或内联,仅用于必要的情况(例如: background-image for slider, CSS critical).
  • [ ] 浏览器内核前缀: High 对部分属性加上浏览器内核前缀,生成你浏览器兼容的属性。

性能

  • [ ] 连接: High 将CSS文件连接到一个文件中。 (不适用HTTP/2)
  • [ ] 压缩: High 压缩所有CSS文件。
  • [ ] 非阻塞: Medium CSS文件需要非阻塞,以防在DOM加载时花费大量时间。
  • [ ] 未使用的CSS: Low 删除未使用的CSS。

CSS 测试

  • [ ] 格式检查: High 所有的CSS或SCSS文件没有任何格式错误。

  • [ ] 响应式网页设计: High 所有页面都需要经过以下几种情况的测试: 320px, 768px, 1024px (根据自己的项目情况,可以设置更多)。

  • [ ] CSS验证器: Medium CSS经过测试,同时所有错误都被修复。

    🛠 CSS验证器

  • [ ] 桌面浏览器: High 所有页面都在桌面浏览器进行了测试(Safari, Firefox, Chrome, Internet Explorer, EDGE…)。

  • [ ] 移动端浏览器: High 所有页面都在移动端浏览器进行了测试(Native browser, Chrome, Safari…)。

  • [ ] 操作系统: High 所有页面都在当前操作系统上进行了测试(Windows, Android, iOS, Mac…)。

  • [ ] Pixel perfect: High 页面需要像素级实现。根据设计稿的质量,你可能不会100%与设计稿相同,但你的网页需要尽可能的靠近设计稿的要求。

Pixel Perfect - Chrome Extension

  • [ ] Reading direction: High 如果需要的话,所有页面都需要对LTR和RTL语言进行测试。

⬆ 返回顶部


Images

注意: 想要完整的了解图像优化,可以在Addy Osmani查看免费电子书图像优化基础

最佳实践

  • [ ] 优化: High 所有图像都经过优化并且可在浏览器中正常显示。WebP格式可用于关键页面(如首页)。 All images are optimized to be rendered in the browser. WebP format could be used for critical pages (like Homepage).
  • [ ] Picture/Srcset: Medium 使用Picture/Srcset为用户当前的视口提供最合适的图像。
  • [ ] 视网膜屏: Low 提供x2 或 3x的图像来支持视网膜屏显示。
  • [ ] 雪碧图: Medium 小图片放到一个雪碧图中。
  • [ ] 宽高: High 所有<img>都需要设置高度和宽度(不要指定px 和 %)。
  • [ ] 图片描述文本: High 所有 <img> 必须有alt属性来直观的描述图片(在无障碍网页中尤其重要)。

    📖 Alt-文本: 终极指南

  • [ ] 懒加载: Medium 图片懒加载 (A noscript fallback is always provided).

⬆ 返回顶部


JavaScript

最佳实践

  • [ ] JavaScript 内联: High 确保没有任何js代码内联(与HTML代码混合)。
  • [ ] 连接: High 将js文件连接起来。
  • [ ] 压缩: High 压缩所有js文件(可以添加 .min 后缀)。

压缩资源 (HTML, CSS, and JavaScript)

  • [ ] JavaScript安全性:

用JavaScript开发安全应用程序指南

  • [ ] Non-blocking(非阻塞): Medium JavaScript文件使用async或延迟使用defer属性异步加载。
  • [ ] Modernizr: Low 如果您需要指定某些特定功能,则可以使用自定义Modernizr在<html>标签中添加class。

JavaScript 测试

  • [ ] ESLint: High 用ESLint检测并没有错误(基于你的配置规则)。

⬆ back to top


Security

扫描并检查你的网站

最佳实践

  • [ ] HTTPS: Medium 每个页面和所有外部内容(插件、图像…)都使用HTTPS。
  • [ ] HTTP严格传输安全性(HSTS): Medium HTTP头设置 ‘Strict-Transport-Security’.
  • [ ] 跨站点请求伪造攻击(CSRF): High 确保向服务器端发出的请求是合法的,并来自您的网站/应用程序,以防止发生CSRF攻击。

📖 跨站点请求伪造(CSRF)防范清单 - OWASP

  • [ ] 跨站脚本攻击(XSS): High 页面或网站没有XSS攻击的可能性。
  • [ ] Content Type Options Medium 防止Google Chrome和Internet Explorer尝试将响应的内容类型从服务器声明的内容类型中嗅探出来。
  • [ ] X-Frame-Options (XFO)(外部框架连接设定) Medium 保护网站的访问者免受劫持攻击。
  • [ ] Content Security Policy(内容安全策略) Medium 定义内容如何加载到您的网站上的方式以及允许加载的位置。也可以用来防止劫持攻击。

⬆ 返回顶部


Performance

最佳实践

  • [ ] 页面大小: High 每张网页的大小在0到500KB之间。
  • [ ] 文件压缩: Medium 压缩你的HTML文件。

    🛠 W3C Validator

  • [ ] 懒加载: Medium 图片、js脚本和CSS需要懒加载,以提高当前页面的响应时间(请参见各自部分的详细信息)。

  • [ ] Cookie大小: 如果使用Cookie,确保每个Cookie不超过4096个字节,并且域名下不超过20个Cookie。

  • [ ] 第三方组件: Medium 在可能的情况下,用静态组件替代依赖于外部JS的第三方iframe或组件(如共享按钮),从而限制对外部API的调用,并将用户活动保持为私有。

为将到来的请求做准备

📖 以下几种技术的详细说明

  • [ ] DNS解析: Low 使用dns-prefetch让第三方DNS服务商主动去执行域名解析的功能。
<link rel="dns-prefetch" href="https://example.com">
  • [ ] 预连接: Low 使用preconnect在空闲期间提前做好DNS查询, TCP三次握手和TLS 协商。
<link rel="preconnect" href="https://example.com">
  • [ ] 预获取: Low 使用prefetch在空闲期间提前请求即将需要的资源(例如:图像的懒加载)。
<link rel="prefetch" href="image.png">
  • [ ] 预加载: Low 使用preload提前加载当前页面所需要的资源(例如:js脚本放在<body>的最后)。
<link rel="preload" href="app.js">

📖 预加载和预获取之间的差异

性能测试

  • [ ] Google PageSpeed: High 所有的网页都经过测试(不仅仅是首页),而且得分至少为90/100。

⬆ 返回顶部


Accessibility

注意: 查看播放列表A11ycasts with Rob Dodson 📹

最佳实践

  • [ ] 渐进式增强: Medium 主要功能如主导航和搜索等功能应该在没有启用JavaScript的情况下工作。

📖 在Chrome开发者具中启用/禁用JavaScript

  • [ ] 颜色对比度: Medium 颜色对比度至少通过WCAG AA标准(移动端需要通过AAA)。

标题

  • [ ] H1: High 所有页面都有H1,它不是网站的标题。
  • [ ] Headings: High 标题应以正确的顺序合理使用(H1至H6)。

Landmarks

  • [ ] banner角色: High <header> 标签中加入 role="banner"属性。
  • [ ] navigation角色: High <nav> 标签中加入 role="navigation"属性。
  • [ ] main角色: High <main> 标签中加入 role="main"属性。

语义化

  • [ ] 使用特定的HTML5输入类型: Medium 这对于显示不同类型的自定义键盘和小部件的移动设备尤其重要。

表单

  • [ ] Label: High label与每个输入表单元素相关联,如果label无法显示,请使用aria-label代替。

📖 使用aria-label属性 - MDN

Accessibility 测试

  • [ ] Accessibility标准测试: High 使用WAVE工具测试你的页面是否符合accessibility标准。
  • [ ] Keyboard navigation(键盘导航): High 在你的键盘上以可能出现的操作顺序去测试,确保所有交互式元素都可访问和可用。
  • [ ] Screen-reader(屏幕阅读器): Medium 所有页面都在屏幕阅读器(VoiceOver, ChromeVox, NVDA or Lynx)中进行了测试。
  • [ ] Focus style(专注风格): High 如果焦点被禁用,它将被CSS中的可见状态所替代。

⬆ 返回顶部


SEO

  • [ ] Google Analytics: High Google Analytics 正确安装和配置。
  • [ ] Headings logic: Medium 标题文字有助于了解当前页面的主要内容。
  • [ ] sitemap.xml: High sitemap.xml存在并提交到Google Search Console(以前的Google管理员工具)。
  • [ ] robots.txt: High robots.txt正确配置,不阻止网页被爬取。
  • [ ] Structured Data(结构化数据): High 使用Structured Data的页面通过测试并且没有错误。Structured Data会帮助爬虫理解当前页面的内容。
  • [ ] Sitemap HTML(HTML网站地图): Medium 提供HTML网站地图,可通过网站页脚中的链接进行访问。

⬆ back to top


Translation

The Front-End Checklist is also available in other languages. Thanks for all translators and their awesome work!


前端开发清单徽章

如果想显示出你的项目遵循了前端开发清单的各项规定,请将此徽章放在项目的README文件上!

Front‑End_Checklist followed

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ 返回顶部


Contributing

提issue或提交合并请求以建议更改或添加。

Guide

前端开发清单 项目有两个分支:

1. master

该分支包含README.md,内容会自动反映到前端开发清单。 网站上。

2. develop

这个分支将用于对结构和内容进行一些重大更改。不过最好还是使用主分支来修复小错误或添加新项目。

贡献

查看所有贡献人员 contributors.

Support

如果您有任何问题或建议,可以通过Gitter或Twitter联系我们:

作者

David Dias

License

CC0

⬆ 回到顶部

View on GitHub