V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Johnsen
V2EX  ›  程序员

前端开发清单

  •  7
     
  •   Johnsen · 2017-10-26 12:13:18 +08:00 · 6519 次点击
    这是一个创建于 2569 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端开发清单

    Join the chat at https://gitter.im/Front-End-Checklist/Lobby ![Front ‑ End_Checklist followed]( https://img.shields.io/badge/Front ‑ End_Checklist-followed-brightgreen.svg) 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

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

    Meta 标签

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

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

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

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

    • [ ] 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>
    
    • [ ] 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">
    
    • [ ] 条件注释: Low 如有需要,可针对 IE 添加条件注释。

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

    • [ ] RSS feed: Low 如果你的项目是一个博客或者有大量的文章,可以添加一个 RSS 链接。
    • [ ] CSS Critical: Medium CSS critical收集并呈现当前页面可见部分的所有 CSS。在主要的 CSS 调用之前以单行(最小化)在<style></style>中嵌入。
    • [ ] 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 代码中的可能存在的问题。
    • [ ] HTML Lint: High 使用工具来帮助我们分析 HTML 代码中可能存在的问题。
    • [ ] Desktop Browsers: High 所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。

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

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

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

    Pixel Perfect - Chrome 扩展

    ⬆ 返回顶部


    Webfonts

    • [ ] Webfont 格式: High 现代浏览器都支持 WOFF、WOFF2、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 对部分属性加上浏览器内核前缀,生成你浏览器兼容的属性。

    性能

    • [ ] 连接: 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 属性异步加载。
    • [ ] Modernizr: Low 如果您需要定位某些特定功能,则可以使用自定义 Modernizr 在<html>标签中添加 class。

    JavaScript 测试

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

    ⬆ 返回顶部


    第 1 条附言  ·  2017-10-26 13:09:50 +08:00
    > - 原文地址:[Front-End-Checklist]( https://github.com/thedaviddias/Front-End-Checklist)
    > - 原文作者:[David Dias]( https://github.com/thedaviddias)
    > - 译者:[JohnsenZhou]( https://github.com/JohnsenZhou)
    > - 本文永久链接:[https://github.com/JohnsenZhou/Front-End-Checklist]( https://github.com/JohnsenZhou/Front-End-Checklist)
    34 条回复    2017-10-30 10:58:17 +08:00
    Kimyx
        1
    Kimyx  
       2017-10-26 12:26:07 +08:00
    呦呵
    Kimyx
        2
    Kimyx  
       2017-10-26 12:26:20 +08:00   ❤️ 1
    大拇指
    saberlove
        3
    saberlove  
       2017-10-26 12:52:16 +08:00
    可惜 github 上不了
    1759761439
        4
    1759761439  
       2017-10-26 12:52:44 +08:00 via Android   ❤️ 1
    666
    liyj144
        5
    liyj144  
       2017-10-26 12:55:50 +08:00   ❤️ 1
    666+1
    luo123qiu
        6
    luo123qiu  
       2017-10-26 13:11:33 +08:00   ❤️ 1
    耐死
    oswuhan
        7
    oswuhan  
       2017-10-26 13:14:01 +08:00   ❤️ 1
    摸头起码要个三五年吧
    oswuhan
        8
    oswuhan  
       2017-10-26 13:14:26 +08:00
    手误,摸透
    Everyman
        9
    Everyman  
       2017-10-26 13:18:10 +08:00   ❤️ 1
    thanks
    luoyuhui
        10
    luoyuhui  
       2017-10-26 13:22:00 +08:00   ❤️ 1
    已收藏
    liyer
        11
    liyer  
       2017-10-26 13:33:58 +08:00   ❤️ 1
    Doctype 是 HTML5 的属性?
    Fx8m
        12
    Fx8m  
       2017-10-26 13:39:59 +08:00   ❤️ 1
    已收藏!
    Johnsen
        13
    Johnsen  
    OP
       2017-10-26 13:41:18 +08:00
    @liyer 翻译错误,感谢指出
    acthtml
        14
    acthtml  
       2017-10-26 13:41:45 +08:00   ❤️ 1
    不错哦。
    scys
        15
    scys  
       2017-10-26 13:48:58 +08:00   ❤️ 1
    好文章,这个做好这个基本入门。
    yuxuan
        16
    yuxuan  
       2017-10-26 14:20:43 +08:00
    👍 话说 我还真的以为那个返回顶部是能用的😂
    Johnsen
        17
    Johnsen  
    OP
       2017-10-26 14:22:58 +08:00
    @yuxuan 尴尬了🤣
    wintersun
        18
    wintersun  
       2017-10-26 14:30:58 +08:00   ❤️ 1
    后台开发人员学习之,谢谢!
    yangxiongguo
        19
    yangxiongguo  
       2017-10-26 16:07:19 +08:00   ❤️ 1
    好文,即适合进阶,又能查缺补漏
    SEARCHINGFREE
        20
    SEARCHINGFREE  
       2017-10-26 16:51:27 +08:00   ❤️ 1
    才知道 github 又能上了
    hzw94
        21
    hzw94  
       2017-10-26 16:53:54 +08:00   ❤️ 1
    在学习前端,得收藏,thank

    github 我这边能上
    yao978318542
        22
    yao978318542  
       2017-10-26 17:01:37 +08:00
    @SEARCHINGFREE #20 怎么可能 不存在的
    WriteJob
        23
    WriteJob  
       2017-10-26 18:03:53 +08:00   ❤️ 1
    点赞
    caryqy
        24
    caryqy  
       2017-10-26 21:06:09 +08:00   ❤️ 1
    点赞
    bhaltair
        25
    bhaltair  
       2017-10-26 22:18:24 +08:00 via iPhone   ❤️ 1
    from v2-cli 😝
    lingo
        26
    lingo  
       2017-10-26 23:30:16 +08:00   ❤️ 1
    别的不说,排版真好看。
    feibilanceon
        27
    feibilanceon  
       2017-10-26 23:31:53 +08:00   ❤️ 1
    辛苦了
    Mexion
        28
    Mexion  
       2017-10-26 23:47:49 +08:00 via iPhone   ❤️ 1
    收藏下
    Meli55a
        29
    Meli55a  
       2017-10-27 09:13:29 +08:00   ❤️ 1
    马克!
    datxiaoy
        31
    datxiaoy  
       2017-10-27 09:27:08 +08:00   ❤️ 1
    好,点个赞!
    klren0312
        32
    klren0312  
       2017-10-27 12:53:28 +08:00   ❤️ 1
    赞一个!
    mrcode
        33
    mrcode  
       2017-10-27 15:53:02 +08:00
    感谢翻译
    Johnsen
        34
    Johnsen  
    OP
       2017-10-30 10:58:17 +08:00
    🇨🇳
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3102 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 58ms · UTC 12:48 · PVG 20:48 · LAX 04:48 · JFK 07:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.