Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Janyet-Lee/Front-End-Checklist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

270 Commits

Front-End Checklist Logo

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

Join the chat at https://gitter.im/Front-End-Checklist/Lobby Front‐End_Checklist followed Backers on Open Collective Sponsors on Open Collective Contributors StackShare CC0

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

Sponsor

目录

  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)。
<!-- 设置文档的字符编码 -->
<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: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">
<!-- 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

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

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

  • 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安全性: High

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

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

JavaScript 测试

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

⬆ 返回顶部

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大小: Medium 如果使用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网站地图,可通过网站页脚中的链接进行访问。

⬆ 返回顶部

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

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

Support

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

作者

David Dias

贡献者

感谢以下人员对本项目的贡献 [Contribute]。

支持者

Thank you to all our backers! 🙏 [Become a backer]

赞助商

通过成为赞助商来支持这个项目。您的徽标将显示在这里,并链接到您的网站。 [成为赞助商]

License

CC0

⬆ 回到顶部

About

🗂 一份完美的前端开发清单——专为现代网站和极致的开发者打造

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

AltStyle によって変換されたページ (->オリジナル) /