View on GitHub

Front-End-Checklist

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

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

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


注意: 你能在HEAD列表中找到HTML文档<head>标签内所有可配置的属性。

Meta 标签

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

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


* [ ] **X-UA-Compatible(IE相关设定):** ![Medium][medium_img] 正确声明`X-UA-Compatible` meta。

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

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

<!-- 响应式网页设计viewpoint声明 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 文档标题 -->
<title>网站标题不超过55个字符</title>
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
<!-- 标准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 -->
<link rel="apple-touch-icon" href="/custom-icon.png">

📖 配置Web应用程序

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

📖 浏览器配置模式参考

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

HTML 标签

<html lang="zh_cn">
<html dir="rtl">
<link rel="alternate" href="https://es.example.com/" hreflang="es">

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

Social meta

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

注意: 使用 og:image:widthog: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">
<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

最佳实践

📖 HTML 参考

📖 关于 rel=noopener

HTML 测试

Pixel Perfect - Chrome 扩展

⬆ 返回顶部


Webfonts

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

⬆ 返回顶部

CSS

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

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

性能

CSS 测试

Pixel Perfect - Chrome Extension

  • 📖 [构建RTL-Aware Web Apps & Websites: Part 1 Mozilla Hacks](https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/)
  • 📖 [构建RTL-Aware Web Apps & Websites: Part 2 Mozilla Hacks](https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2/)

⬆ 返回顶部


Images

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

最佳实践

⬆ 返回顶部


JavaScript

最佳实践

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

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

JavaScript 测试

⬆ 返回顶部


Security

扫描并检查你的网站

最佳实践

📖 跨站点请求伪造(CSRF)防范清单 - OWASP

⬆ 返回顶部


Performance

最佳实践

为将到来的请求做准备

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

  • DNS解析: Low 使用dns-prefetch让第三方DNS服务商主动去执行域名解析的功能。
<link rel="dns-prefetch" href="https://example.com">
<link rel="preconnect" href="https://example.com">
<link rel="prefetch" href="image.png">
<link rel="preload" href="app.js">

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

性能测试

⬆ 返回顶部


Accessibility

注意: 查看注意事项视频列表A11ycasts with Rob Dodson 📹

最佳实践

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

标题

Landmarks

语义化

表单

📖 使用aria-label属性 - MDN

Accessibility 测试

⬆ 返回顶部


SEO

  • 📖 [Sitemap 指南 Google 支持](https://support.google.com/webmasters/answer/183668?hl=en)
  • 🛠 Sitemap 生成器

⬆ 返回顶部


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

⬆ 回到顶部