摘要：它基于前端開發人員多年的經驗沉淀，以及其他優秀的開源清單。在上投票或推薦來幫助前端清單的推廣?？缯军c請求偽造防范清單跨站腳本攻擊頁面或網站沒有攻擊的可能性。

原文地址：Front-End-Checklist

原文作者：David Dias

譯者：JohnsenZhou

文章地址：https://github.com/JohnsenZhou/Front-End-Checklist

前端清單是一份在站點/HTML頁面發布到生產環境之前需要測試的所有元素的詳盡列表。

它基于前端開發人員多年的經驗沉淀，以及其他優秀的開源清單。

在Product Hunt上投票或推薦來幫助前端清單的推廣?。

Head

HTML

Webfonts

CSS

Images

JavaScript

Security

Performance

Accessibility

SEO

前端清單中的所有項目都是大部分項目所必需的, 但某些元素可以省略或者并不是這么重要 (在管理Web應用程序的情況下，你可能并不需要RSS訂閱源)。我們選擇使用一下3級區分:

意味著該項目被推薦，但在某些特定情況下可以省略。

意味著該項目是強烈推薦的，但是可能在某些特殊情況下能被省略。某些元素，如果省略將會對性能或SEO方面產生不良影響。

意味著項目不能被任何理由省略。你的頁面可能會導致功能障礙或有可訪問性或SEO問題。測試優先級需要首先考慮這些元素。

某些資源擁有特定的標識符，幫助你去理解清單上不同類型的內容或幫助。

?: 文檔或文章

?: 在線工具/測試工具

?: 媒體或視頻內容

注意: 你能在HTML文檔的中找到所有的清單列表。

[ ] Doctype: Doctype是HTML5的屬性，需要聲明在HTML文件的頂部。

? Determining the character encoding - HTML5 W3C

接下來三個 meta 標簽 (Charset, X-UA Compatible, Viewport) 需要首先在head中聲明

[ ] Charset: 正確聲明Charset標簽(UTF-8)。

[ ] X-UA-Compatible: X-UA-Compatible 元標簽。

? 指定舊文檔模式(Internet Explorer).aspx)

[ ] Viewport: 正確聲明viewport標簽。

[ ] Title: 所有頁面都使用title(SEO:包括網站標題不超過65個字符)。

? Title - HTML - MDN

[ ] Description: 提供description標簽， 它是唯一的同時內容不能超過150個字符。

[ ] Favicons: 每個favicon都被創建并正確顯示，如果你只有一個favicon.ico，把它放在你網站的根目錄下。 通常來說你不需要做任何操作他就能正常顯示。 然而, 使用一下示例中的方法是比較好的做法。不過現在我們推薦使用PNG格式，相比.ico格式有較好的優勢(推薦尺寸: 32x32px)。

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

? 配置Web應用程序

[ ] Windows Tiles: Windows tiles are present and linked.

browserconfig.xml文件的最小所需xml標記如下所示:

? 瀏覽器配置模式參考.aspx)

[ ] Canonical: 使用rel="canonical"以避免重復的內容。

? Use canonical URLs - Search Console Help - Google Support

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

[ ] Language tag: 指定你網站的語言標簽并與當前頁面語言相關聯。

[ ] Direction tag: direction屬性規定元素內容的文本方向。(可以在另一個HTML標簽上使用)。

? dir - HTML - MDN

[ ] Alternate language: 指定網站的語言標簽并與當前頁面的語言相關聯。

[ ] 條件注釋: 如有需要，可針對IE添加條件注釋。

? 關于條件注釋(Internet Explorer) - MSDN - Microsoft.aspx)

[ ] RSS feed: 如果你的項目是一個博客或者有大量的文章，可以添加一個RSS鏈接。

[ ] CSS Critical: CSS critical收集并呈現當前頁面可見部分的所有CSS。在主要的CSS調用之前以單行(最小化)在中嵌入。

? Critical by Addy Osmani on Github

[ ] CSS 順序: 所有CSS文件都需要在JavaScript文件加載之前加載完成(除了有時JS文件異步加載到頁面之外的情況)。

強烈推薦Facebook OG and Twitter Cards。如果你針對某些特定的存在并希望確保顯示，也可以考慮其他社交媒體標簽。

[ ] Facebook Open Graph: 所有Facebook Open Graph（OG）都經過測試并且沒有任何錯誤。圖片至少需要600 x 315像素，建議使用1200 x 630像素。

? A Guide to Sharing for Webmasters

? 使用Facebook OG testing測試你的頁面。

[ ] Twitter Card:

? Getting started with cards — Twitter Developers

? 使用Twitter card validator測試你的頁面。

? 返回頂部

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

[ ] 清除注釋: 在將頁面發布到生產環境之前，應該刪除不必要的代碼。

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

? 返回頂部

[ ] 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指南和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文件。

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

? 返回頂部

注意: 想要完整的了解圖像優化，可以在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的圖像來支持視網膜屏顯示。

