前端開發清單

時間  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教程