前端开发清单

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

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

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

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

How to use?

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

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

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

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

Head

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

Meta 标签

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

<!-- Doctype HTML5 -->
<!doctype html>

📖 Determining the character encoding - HTML5 W3C

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

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

<!-- 设置文档的字符编码 -->
<meta charset="utf-8">

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

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

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

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

<!-- 响应式网页设计 viewpoint 声明 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

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

<!-- 文档标题 -->
<title>Page Title less than 65 characters</title>

📖 Title - HTML - MDN

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

<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">

[ ] Favicons: 每个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">

🛠 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 图标文件以支持你可能需要的用到的所有尺寸)

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">

📖 配置 Web 应用程序

[ ] Windows Tiles: 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: 使用rel="canonical"以避免重复的内容。

<!-- 帮助防止重复内容出现 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

📖 Use canonical URLs - Search Console Help - Google Support

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

HTML 标签

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

<html lang="zh_cn">

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

<html dir="rtl">

📖 dir - HTML - MDN

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

<link rel="alternate" href="https://es.example.com/" hreflang="es">

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

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

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

🛠 Critical by Addy Osmani on Github

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

Social meta

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

[ ] Facebook Open Graph: 所有 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">

📖 A Guide to Sharing for Webmasters

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

[ ] Twitter Card:

<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">

📖 Getting started with cards — Twitter Developers

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

⬆ 返回顶部

HTML

最佳实践

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

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

HTML 测试

[ ] 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 扩展

⬆ 返回顶部

Webfonts

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

注意: 大部分前端开发人员都会看看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 文件。

<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">

[ ] 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 测试

[ ] 格式检查: 所有的 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

⬆ 返回顶部

Images

注意: 想要完整的了解图像优化，可以在 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 的图像来支持视网膜屏显示。
[ ] 雪碧图: 小图片放到一个雪碧图中。
[ ] 宽高: 所有<img>都需要设置高度和宽度(不要指定 px 和 %)。

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

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

📖 Alt-texts: The Ultimate Guide

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

⬆ 返回顶部

JavaScript

最佳实践

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

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

[ ] JavaScript 安全性:

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

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

📖 Remove Render-Blocking JavaScript

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

🛠 Customize your Modernizr

JavaScript 测试

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

📖 ESLint - The pluggable linting utility for JavaScript and JSX

⬆ 返回顶部

前端开发清单

前端开发清单

目录

How to use?

Head

Meta 标签

HTML 标签

Social meta

HTML

最佳实践

HTML 测试

Webfonts

CSS

性能

CSS 测试

Images

最佳实践

JavaScript

最佳实践

JavaScript 测试