前端开发清单

时间  2019-11-06
标签 前端 开发 清单 繁體版
原文   原文链接

前端清单

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

前端清单是一份在站点/HTML页面发布到生产环境以前须要测试的全部元素的详尽列表。javascript

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

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

目录

  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级区分:html

  • Low 意味着该项目被推荐，但在某些特定状况下能够省略。
  • Medium 意味着该项目是强烈推荐的，可是可能在某些特殊状况下能被省略。某些元素，若是省略将会对性能或SEO方面产生不良影响。
  • High 意味着项目不能被任何理由省略。你的页面可能会致使功能障碍或有可访问性或SEO问题。测试优先级须要首先考虑这些元素。

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

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

Head

注意: 你能在HTML文档的<head>中找到全部的清单列表。html5

Meta 标签

  • [ ] Doctype: High Doctype是HTML5的属性，须要声明在HTML文件的顶部。
<!-- Doctype HTML5 -->
<!doctype html>

? Determining the character encoding - HTML5 W3Cjava

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

  • [ ] Charset: High 正确声明Charset标签(UTF-8)。
<!-- 设置文档的字符编码 -->
<meta charset="utf-8">
  • [ ] X-UA-Compatible: MediumX-UA-Compatible 元标签。
<!-- 指示Internet Explorer使用其最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

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

  • [ ] Viewport: High 正确声明viewport标签。
<!-- 响应式网页设计viewpoint声明 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  • [ ] Title: High 全部页面都使用title(SEO:包括网站标题不超过65个字符)。
<!-- 文档标题 -->
<title>Page Title less than 65 characters</title>

? Title - HTML - MDNweb

  • [ ] 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>

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

  • [ ] 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: Mediumdirection属性规定元素内容的文本方向。(能够在另外一个HTML标签上使用)。
<html dir="rtl">

? dir - HTML - MDN

  • [ ] Alternate language: Low 指定网站的语言标签并与当前页面的语言相关联。
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • [ ] 条件注释: Low 若有须要，可针对IE添加条件注释。

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

  • [ ] RSS feed: Low 若是你的项目是一个博客或者有大量的文章，能够添加一个RSS连接。
  • [ ] CSS Critical: MediumCSS critical收集并呈现当前页面可见部分的全部CSS。在主要的CSS调用以前以单行(最小化)在<style></style>中嵌入。

? Critical by Addy Osmani on Github

  • [ ] CSS 顺序: High 全部CSS文件都须要在JavaScript文件加载以前加载完成(除了有时JS文件异步加载到页面以外的状况)。

Social meta

强烈推荐Facebook OG and Twitter Cards。若是你针对某些特定的存在并但愿确保显示，也能够考虑其余社交媒体标签。

  • [ ] Facebook Open Graph: Low 全部Facebook Open Graph（OG）都通过测试而且没有任何错误。图片至少须要600 x 315像素，建议使用1200 x 630像素。
<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">
  • [ ] 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: 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

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

HTML 测试

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

? W3C validator

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

? Dirty markup

  • [ ] Desktop Browsers: High 全部页面都在桌面浏览器上经过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。
  • [ ] Mobile Browsers: High 全部页面都在移动端浏览器上经过测试(Native browser, Chrome, Safari...).
  • [ ] 连接检查器: High 页面中连接没有断开，请确认你没有404错误。

? W3C Link Checker

  • [ ] 广告拦截器测试: Medium 你的的网站会在启用广告拦截器的状况下正确显示页面内容(你能够提供一条消息，引导人们停用其广告拦截器)。
  • [ ] Pixel perfect: High 页面的像素级实现。根据设计稿的质量，你的页面可能作不到100%的还原，但你的网页须要尽量的靠近设计稿。

Pixel Perfect - Chrome 扩展

⬆ 返回顶部

Webfonts

  • [ ] Webfont格式: High 现代浏览器都支持WOFF、WOFF二、TTF格式
  • [ ] Webfont 大小: High Webfont大小不超过 2 MB (包括全部版本在内)。

⬆ 返回顶部

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 对部分属性加上浏览器内核前缀，生成你浏览器兼容的属性。

? Autoprefixer CSS online

性能

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

CSS 测试

  • [ ] 格式检查: High 全部的CSS或SCSS文件没有任何格式错误。
  • [ ] 响应式网页设计: High 全部页面都须要通过如下几种状况的测试: 320px, 768px, 1024px (根据本身的项目状况，能够设置更多)。
  • [ ] CSS验证器: Medium CSS通过测试，同时全部错误都被修复。

? CSS验证器

  • [ ] 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).
  • [ ] 视网膜屏: Low 提供x2 或 3x的图像来支持视网膜屏显示。
  • [ ] 雪碧图: Medium 小图片放到一个雪碧图中。
  • [ ] 宽高: High 全部<img>都须要设置高度和宽度(不要指定px 和 %)。

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

  • [ ] Alternative text: High 全部 <img> 必须有alt属性来直观的描述图片。
  • [ ] 懒加载: Medium 图片懒加载 (A noscript fallback is always provided).

⬆ 返回顶部

JavaScript

最佳实践

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

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

  • [ ] JavaScript安全性:

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

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

? Remove Render-Blocking JavaScript

  • [ ] Modernizr: Low 若是您须要定位某些特定功能，则可使用自定义Modernizr在<html>标签中添加class。

? Customize your Modernizr

JavaScript 测试

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

⬆ 返回顶部

Security

扫描并检查你的网站

最佳实践

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

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

  • [ ] 跨站脚本攻击(XSS): High 页面或网站没有XSS攻击的可能性。
  • [ ] Content Type Options Medium 防止Google Chrome和Internet Explorer尝试将响应的内容类型从服务器声明的内容类型中嗅探出来。
  • [ ] X-Frame-Options (XFO) Medium 保护网站的访问者免受劫持攻击。

⬆ 返回顶部

Performance

最佳实践

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

? W3C Validator

  • [ ] 懒加载: Medium 图片、js脚本和CSS须要懒加载，以提升当前页面的响应时间（请参见各自部分的详细信息）。
  • [ ] Cookie大小: 若是使用Cookie，确保每一个Cookie不超过4096个字节，而且域名下不超过20个Cookie。

为将到来的请求作准备

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

  • [ ] 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)。

? Contrast ratio

标题

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

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

Landmarks

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

? Using ARIA landmarks to identify regions of a page

语义化

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

? Mobile Input Types

表单

  • [ ] Label: Highlabel与每一个输入表单元素相关联，若是label没法显示，请使用aria-label代替。

? 使用aria-label属性 - MDN

Accessibility 测试

  • [ ] Accessibility标准测试: High 使用WAVE工具测试你的页面是否符合accessibility标准。

? Wave testing

  • [ ] Keyboard navigation: High 在你的键盘上以可能出现的操做顺序去测试，确保全部交互式元素均可访问和可用。
  • [ ] Screen-reader: Medium 全部页面都在屏幕阅读器(VoiceOver, ChromeVox, NVDA or Lynx)中进行了测试。
  • [ ] Focus style: High 若是焦点被禁用，它将被CSS中的可见状态所替代。

? Managing Focus - A11ycasts #22

⬆ 返回顶部

SEO

  • [ ] Google Analytics: High Google Analytics 正确安装和配置。
  • [ ] Headings logic: Medium 标题文字有助于了解当前页面的主要内容。
  • [ ] sitemap.xml: Highsitemap.xml存在并提交到Google Search Console(之前的Google管理员工具)。
  • [ ] robots.txt: Highrobots.txt正确配置，不阻止网页被爬取。
  • [ ] 结构化数据: High 使用结构化数据的页面经过测试而且没有错误。结构化数据帮助爬虫理解当前页面的内容。
  • [ ] Sitemap 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

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

贡献

查看全部贡献人员 contributors.

Support

若是您有任何问题或建议，能够经过Gitter或Twitter联系咱们：

做者

David Dias

License

CC0

⬆ 回到顶部

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程