[ ] 雪碧圖: 小圖片放到一個雪碧圖中。

[ ] 寬高: 所有都需要設置高度和寬度(不要指定px 和 %)。

注意: 許多開發人員認為設置了寬度和高度就不能實現響應式設計，實際上并不是這樣的。

[ ] Alternative text: 所有 必須有alt屬性來直觀的描述圖片。

[ ] 懶加載: 圖片懶加載 (A noscript fallback is always provided).

? 返回頂部

[ ] JavaScript 內聯: 確保沒有任何js代碼內聯(與HTML代碼混合)。

[ ] 連接: 將js文件連接起來。

[ ] 壓縮: 壓縮所有js文件(可以添加 .min 后綴)。

壓縮資源 (HTML, CSS, and JavaScript)

[ ] JavaScript安全性:

用JavaScript開發安全應用程序指南*

[ ] 非阻塞: JavaScript文件使用async或延遲使用defer屬性異步加載。

? Remove Render-Blocking JavaScript

[ ] Modernizr: 如果您需要定位某些特定功能，則可以使用自定義Modernizr在標簽中添加class。

? Customize your Modernizr

[ ] ESLint: 用ESLint檢測并沒有錯誤(基于你的配置規則)。

? ESLint - The pluggable linting utility for JavaScript and JSX

? 返回頂部

securityheaders.io
Observatory by Mozilla
ASafaWeb - Automated Security Analyser for ASP.NET Websites

[ ] HTTPS: 每個頁面和所有外部內容(插件、圖像...)都使用HTTPS。

? Let"s Encrypt - 免費 SSL/TLS 證書

? 免費 SSL 服務測試

? Strict Transport Security

[ ] HTTP嚴格傳輸安全性(HSTS): HTTP頭設置 "Strict-Transport-Security".

? Check HSTS preload status and eligibility

? HTTP Strict Transport Security Cheat Sheet - OWASP

? Transport Layer Protection Cheat Sheet - OWASP

[ ] 跨站點請求偽造攻擊(CSRF): 確保向服務器端發出的請求是合法的，并來自您的網站/應用程序，以防止發生CSRF攻擊。

? 跨站點請求偽造（CSRF）防范清單 - OWASP_Prevention_Cheat_Sheet)

[ ] 跨站腳本攻擊(XSS): 頁面或網站沒有XSS攻擊的可能性。

? XSS (跨站腳本攻擊) 防范清單 - OWASP_Prevention_Cheat_Sheet)
? 基于DOM的XSS防范清單 - OWASP

[ ] Content Type Options 防止Google Chrome和Internet Explorer嘗試將響應的內容類型從服務器聲明的內容類型中嗅探出來。

? X-Content-Type-Options - Scott Helme

[ ] X-Frame-Options (XFO) 保護網站的訪問者免受劫持攻擊。

? X-Frame-Options - Scott Helme

? RFC7034 - HTTP Header Field X-Frame-Options

? 返回頂部

[ ] 頁面大小: 每張網頁的大小在0到500KB之間。

? Website Page Analysis

? Size Limit: Make the Web lighter

[ ] 文件壓縮: 壓縮你的HTML文件。

? W3C Validator

[ ] 懶加載: 圖片、js腳本和CSS需要懶加載，以提高當前頁面的響應時間（請參見各自部分的詳細信息）。

[ ] Cookie大小: 如果使用Cookie，確保每個Cookie不超過4096個字節，并且域名下不超過20個Cookie。

? Cookie規范: RFC 6265

? Cookies

? 瀏覽器Cookie限制

? 以下幾種技術的詳細說明

[ ] DNS解析: 使用dns-prefetch讓第三方DNS服務商主動去執行域名解析的功能。

[ ] 預連接: 使用preconnect在空閑期間提前做好DNS查詢, TCP三次握手和TLS 協商。

[ ] 預獲取: 使用prefetch在空閑期間提前請求即將需要的資源(例如：圖像的懶加載)。

[ ] 預加載: 使用preload提前加載當前頁面所需要的資源(例如：js腳本放在的最后)。

? 預加載和預獲取之間的差異

[ ] Google PageSpeed: 所有的網頁都經過測試（不僅僅是首頁），而且得分至少為90/100。

? Google PageSpeed

? 用Google測試移動端速度

? WebPagetest - 網站性能和優化測試

? 返回頂部

注意: 查看播放列表A11ycasts with Rob Dodson ?

[ ] 漸進式增強: 主要功能如主導航和搜索等功能應該在沒有啟用JavaScript的情況下工作。

? 在Chrome開發者具中啟用/禁用JavaScript

[ ] 顏色對比度: 顏色對比度至少通過WCAG AA標準(移動端需要通過AAA)。

? Contrast ratio

[ ] H1: 所有頁面都有H1，它不是網站的標題。

[ ] Headings: 標題應以正確的順序合理使用(H1至H6)。

? Why headings and landmarks are so important -- A11ycasts #18

[ ] banner角色: