# Front-End-Checklist **Repository Path**: master-ano/Front-End-Checklist ## Basic Information - **Project Name**: Front-End-Checklist - **Description**: No description available - **Primary Language**: Unknown - **License**: CC0-1.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-04-06 - **Last Updated**: 2024-04-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README [![Front-End Checklist Logo](https://github.com/thedaviddias/Front-End-Checklist/blob/master/src/img/banners/front-end-checklist-banner-light.jpg?raw=true)](http://frontendchecklist.com)

前端开发清单

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

[![Join the chat at https://gitter.im/Front-End-Checklist/Lobby](https://badges.gitter.im/Front-End-Checklist/Lobby.svg)](https://gitter.im/Front-End-Checklist/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/) [![Backers on Open Collective](https://opencollective.com/front-end-checklist/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/front-end-checklist/sponsors/badge.svg)](#sponsors) [![Contributors](https://img.shields.io/github/contributors/thedaviddias/Front-End-Checklist.svg)](https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors) [![StackShare](https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat)](https://stackshare.io/thedaviddias/front-end-checklist) [![CC0](https://img.shields.io/badge/license-CC0-green.svg)](https://creativecommons.org/publicdomain/zero/1.0/) 它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。 Sponsor ## 目录 1. **[Head](#head)** 2. **[HTML](#html)** 3. **[Webfonts](#webfonts)** 4. **[CSS](#css)** 5. **[Images](#images)** 6. **[JavaScript](#javascript)** 7. **[Security](#security)** 8. **[Performance](#performance)** 9. **[Accessibility](#accessibility)** 10. **[SEO](#seo)** ## 一些声明 **前端开发清单**中的所列出的点是大部分前端项目所必需的关注的, 但某些元素可以省略或者并不是这么重要 (在管理Web应用程序的情况下，你可能并不需要RSS订阅源)。我们选择使用一下3级区分: * ![Low][low_img] **推荐**，但在某些特定情况下可以省略。 * ![Medium][medium_img] **强烈推荐**，但是可能在某些特殊情况下能被省略。某些元素，如果省略将会对性能或SEO方面产生不良影响。 * ![High][high_img] **不能被任何理由忽略**。忽略可能会导致你的页面部分功能障碍或者产生可访问性以及SEO等问题。测试优先级需要首先考虑这些元素。 某些资源拥有特定的标识符，帮助你去理解清单上不同类型的内容或帮助。 * 📖: 文档或文章 * 🛠: 在线工具/测试工具 * 📹: 媒体或视频内容 --- ## Head > **注意:** 你能在[HEAD列表](https://github.com/joshbuchea/HEAD)中找到HTML文档``标签内所有可配置的属性。 ### Meta 标签 * [ ] **Doctype（文档类型）:** ![High][high_img] 以下Doctype标签声明文档为HTML5类型，需要写在HTML文件的顶部。 ```html ``` > * 📖 [设置文档字符编码格式 - HTML5 W3C](https://www.w3.org/TR/html5/syntax.html#determining-the-character-encoding) * 下列两个 meta 标签需要首先声明在head中：Charset 和 Viewport。* * [ ] **Charset（字符）:** ![High][high_img] 正确声明`Charset` meta (UTF-8)。 ```html ``` * [ ] **Viewport（视口）:** ![High][high_img] 正确声明`viewport` meta。 ```html ``` * [ ] **Title（标题）:** ![High][high_img] 所有页面都必须使用`title`标签(SEO:Google会计算标题中使用的字符的像素宽度，范围在472和482像素之间，所以平均字符数限制大约在55个字符左右)。 ```html 网站标题不超过55个字符 ``` > * 📖 [Title 标签 - HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) > * 🛠 [SERP 代码段生成器](https://www.sistrix.com/serp-snippet-generator/) * [ ] **Description（描述）:** ![High][high_img] 提供`description`标签， 它是唯一的，且内容不能超过150个字符。 ```html ``` > * 📖[Meta Description 属性 - HTML - MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_an_author_and_description) * [ ] **Favicons（图标）:** ![Medium][medium_img] 每个`favicon`都被创建并正确显示，如果你只有一个`favicon.ico`，把它放在你网站的根目录下。 通常来说你不需要做任何操作他就能正常显示。 然而, 使用一下示例中的方法是比较好的做法。不过现在我们推荐使用**PNG**格式，相比`.ico`格式有较好的优势(推荐尺寸: 32x32px)。 ```html ``` > * 🛠 [Favicon 生成器](https://www.favicon-generator.org/) > * 🛠 [RealFaviconGenerator](https://realfavicongenerator.net/) > * 📖 [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet) > * 📖 [Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS 技巧](https://css-tricks.com/favicon-quiz/) > * 📖 [PNG favicons - caniuse](https://caniuse.com/#feat=link-icon-png) * [ ] **Apple Web App Meta:** ![Low][low_img] 苹果设备目前使用的 Meta 标签 ```html ``` > * 📖 [在苹果设备中配置Web应用程序](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) > * 📖 [苹果设备支持的Meta标记列表](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) - [ ] **Windows Tiles:**![Low][low_img] Windows 操作系统磁贴 ```html ``` browserconfig.xml文件的最小所需xml标记如下所示: ```xml ``` > 📖 [浏览器配置模式参考](https://msdn.microsoft.com/en-us/library/dn320426(v=vs.85).aspx) * [ ] **Canonical:** ![Medium][medium_img] 使用`rel="canonical"`以避免重复的内容。 ```html ``` > - 📖 [使用规范的URLs - Search Console Help - Google Support](https://support.google.com/webmasters/answer/139066?hl=en) > - 📖 [rel = canonical的5个常见错误 - Google Webmaster Blog](https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html) ### HTML 标签 * [ ] **Language tag（语言标签）:** ![High][high_img] 指定你网站的语言标签并与当前页面语言相关联。 ```html ``` * [ ] **Direction tag（方向标签）:** ![Medium][medium_img] `direction`属性规定元素内容的文本方向。(可以在另一个HTML标签上使用) ```html ``` > * 📖 [dir 属性 - HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) * [ ] **Alternate language（备用语言）:** ![Low][low_img] 指定网站的语言标签并与当前页面的语言相关联。 ```html ``` * [ ] **x-default:** ![Low][low_img] 表明此类网页未定位到特定的语言或区域设置。 ```html ``` > * 📖 [x-default - Google](https://webmasters.googleblog.com/2013/04/x-default-hreflang-for-international-pages.html) * [ ] **Conditional comments（条件注释）:** ![Low][low_img] 如有需要，可针对IE添加条件注释。 > 📖 [关于条件注释(Internet Explorer) - MSDN - Microsoft](https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx) * [ ] **RSS feed（RSS 订阅）:** ![Low][low_img] 如果你的项目是一个博客或者有大量的文章，可以添加一个RSS链接。 * [ ] **CSS Critical（最小 CSS 合集）:** ![Medium][medium_img] `CSS critical`收集并呈现当前页面可见部分的核心CSS。在主要的CSS调用渲染之前以单行(最小化)在``中嵌入。 > * 🛠 [由Addy Osmani于GitHub撰写的Critical](https://github.com/addyosmani/critical) * [ ] **CSS order（加载顺序）:** ![High][high_img] 所有CSS文件都需要在JavaScript文件加载之前加载完成(除了有时JS文件异步加载到页面之外的情况)。 ### Social meta 标签 强烈推荐***Facebook OG*** and ***Twitter Cards***。如果你针对某些特定的存在并希望确保显示，也可以考虑其他社交媒体的meta。 * [ ] **Facebook Open Graph:** ![Low][low_img] 所有Facebook Open Graph（OG）都经过测试并且没有任何错误。图片至少需要600 x 315像素，建议使用1200 x 630像素。 > **注意:** 使用 `og:image:width` 和 `og:image:height` 将会爬取制定尺寸的图像，以便图像能够快速呈现，无需进行异步下载和处理。 ```html ``` > * 📖 [A Guide to Sharing for Webmasters](https://developers.facebook.com/docs/sharing/webmasters/) > * 🛠 使用[Facebook OG testing](https://developers.facebook.com/tools/debug/)测试你的页面。 > * 📖 [Best Practices - Sharing](https://developers.facebook.com/docs/sharing/best-practices/) * [ ] **Twitter 卡片:** ![Low][low_img] ```html ``` > * 📖 [推特卡片使用入门 — Twitter Developers](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started) > * 🛠 使用[Twitter card validator](https://cards-dev.twitter.com/validator)测试你的页面。 **[⬆ 返回顶部](#目录)** --- ## HTML ### 最佳实践 * [ ] **HTML5 Semantic Elements（HTML5语义化元素）:** ![High][high_img] 正确地使用HTML5语义化标签(header, section, footer, main...). > 📖 [HTML 参考](http://htmlreference.io/) * [ ] **Error pages（错误页面）:** ![High][high_img] 404页面和5xx错误页面的存在。记得在5xx错误页面中集成CSS样式文件(在当前服务器上无外部调用)。 * [ ] **Noopener:** ![Medium][medium_img] 如果你使用外部链接`target="_blank"`, 你的链接必须有个`rel="noopener"`属性，防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器，请使用`rel="noopener noreferrer"`。 > 📖 [关于 rel=noopener](https://mathiasbynens.github.io/rel-noopener/) * [ ] **Clean up comments（清除注释）:** ![Low][low_img] 在将页面发布到生产环境之前，应该删除不必要的代码。 ### HTML 测试 * [ ] **W3C compliant（兼容）:** ![High][high_img] 所有页面需要使用W3C验证器进行测试，以检测HTML代码中的可能存在的问题。 > * 🛠 [W3C validator](https://validator.w3.org/) * [ ] **HTML Lint:** ![High][high_img] 使用工具来帮助我们分析HTML代码中可能存在的问题。 > * 🛠 [肮脏的标记列表](https://www.10bestdesign.com/dirtymarkup/) > * 🛠 [webhint](https://webhint.io/) * [ ] **Desktop Browsers:** ![High][high_img] 所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。 * [ ] **Mobile Browsers:** ![High][high_img] 所有页面都在移动端浏览器上通过测试(Native browser, Chrome, Safari...). * [ ] **Link checker（链接检查器）:** ![High][high_img] 页面中链接没有失效，请确认你没有404错误。 > * 🛠 [W3C Link Checker](https://validator.w3.org/checklink) * [ ] **Adblockers test（广告拦截器测试）:** ![Medium][medium_img] 你的的网站会在启用广告拦截器的情况下正确显示页面内容(你可以提供一条消息，引导人们停用其广告拦截器)。 > [Pixel Perfect - Chrome 扩展](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en) **[⬆ 返回顶部](#目录)** --- ## Webfonts > **注意:** 使用webfonts可能会导致文档样式闪烁以及文本不可见，所以在使用时需要考虑使用后备字体，或者使用webfont加载器来控制字体加载行为。 > > * 📖 [Google Technical considerations about webfonts](https://developers.google.com/fonts/docs/technical_considerations) * [ ] **Webfont format（字体格式）:** ![High][high_img] 现代浏览器都支持WOFF、WOFF2、TTF格式 > * 📖 [WOFF - Web开放字体格式 - Caniuse](https://caniuse.com/#feat=woff). > * 📖 [WOFF 2.0 - Web开放字体格式 - Caniuse](https://caniuse.com/#feat=woff2). > * 📖 [TTF/OTF - TrueType和OpenType字体支持](https://caniuse.com/#feat=ttf) > * 📖 [Using @font-face - CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/) * [ ] **Webfont size（字体大小）:** ![High][high_img] Webfont大小不超过 2 MB (包括所有版本在内)。 * [ ] **Webfont loader（字体加载器）:** ![Low][low_img] 使用Webfont加载器控制加载行为。 > * 🛠 [Typekit Web字体加载器](https://github.com/typekit/webfontloader) **[⬆ 返回顶部](#目录)** ## CSS > **注意:** 大部分前端开发人员都会看看[CSS指南](https://cssguidelin.es/)和[Sass指南](https://sass-guidelin.es/)。如果你对CSS属性有疑问，可以访问[CSS参考文档](http://cssreference.io/)。 * [ ] **响应式网站设计:** ![High][high_img] 网站使用响应式设计。 * [ ] **CSS打印属性:** ![Medium][medium_img] 提供打印样式表，并确保使用正确。 * [ ] **预处理器:** ![Medium][medium_img] 你的网站使用css预处理器(推荐[Sass](http://sass-lang.com/)). * [ ] **唯一ID:** ![High][high_img] 如果使用了ID，确保ID的唯一性。 * [ ] **Reset CSS:** ![High][high_img] 使用CSS reset(如reset.css, normalize.css, reboot) *(如果你使用的是CSS框架，例如Bootstrap或Foundation，则reset.css已被包含在其中)* > * 📖 [Reset.css](https://meyerweb.com/eric/tools/css/reset/) > * 📖 [Normalize.css](https://necolas.github.io/normalize.css/) > * 📖 [Reboot](https://getbootstrap.com/docs/4.0/content/reboot/) * [ ] **JS 前缀:** ![Low][low_img] 所有以**js-**开头的class(或者JavaScript文件中使用的id)不写入css文件。 ```html
``` * [ ] **CSS embed or line:** ![High][high_img] 避免使用CSS嵌入或内联，仅用于必要的情况(例如: background-image for slider, CSS critical). * [ ] **浏览器内核前缀:** ![High][high_img] 对部分属性加上浏览器内核前缀，生成你浏览器兼容的属性。 > * 🛠 [Autoprefixer CSS online](https://autoprefixer.github.io/) ### 性能 - [ ] **Concatenation（合并）:** ![High][high_img] 将CSS文件合并到一个文件中。 *(不适用HTTP/2)* - [ ] **Minification（压缩）:** ![High][high_img] 压缩所有CSS文件。 - [ ] **Non-blocking（非阻塞）:** ![Medium][medium_img] CSS文件需要非阻塞加载，以防在DOM加载时花费大量时间。 > * 📖 [loadCSS by filament group](https://github.com/filamentgroup/loadCSS) > * 📖 [使用loadCSS预加载CSS的示例](https://gist.github.com/thedaviddias/c24763b82b9991e53928e66a0bafc9bf) - [ ] **未使用的CSS:** ![Low][low_img] 删除未使用的CSS。 > * 🛠 [UnCSS Online](https://uncss-online.com/) > * 🛠 [PurifyCSS](https://github.com/purifycss/purifycss) > * 🛠 [PurgeCSS](https://github.com/FullHuman/purgecss) > * 🛠 [Chrome DevTools Coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) ### CSS 测试 * [ ] **格式检查:** ![High][high_img] 所有的CSS或SCSS文件没有任何格式错误。 > * 🛠 [stylelint, a CSS linter](https://stylelint.io/) > * 📖 [Sass指南](https://sass-guidelin.es/) * [ ] **响应式网页设计:** ![High][high_img] 所有页面都需要经过以下几种情况的测试: 320px, 768px, 1024px (根据自己的项目情况，可以设置更多)。 * [ ] **CSS验证器:** ![Medium][medium_img] CSS都需经过测试，同时所有错误都被修复。 > 🛠 [CSS验证器](https://jigsaw.w3.org/css-validator/) * [ ] **桌面浏览器:** ![High][high_img] 所有页面都在桌面浏览器进行了测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。 * [ ] **移动端浏览器:** ![High][high_img] 所有页面都在移动端浏览器进行了测试(Native browser, Chrome, Safari...)。 * [ ] **操作系统:** ![High][high_img] 所有页面都在当前操作系统上进行了测试(Windows, Android, iOS, Mac...)。 * [ ] **Design fidelity 设计图保真度）:** ![High][high_img] 页面需要像素级实现。根据设计稿的质量，你可能不会100％与设计稿相同，但你的网页需要尽可能的靠近设计稿的要求。 > [Pixel Perfect - Chrome Extension](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en) * [ ] **Reading direction（浏览文本方向）:** ![High][high_img] 如果需要的话，所有页面都需要对LTR和RTL语言进行测试。 > * 📖 [构建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查看免费电子书**[图像优化基础](https://images.guide/)**。 ### 最佳实践 * [ ] **优化:** ![High][high_img] 所有图像都经过优化并且可在浏览器中正常显示。WebP格式可用于关键页面（如首页）。 > * 🛠 [Imagemin](https://github.com/imagemin/imagemin) > * 🛠 使用[ImageOptim](https://imageoptim.com/)免费优化您的图像。 > * 🛠 使用[KeyCDN Image Processing](https://www.keycdn.com/support/image-processing) for image optimization in real time. > * 🛠 使用[Kraken.io](https://kraken.io/web-interface) png和jpg优化的绝佳替代品。 免费计划每个文件最大1mb。 > * 🛠 [TinyPNG](https://tinypng.com/) 无损优化png，apng（动画png）和jpg图像。 提供免费和付费版本。 > * 🛠 [ZorroSVG](http://quasimondo.com/ZorroSVG/) 使用svg遮罩的类似jpg的压缩形式的透明图像。 > * 🛠 [SVGO](https://github.com/svg/svgo) 基于Nodejs的工具，用于优化SVG矢量图形文件。 > * 🛠 [SVGOMG](https://jakearchibald.github.io/svgomg/) 基于SVGO的基于Web的GUI版本，可在线优化您的svg。 * [ ] **Picture/Srcset:** ![Medium][medium_img] 使用Picture/Srcset为用户当前的视口提供最合适的图像。 > * 📖 [如何使用srcset构建响应式图像](https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/)。 * [ ] **视网膜屏:** ![Low][low_img] 提供x2 或 3x的图像来支持视网膜屏显示。 * [ ] **雪碧图:** ![Medium][medium_img] 小图片放到一个雪碧图中。 * [ ] **宽高:** ![High][high_img] 请在上设置宽度和高度属性，如果最终的渲染图像大小已知（可以忽略CSS大小）。 * [ ] **图片描述文本:** ![High][high_img] 所有 `` 必须有`alt`属性来直观的描述图片（在无障碍网页中尤其重要）。 > 📖 [Alt-文本: 终极指南](https://axesslab.com/alt-texts/) * [ ] **懒加载:** ![Medium][medium_img] 图片使用懒加载 (记得适中提供 noscript 标签). **[⬆ 返回顶部](#目录)** --- ## JavaScript ### 最佳实践 * [ ] **JavaScript 内联:** ![High][high_img] 确保没有任何js代码内联(与HTML代码混合)。 * [ ] **合并:** ![High][high_img] 合并js文件。 * [ ] **压缩:** ![High][high_img] 压缩所有js文件(可以添加 `.min` 后缀)。 > [压缩资源 (HTML, CSS, and JavaScript)](https://developers.google.com/speed/docs/insights/MinifyResources) * [ ] **JavaScript安全性:** ![High][high_img] > [用JavaScript开发安全应用程序指南](https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#Guidelines_for_Developing_Secure_Applications_Utilizing_JavaScript) * [ ] **`noscript` 标签:** ![Medium][medium_img] 在 HTML 的 body 标签里使用 `