摘要：它基于前端開發(fā)人員多年的經(jīng)驗(yàn)沉淀，以及其他優(yōu)秀的開源清單。在上投票或推薦來(lái)幫助前端清單的推廣?？缯军c(diǎn)請(qǐng)求偽造防范清單跨站腳本攻擊頁(yè)面或網(wǎng)站沒有攻擊的可能性。

原文地址：Front-End-Checklist

原文作者：David Dias

譯者：JohnsenZhou

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

前端清單是一份在站點(diǎn)/HTML頁(yè)面發(fā)布到生產(chǎn)環(huán)境之前需要測(cè)試的所有元素的詳盡列表。

它基于前端開發(fā)人員多年的經(jīng)驗(yàn)沉淀，以及其他優(yōu)秀的開源清單。

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

Head

HTML

Webfonts

CSS

Images

JavaScript

Security

Performance

Accessibility

SEO

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

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

意味著該項(xiàng)目是強(qiáng)烈推薦的，但是可能在某些特殊情況下能被省略。某些元素，如果省略將會(huì)對(duì)性能或SEO方面產(chǎn)生不良影響。

意味著項(xiàng)目不能被任何理由省略。你的頁(yè)面可能會(huì)導(dǎo)致功能障礙或有可訪問性或SEO問題。測(cè)試優(yōu)先級(jí)需要首先考慮這些元素。

某些資源擁有特定的標(biāo)識(shí)符，幫助你去理解清單上不同類型的內(nèi)容或幫助。

?: 文檔或文章

?: 在線工具/測(cè)試工具

?: 媒體或視頻內(nèi)容

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

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

? Determining the character encoding - HTML5 W3C

接下來(lái)三個(gè) meta 標(biāo)簽 (Charset, X-UA Compatible, Viewport) 需要首先在head中聲明

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

[ ] X-UA-Compatible: X-UA-Compatible 元標(biāo)簽。

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

[ ] Viewport: 正確聲明viewport標(biāo)簽。

[ ] Title: 所有頁(yè)面都使用title(SEO:包括網(wǎng)站標(biāo)題不超過65個(gè)字符)。

? Title - HTML - MDN

[ ] Description: 提供description標(biāo)簽， 它是唯一的同時(shí)內(nèi)容不能超過150個(gè)字符。

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

? Favicon 生成器

? RealFaviconGenerator

? Favicon Cheat Sheet

? Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS 技巧

? PNG favicons - caniuse

[ ] Apple Touch Icon: 蘋果設(shè)備favicon適配。 (創(chuàng)建至少200x200像素尺寸的Apple圖標(biāo)文件以支持你可能需要的用到的所有尺寸)

? 配置Web應(yīng)用程序

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

browserconfig.xml文件的最小所需xml標(biāo)記如下所示:

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

[ ] Canonical: 使用rel="canonical"以避免重復(fù)的內(nèi)容。

? Use canonical URLs - Search Console Help - Google Support

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

[ ] Language tag: 指定你網(wǎng)站的語(yǔ)言標(biāo)簽并與當(dāng)前頁(yè)面語(yǔ)言相關(guān)聯(lián)。

[ ] Direction tag: direction屬性規(guī)定元素內(nèi)容的文本方向。(可以在另一個(gè)HTML標(biāo)簽上使用)。

? dir - HTML - MDN

[ ] Alternate language: 指定網(wǎng)站的語(yǔ)言標(biāo)簽并與當(dāng)前頁(yè)面的語(yǔ)言相關(guān)聯(lián)。

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

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

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

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

? Critical by Addy Osmani on Github

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

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

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

? A Guide to Sharing for Webmasters

? 使用Facebook OG testing測(cè)試你的頁(yè)面。

[ ] Twitter Card:

? Getting started with cards — Twitter Developers

? 使用Twitter card validator測(cè)試你的頁(yè)面。

? 返回頂部

[ ] HTML5 Semantic Elements: 正確的使用HTML5語(yǔ)義化標(biāo)簽(header, section, footer, main...).

? HTML 參考

[ ] Error pages: 404頁(yè)面和5xx錯(cuò)誤的存在。5xx錯(cuò)誤頁(yè)面需要集成其CSS(在當(dāng)前服務(wù)器上無(wú)外部調(diào)用)。

[ ] Noopener: 如果你使用外部鏈接target="_blank", 你的鏈接必須有個(gè)rel="noopener"屬性，防止制表符的隱藏。如果你需要兼容舊版本的火狐瀏覽器，請(qǐng)使用rel="noopener noreferrer"。

? 關(guān)于 rel=noopener

[ ] 清除注釋: 在將頁(yè)面發(fā)布到生產(chǎn)環(huán)境之前，應(yīng)該刪除不必要的代碼。

[ ] W3C 兼容: 所有頁(yè)面需要使用W3C驗(yàn)證器進(jìn)行測(cè)試，以檢測(cè)HTML代碼中的可能存在的問題。

? W3C validator

[ ] HTML Lint: 使用工具來(lái)幫助我們分析HTML代碼中可能存在的問題。

? Dirty markup

[ ] Desktop Browsers: 所有頁(yè)面都在桌面瀏覽器上通過測(cè)試(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。

[ ] Mobile Browsers: 所有頁(yè)面都在移動(dòng)端瀏覽器上通過測(cè)試(Native browser, Chrome, Safari...).

[ ] 鏈接檢查器: 頁(yè)面中鏈接沒有斷開，請(qǐng)確認(rèn)你沒有404錯(cuò)誤。

? W3C Link Checker

[ ] 廣告攔截器測(cè)試: 你的的網(wǎng)站會(huì)在啟用廣告攔截器的情況下正確顯示頁(yè)面內(nèi)容(你可以提供一條消息，引導(dǎo)人們停用其廣告攔截器)。

[ ] Pixel perfect: 頁(yè)面的像素級(jí)實(shí)現(xiàn)。根據(jù)設(shè)計(jì)稿的質(zhì)量，你的頁(yè)面可能做不到100%的還原，但你的網(wǎng)頁(yè)需要盡可能的靠近設(shè)計(jì)稿。

Pixel Perfect - Chrome 擴(kuò)展

? 返回頂部

[ ] Webfont格式: 現(xiàn)代瀏覽器都支持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 (包括所有版本在內(nèi))。

? 返回頂部

注意: 大部分前端開發(fā)人員都會(huì)看看CSS指南和Sass指南。如果你對(duì)CSS屬性有疑問，可以訪問CSS參考文檔.

[ ] 響應(yīng)式網(wǎng)站設(shè)計(jì): 網(wǎng)站使用響應(yīng)式設(shè)計(jì)。

[ ] CSS打印屬性: 提供打印樣式表，并確保使用正確。

[ ] 預(yù)處理器: 你的網(wǎng)站使用css預(yù)處理器(推薦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嵌入或內(nèi)聯(lián)，僅用于必要的情況(例如: background-image for slider, CSS critical).

[ ] 瀏覽器內(nèi)核前綴: 對(duì)部分屬性加上瀏覽器內(nèi)核前綴，生成你瀏覽器兼容的屬性。

? Autoprefixer CSS online

[ ] 連接: 將CSS文件連接到一個(gè)文件中。 (不適用HTTP/2)

[ ] 壓縮: 壓縮所有CSS文件。

[ ] 非阻塞: CSS文件需要非阻塞，以防在DOM加載時(shí)花費(fèi)大量時(shí)間。

? loadCSS by filament group

? 使用loadCSS預(yù)加載CSS的示例

[ ] 未使用的CSS: 刪除未使用的CSS。

? UnCSS Online

? PurifyCSS

? Chrome DevTools Coverage

[ ] 格式檢查: 所有的CSS或SCSS文件沒有任何格式錯(cuò)誤。

? stylelint, a CSS linter

? Sass指南

[ ] 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì): 所有頁(yè)面都需要經(jīng)過以下幾種情況的測(cè)試: 320px, 768px, 1024px (根據(jù)自己的項(xiàng)目情況，可以設(shè)置更多)。

[ ] CSS驗(yàn)證器: CSS經(jīng)過測(cè)試，同時(shí)所有錯(cuò)誤都被修復(fù)。

? CSS驗(yàn)證器

[ ] Reading direction: 如果需要的話，所有頁(yè)面都需要對(duì)LTR和RTL語(yǔ)言進(jìn)行測(cè)試。

? 構(gòu)建RTL-Aware Web Apps & Websites: Part 1 | Mozilla Hacks

? 構(gòu)建RTL-Aware Web Apps & Websites: Part 2 | Mozilla Hacks

? 返回頂部

注意: 想要完整的了解圖像優(yōu)化，可以在Addy Osmani查看免費(fèi)電子書圖像優(yōu)化基礎(chǔ)。

[ ] 優(yōu)化: 所有圖像都經(jīng)過優(yōu)化并且可在瀏覽器中正常顯示。WebP格式可用于關(guān)鍵頁(yè)面（如首頁(yè)）。 All images are optimized to be rendered in the browser. WebP format could be used for critical pages (like Homepage).

? Imagemin

? 使用ImageOptim免費(fèi)優(yōu)化您的圖像。

[ ] 視網(wǎng)膜屏: 提供x2 或 3x的圖像來(lái)支持視網(wǎng)膜屏顯示。

[ ] 雪碧圖: 小圖片放到一個(gè)雪碧圖中。

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

注意: 許多開發(fā)人員認(rèn)為設(shè)置了寬度和高度就不能實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，實(shí)際上并不是這樣的。

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

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

? 返回頂部

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

[ ] 連接: 將js文件連接起來(lái)。

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

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

[ ] JavaScript安全性:

用JavaScript開發(fā)安全應(yīng)用程序指南*

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

? Remove Render-Blocking JavaScript

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

? Customize your Modernizr

[ ] ESLint: 用ESLint檢測(cè)并沒有錯(cuò)誤(基于你的配置規(guī)則)。

? ESLint - The pluggable linting utility for JavaScript and JSX

? 返回頂部

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

[ ] HTTPS: 每個(gè)頁(yè)面和所有外部?jī)?nèi)容(插件、圖像...)都使用HTTPS。

? Let"s Encrypt - 免費(fèi) SSL/TLS 證書

? 免費(fèi) SSL 服務(wù)測(cè)試

? Strict Transport Security

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

? Check HSTS preload status and eligibility

? HTTP Strict Transport Security Cheat Sheet - OWASP

? Transport Layer Protection Cheat Sheet - OWASP

[ ] 跨站點(diǎn)請(qǐng)求偽造攻擊(CSRF): 確保向服務(wù)器端發(fā)出的請(qǐng)求是合法的，并來(lái)自您的網(wǎng)站/應(yīng)用程序，以防止發(fā)生CSRF攻擊。

? 跨站點(diǎn)請(qǐng)求偽造（CSRF）防范清單 - OWASP_Prevention_Cheat_Sheet)

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

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

[ ] Content Type Options 防止Google Chrome和Internet Explorer嘗試將響應(yīng)的內(nèi)容類型從服務(wù)器聲明的內(nèi)容類型中嗅探出來(lái)。

? X-Content-Type-Options - Scott Helme

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

? X-Frame-Options - Scott Helme

? RFC7034 - HTTP Header Field X-Frame-Options

? 返回頂部

[ ] 頁(yè)面大小: 每張網(wǎng)頁(yè)的大小在0到500KB之間。

? Website Page Analysis

? Size Limit: Make the Web lighter

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

? W3C Validator

[ ] 懶加載: 圖片、js腳本和CSS需要懶加載，以提高當(dāng)前頁(yè)面的響應(yīng)時(shí)間（請(qǐng)參見各自部分的詳細(xì)信息）。

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

? Cookie規(guī)范: RFC 6265

? Cookies

? 瀏覽器Cookie限制

? 以下幾種技術(shù)的詳細(xì)說明

[ ] DNS解析: 使用dns-prefetch讓第三方DNS服務(wù)商主動(dòng)去執(zhí)行域名解析的功能。

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

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

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

? 預(yù)加載和預(yù)獲取之間的差異

[ ] Google PageSpeed: 所有的網(wǎng)頁(yè)都經(jīng)過測(cè)試（不僅僅是首頁(yè)），而且得分至少為90/100。

? Google PageSpeed

? 用Google測(cè)試移動(dòng)端速度

? WebPagetest - 網(wǎng)站性能和優(yōu)化測(cè)試

? 返回頂部

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

[ ] 漸進(jìn)式增強(qiáng): 主要功能如主導(dǎo)航和搜索等功能應(yīng)該在沒有啟用JavaScript的情況下工作。

? 在Chrome開發(fā)者具中啟用/禁用JavaScript

[ ] 顏色對(duì)比度: 顏色對(duì)比度至少通過WCAG AA標(biāo)準(zhǔn)(移動(dòng)端需要通過AAA)。

? Contrast ratio

[ ] H1: 所有頁(yè)面都有H1，它不是網(wǎng)站的標(biāo)題。

[ ] Headings: 標(biāo)題應(yīng)以正確的順序合理使用(H1至H6)。

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

[ ] banner角色: