前端开发清单

摘要：它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。在上投票或推荐来帮助前端清单的推广。跨站点请求伪造防范清单跨站脚本攻击页面或网站没有攻击的可能性。

原文地址：Front-End-Checklist

原文作者：David Dias

译者：JohnsenZhou

文章地址：https://github.com/JohnsenZhou/Front-End-Checklist

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

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

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

Head

HTML

Webfonts

CSS

Images

JavaScript

Security

Performance

Accessibility

SEO

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

意味着该项目被推荐，但在某些特定情况下可以省略。

意味着该项目是强烈推荐的，但是可能在某些特殊情况下能被省略。某些元素，如果省略将会对性能或SEO方面产生不良影响。

意味着项目不能被任何理由省略。你的页面可能会导致功能障碍或有可访问性或SEO问题。测试优先级需要首先考虑这些元素。

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

?: 文档或文章

?: 在线工具/测试工具

?: 媒体或视频内容

注意: 你能在HTML文档的中找到所有的清单列表。

[ ] Doctype: Doctype是HTML5的属性，需要声明在HTML文件的顶部。

? Determining the character encoding - HTML5 W3C

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

[ ] Charset: 正确声明Charset标签(UTF-8)。

[ ] X-UA-Compatible: X-UA-Compatible 元标签。

? 指定旧文档模式(Internet Explorer).aspx)

[ ] Viewport: 正确声明viewport标签。

[ ] Title: 所有页面都使用title(SEO:包括网站标题不超过65个字符)。

? Title - HTML - MDN

[ ] Description: 提供description标签， 它是唯一的同时内容不能超过150个字符。

[ ] Favicons: 每个favicon都被创建并正确显示，如果你只有一个favicon.ico，把它放在你网站的根目录下。 通常来说你不需要做任何操作他就能正常显示。 然而, 使用一下示例中的方法是比较好的做法。不过现在我们推荐使用PNG格式，相比.ico格式有较好的优势(推荐尺寸: 32x32px)。

? Favicon 生成器

? RealFaviconGenerator

? Favicon Cheat Sheet

? Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS 技巧

? PNG favicons - caniuse

[ ] Apple Touch Icon: 苹果设备favicon适配。 (创建至少200x200像素尺寸的Apple图标文件以支持你可能需要的用到的所有尺寸)

? 配置Web应用程序

[ ] Windows Tiles: Windows tiles are present and linked.

browserconfig.xml文件的最小所需xml标记如下所示:

? 浏览器配置模式参考.aspx)

[ ] Canonical: 使用rel="canonical"以避免重复的内容。

? Use canonical URLs - Search Console Help - Google Support

? 5 common mistakes with rel=canonical - Google Webmaster Blog

[ ] Language tag: 指定你网站的语言标签并与当前页面语言相关联。

[ ] Direction tag: direction属性规定元素内容的文本方向。(可以在另一个HTML标签上使用)。

? dir - HTML - MDN

[ ] Alternate language: 指定网站的语言标签并与当前页面的语言相关联。

[ ] 条件注释: 如有需要，可针对IE添加条件注释。

? 关于条件注释(Internet Explorer) - MSDN - Microsoft.aspx)

[ ] RSS feed: 如果你的项目是一个博客或者有大量的文章，可以添加一个RSS链接。

[ ] CSS Critical: CSS critical收集并呈现当前页面可见部分的所有CSS。在主要的CSS调用之前以单行(最小化)在中嵌入。

? Critical by Addy Osmani on Github

[ ] CSS 顺序: 所有CSS文件都需要在JavaScript文件加载之前加载完成(除了有时JS文件异步加载到页面之外的情况)。

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

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

? A Guide to Sharing for Webmasters

? 使用Facebook OG testing测试你的页面。

[ ] Twitter Card:

? Getting started with cards — Twitter Developers

? 使用Twitter card validator测试你的页面。

⬆ 返回顶部

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

? HTML 参考

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

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

? 关于 rel=noopener

[ ] 清除注释: 在将页面发布到生产环境之前，应该删除不必要的代码。

[ ] W3C 兼容: 所有页面需要使用W3C验证器进行测试，以检测HTML代码中的可能存在的问题。

? W3C validator

[ ] HTML Lint: 使用工具来帮助我们分析HTML代码中可能存在的问题。

? Dirty markup

[ ] Desktop Browsers: 所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。

[ ] Mobile Browsers: 所有页面都在移动端浏览器上通过测试(Native browser, Chrome, Safari...).

[ ] 链接检查器: 页面中链接没有断开，请确认你没有404错误。

? W3C Link Checker

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

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

Pixel Perfect - Chrome 扩展

⬆ 返回顶部

[ ] Webfont格式: 现代浏览器都支持WOFF、WOFF2、TTF格式

? WOFF - Web Open Font Format - Caniuse.
? WOFF 2.0 - Web Open Font Format - Caniuse.
? TTF/OTF - TrueType and OpenType font support

? Using @font-face - CSS-Tricks

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

⬆ 返回顶部

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

[ ] 响应式网站设计: 网站使用响应式设计。

[ ] CSS打印属性: 提供打印样式表，并确保使用正确。

[ ] 预处理器: 你的网站使用css预处理器(推荐Sass).

[ ] 唯一ID: 如果使用了ID，确保ID的唯一性。

[ ] Reset CSS: 使用CSS reset(如reset.css, normalize.css, reboot) (如果你使用的是CSS框架，例如Bootstrap或Foundation，则reset css已被包含在其中)

? Reset.css

? Normalize.css

? Reboot

[ ] JS 前缀: 所有以js-开头的class(或者JavaScript文件中使用的id)不写入css文件。

[ ] CSS embed or line: 避免使用CSS嵌入或内联，仅用于必要的情况(例如: background-image for slider, CSS critical).

[ ] 浏览器内核前缀: 对部分属性加上浏览器内核前缀，生成你浏览器兼容的属性。

? Autoprefixer CSS online

[ ] 连接: 将CSS文件连接到一个文件中。 (不适用HTTP/2)

[ ] 压缩: 压缩所有CSS文件。

[ ] 非阻塞: CSS文件需要非阻塞，以防在DOM加载时花费大量时间。

? loadCSS by filament group

? 使用loadCSS预加载CSS的示例

[ ] 未使用的CSS: 删除未使用的CSS。

? UnCSS Online

? PurifyCSS

? Chrome DevTools Coverage

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

? stylelint, a CSS linter

? Sass指南

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

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

? CSS验证器

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

? 构建RTL-Aware Web Apps & Websites: Part 1 | Mozilla Hacks

? 构建RTL-Aware Web Apps & Websites: Part 2 | Mozilla Hacks

⬆ 返回顶部

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

[ ] 优化: 所有图像都经过优化并且可在浏览器中正常显示。WebP格式可用于关键页面（如首页）。 All images are optimized to be rendered in the browser. WebP format could be used for critical pages (like Homepage).

? Imagemin

? 使用ImageOptim免费优化您的图像。

[ ] 视网膜屏: 提供x2 或 3x的图像来支持视网膜屏显示。

[ ] 雪碧图: 小图片放到一个雪碧图中。

[ ] 宽高: 所有都需要设置高度和宽度(不要指定px 和 %)。

注意: 许多开发人员认为设置了宽度和高度就不能实现响应式设计，实际上并不是这样的。

[ ] Alternative text: 所有 必须有alt属性来直观的描述图片。

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

⬆ 返回顶部

[ ] JavaScript 内联: 确保没有任何js代码内联(与HTML代码混合)。

[ ] 连接: 将js文件连接起来。

[ ] 压缩: 压缩所有js文件(可以添加 .min 后缀)。

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

[ ] JavaScript安全性:

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

[ ] 非阻塞: JavaScript文件使用async或延迟使用defer属性异步加载。

? Remove Render-Blocking JavaScript

[ ] Modernizr: 如果您需要定位某些特定功能，则可以使用自定义Modernizr在标签中添加class。

? Customize your Modernizr

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

? ESLint - The pluggable linting utility for JavaScript and JSX

⬆ 返回顶部

securityheaders.io
Observatory by Mozilla
ASafaWeb - Automated Security Analyser for ASP.NET Websites

[ ] HTTPS: 每个页面和所有外部内容(插件、图像...)都使用HTTPS。

? Let"s Encrypt - 免费 SSL/TLS 证书

? 免费 SSL 服务测试

? Strict Transport Security

[ ] HTTP严格传输安全性(HSTS): HTTP头设置 "Strict-Transport-Security".

? Check HSTS preload status and eligibility

? HTTP Strict Transport Security Cheat Sheet - OWASP

? Transport Layer Protection Cheat Sheet - OWASP

[ ] 跨站点请求伪造攻击(CSRF): 确保向服务器端发出的请求是合法的，并来自您的网站/应用程序，以防止发生CSRF攻击。

? 跨站点请求伪造（CSRF）防范清单 - OWASP_Prevention_Cheat_Sheet)

[ ] 跨站脚本攻击(XSS): 页面或网站没有XSS攻击的可能性。

? XSS (跨站脚本攻击) 防范清单 - OWASP_Prevention_Cheat_Sheet)
? 基于DOM的XSS防范清单 - OWASP

[ ] Content Type Options 防止Google Chrome和Internet Explorer尝试将响应的内容类型从服务器声明的内容类型中嗅探出来。

? X-Content-Type-Options - Scott Helme

[ ] X-Frame-Options (XFO) 保护网站的访问者免受劫持攻击。

? X-Frame-Options - Scott Helme

? RFC7034 - HTTP Header Field X-Frame-Options

⬆ 返回顶部

[ ] 页面大小: 每张网页的大小在0到500KB之间。

? Website Page Analysis

? Size Limit: Make the Web lighter

[ ] 文件压缩: 压缩你的HTML文件。

? W3C Validator

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

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

? Cookie规范: RFC 6265

? Cookies

? 浏览器Cookie限制

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

[ ] DNS解析: 使用dns-prefetch让第三方DNS服务商主动去执行域名解析的功能。

[ ] 预连接: 使用preconnect在空闲期间提前做好DNS查询, TCP三次握手和TLS 协商。

[ ] 预获取: 使用prefetch在空闲期间提前请求即将需要的资源(例如：图像的懒加载)。

[ ] 预加载: 使用preload提前加载当前页面所需要的资源(例如：js脚本放在的最后)。

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

[ ] Google PageSpeed: 所有的网页都经过测试（不仅仅是首页），而且得分至少为90/100。

? Google PageSpeed

? 用Google测试移动端速度

? WebPagetest - 网站性能和优化测试

⬆ 返回顶部

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

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

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

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

? Contrast ratio

[ ] H1: 所有页面都有H1，它不是网站的标题。

[ ] Headings: 标题应以正确的顺序合理使用(H1至H6)。

? Why headings and landmarks are so important -- A11ycasts #18

[ ] banner角色: