摘要:它基于前端開發(fā)人員多年的經(jīng)驗沉淀,以及其他優(yōu)秀的開源清單。在上投票或推薦來幫助前端清單的推廣。跨站點請求偽造防范清單跨站腳本攻擊頁面或網(wǎng)站沒有攻擊的可能性。
前端清單原文地址:Front-End-Checklist
原文作者:David Dias
譯者:JohnsenZhou
文章地址:https://github.com/JohnsenZhou/Front-End-Checklist
前端清單是一份在站點/HTML頁面發(fā)布到生產(chǎn)環(huán)境之前需要測試的所有元素的詳盡列表。
它基于前端開發(fā)人員多年的經(jīng)驗沉淀,以及其他優(yōu)秀的開源清單。
在Product Hunt上投票或推薦來幫助前端清單的推廣?。
目錄Head
HTML
Webfonts
CSS
Images
JavaScript
Security
Performance
Accessibility
SEO
How to use?前端清單中的所有項目都是大部分項目所必需的, 但某些元素可以省略或者并不是這么重要 (在管理Web應(yīng)用程序的情況下,你可能并不需要RSS訂閱源)。我們選擇使用一下3級區(qū)分:
意味著該項目被推薦,但在某些特定情況下可以省略。
意味著該項目是強烈推薦的,但是可能在某些特殊情況下能被省略。某些元素,如果省略將會對性能或SEO方面產(chǎn)生不良影響。
意味著項目不能被任何理由省略。你的頁面可能會導致功能障礙或有可訪問性或SEO問題。測試優(yōu)先級需要首先考慮這些元素。
某些資源擁有特定的標識符,幫助你去理解清單上不同類型的內(nèi)容或幫助。
?: 文檔或文章
?: 在線工具/測試工具
?: 媒體或視頻內(nèi)容
HeadMeta 標簽注意: 你能在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:包括網(wǎng)站標題不超過65個字符)。
Page Title less than 65 characters
? Title - HTML - MDN
[ ] Description: 提供description標簽, 它是唯一的同時內(nèi)容不能超過150個字符。
[ ] Favicons: 每個favicon都被創(chuàng)建并正確顯示,如果你只有一個favicon.ico,把它放在你網(wǎng)站的根目錄下。 通常來說你不需要做任何操作他就能正常顯示。 然而, 使用一下示例中的方法是比較好的做法。不過現(xiàn)在我們推薦使用PNG格式,相比.ico格式有較好的優(yōu)勢(推薦尺寸: 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圖標文件以支持你可能需要的用到的所有尺寸)
? 配置Web應(yīng)用程序
[ ] Windows Tiles: Windows tiles are present and linked.
browserconfig.xml文件的最小所需xml標記如下所示:
? 瀏覽器配置模式參考.aspx)
[ ] Canonical: 使用rel="canonical"以避免重復的內(nèi)容。
HTML 標簽? Use canonical URLs - Search Console Help - Google Support
? 5 common mistakes with rel=canonical - Google Webmaster Blog
[ ] Language tag: 指定你網(wǎng)站的語言標簽并與當前頁面語言相關(guān)聯(lián)。
[ ] Direction tag: direction屬性規(guī)定元素內(nèi)容的文本方向。(可以在另一個HTML標簽上使用)。
? dir - HTML - MDN
[ ] Alternate language: 指定網(wǎng)站的語言標簽并與當前頁面的語言相關(guān)聯(lián)。
[ ] 條件注釋: 如有需要,可針對IE添加條件注釋。
? 關(guān)于條件注釋(Internet Explorer) - MSDN - Microsoft.aspx)
[ ] RSS feed: 如果你的項目是一個博客或者有大量的文章,可以添加一個RSS鏈接。
[ ] CSS Critical: CSS critical收集并呈現(xiàn)當前頁面可見部分的所有CSS。在主要的CSS調(diào)用之前以單行(最小化)在中嵌入。
? Critical by Addy Osmani on Github
[ ] CSS 順序: 所有CSS文件都需要在JavaScript文件加載之前加載完成(除了有時JS文件異步加載到頁面之外的情況)。
Social meta強烈推薦Facebook OG and Twitter Cards。如果你針對某些特定的存在并希望確保顯示,也可以考慮其他社交媒體標簽。
[ ] Facebook Open Graph: 所有Facebook Open Graph(OG)都經(jīng)過測試并且沒有任何錯誤。圖片至少需要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測試你的頁面。
? 返回頂部
HTML 最佳實踐[ ] HTML5 Semantic Elements: 正確的使用HTML5語義化標簽(header, section, footer, main...).
? HTML 參考
[ ] Error pages: 404頁面和5xx錯誤的存在。5xx錯誤頁面需要集成其CSS(在當前服務(wù)器上無外部調(diào)用)。
[ ] Noopener: 如果你使用外部鏈接target="_blank", 你的鏈接必須有個rel="noopener"屬性,防止制表符的隱藏。如果你需要兼容舊版本的火狐瀏覽器,請使用rel="noopener noreferrer"。
? 關(guān)于 rel=noopener
[ ] 清除注釋: 在將頁面發(fā)布到生產(chǎn)環(huán)境之前,應(yīng)該刪除不必要的代碼。
HTML 測試[ ] 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
[ ] 廣告攔截器測試: 你的的網(wǎng)站會在啟用廣告攔截器的情況下正確顯示頁面內(nèi)容(你可以提供一條消息,引導人們停用其廣告攔截器)。
[ ] Pixel perfect: 頁面的像素級實現(xiàn)。根據(jù)設(shè)計稿的質(zhì)量,你的頁面可能做不到100%的還原,但你的網(wǎng)頁需要盡可能的靠近設(shè)計稿。
Pixel Perfect - Chrome 擴展
? 返回頂部
Webfonts[ ] 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))。
? 返回頂部
CSS注意: 大部分前端開發(fā)人員都會看看CSS指南和Sass指南。如果你對CSS屬性有疑問,可以訪問CSS參考文檔.
[ ] 響應(yīng)式網(wǎng)站設(shè)計: 網(wǎng)站使用響應(yīng)式設(shè)計。
[ ] CSS打印屬性: 提供打印樣式表,并確保使用正確。
[ ] 預處理器: 你的網(wǎng)站使用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嵌入或內(nèi)聯(lián),僅用于必要的情況(例如: background-image for slider, CSS critical).
[ ] 瀏覽器內(nèi)核前綴: 對部分屬性加上瀏覽器內(nèi)核前綴,生成你瀏覽器兼容的屬性。
性能? Autoprefixer CSS online
[ ] 連接: 將CSS文件連接到一個文件中。 (不適用HTTP/2)
[ ] 壓縮: 壓縮所有CSS文件。
[ ] 非阻塞: CSS文件需要非阻塞,以防在DOM加載時花費大量時間。
? loadCSS by filament group
? 使用loadCSS預加載CSS的示例
[ ] 未使用的CSS: 刪除未使用的CSS。
CSS 測試? UnCSS Online
? PurifyCSS
? Chrome DevTools Coverage
[ ] 格式檢查: 所有的CSS或SCSS文件沒有任何格式錯誤。
? stylelint, a CSS linter
? Sass指南
[ ] 響應(yīng)式網(wǎng)頁設(shè)計: 所有頁面都需要經(jīng)過以下幾種情況的測試: 320px, 768px, 1024px (根據(jù)自己的項目情況,可以設(shè)置更多)。
[ ] CSS驗證器: CSS經(jīng)過測試,同時所有錯誤都被修復。
? CSS驗證器
[ ] Reading direction: 如果需要的話,所有頁面都需要對LTR和RTL語言進行測試。
? 構(gòu)建RTL-Aware Web Apps & Websites: Part 1 | Mozilla Hacks
? 構(gòu)建RTL-Aware Web Apps & Websites: Part 2 | Mozilla Hacks
? 返回頂部
Images最佳實踐注意: 想要完整的了解圖像優(yōu)化,可以在Addy Osmani查看免費電子書圖像優(yōu)化基礎(chǔ)。
[ ] 優(yōu)化: 所有圖像都經(jīng)過優(yōu)化并且可在瀏覽器中正常顯示。WebP格式可用于關(guān)鍵頁面(如首頁)。 All images are optimized to be rendered in the browser. WebP format could be used for critical pages (like Homepage).
? Imagemin
? 使用ImageOptim免費優(yōu)化您的圖像。
[ ] 視網(wǎng)膜屏: 提供x2 或 3x的圖像來支持視網(wǎng)膜屏顯示。
[ ] 雪碧圖: 小圖片放到一個雪碧圖中。
[ ] 寬高: 所有都需要設(shè)置高度和寬度(不要指定px 和 %)。
注意: 許多開發(fā)人員認為設(shè)置了寬度和高度就不能實現(xiàn)響應(yīng)式設(shè)計,實際上并不是這樣的。
[ ] Alternative text: 所有 必須有alt屬性來直觀的描述圖片。
[ ] 懶加載: 圖片懶加載 (A noscript fallback is always provided).
? 返回頂部
JavaScript 最佳實踐[ ] JavaScript 內(nèi)聯(lián): 確保沒有任何js代碼內(nèi)聯(lián)(與HTML代碼混合)。
[ ] 連接: 將js文件連接起來。
[ ] 壓縮: 壓縮所有js文件(可以添加 .min 后綴)。
壓縮資源 (HTML, CSS, and JavaScript)
[ ] JavaScript安全性:
用JavaScript開發(fā)安全應(yīng)用程序指南*
[ ] 非阻塞: JavaScript文件使用async或延遲使用defer屬性異步加載。
? Remove Render-Blocking JavaScript
[ ] Modernizr: 如果您需要定位某些特定功能,則可以使用自定義Modernizr在標簽中添加class。
JavaScript 測試? Customize your Modernizr
[ ] ESLint: 用ESLint檢測并沒有錯誤(基于你的配置規(guī)則)。
? ESLint - The pluggable linting utility for JavaScript and JSX
? 返回頂部
Security 掃描并檢查你的網(wǎng)站最佳實踐securityheaders.io
Observatory by Mozilla
ASafaWeb - Automated Security Analyser for ASP.NET Websites
[ ] HTTPS: 每個頁面和所有外部內(nèi)容(插件、圖像...)都使用HTTPS。
? Let"s Encrypt - 免費 SSL/TLS 證書
? 免費 SSL 服務(wù)測試
? Strict Transport Security
[ ] HTTP嚴格傳輸安全性(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
[ ] 跨站點請求偽造攻擊(CSRF): 確保向服務(wù)器端發(fā)出的請求是合法的,并來自您的網(wǎng)站/應(yīng)用程序,以防止發(fā)生CSRF攻擊。
? 跨站點請求偽造(CSRF)防范清單 - OWASP_Prevention_Cheat_Sheet)
[ ] 跨站腳本攻擊(XSS): 頁面或網(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)容類型中嗅探出來。
? X-Content-Type-Options - Scott Helme
[ ] X-Frame-Options (XFO) 保護網(wǎng)站的訪問者免受劫持攻擊。
? X-Frame-Options - Scott Helme
? RFC7034 - HTTP Header Field X-Frame-Options
? 返回頂部
Performance 最佳實踐[ ] 頁面大小: 每張網(wǎng)頁的大小在0到500KB之間。
? Website Page Analysis
? Size Limit: Make the Web lighter
[ ] 文件壓縮: 壓縮你的HTML文件。
? W3C Validator
[ ] 懶加載: 圖片、js腳本和CSS需要懶加載,以提高當前頁面的響應(yīng)時間(請參見各自部分的詳細信息)。
[ ] Cookie大小: 如果使用Cookie,確保每個Cookie不超過4096個字節(jié),并且域名下不超過20個Cookie。
為將到來的請求做準備? Cookie規(guī)范: RFC 6265
? Cookies
? 瀏覽器Cookie限制
? 以下幾種技術(shù)的詳細說明
[ ] DNS解析: 使用dns-prefetch讓第三方DNS服務(wù)商主動去執(zhí)行域名解析的功能。
[ ] 預連接: 使用preconnect在空閑期間提前做好DNS查詢, TCP三次握手和TLS 協(xié)商。
[ ] 預獲取: 使用prefetch在空閑期間提前請求即將需要的資源(例如:圖像的懶加載)。
[ ] 預加載: 使用preload提前加載當前頁面所需要的資源(例如:js腳本放在的最后)。
性能測試? 預加載和預獲取之間的差異
[ ] Google PageSpeed: 所有的網(wǎng)頁都經(jīng)過測試(不僅僅是首頁),而且得分至少為90/100。
? Google PageSpeed
? 用Google測試移動端速度
? WebPagetest - 網(wǎng)站性能和優(yōu)化測試
? 返回頂部
Accessibility最佳實踐注意: 查看播放列表A11ycasts with Rob Dodson ?
[ ] 漸進式增強: 主要功能如主導航和搜索等功能應(yīng)該在沒有啟用JavaScript的情況下工作。
? 在Chrome開發(fā)者具中啟用/禁用JavaScript
[ ] 顏色對比度: 顏色對比度至少通過WCAG AA標準(移動端需要通過AAA)。
標題? Contrast ratio
[ ] H1: 所有頁面都有H1,它不是網(wǎng)站的標題。
[ ] Headings: 標題應(yīng)以正確的順序合理使用(H1至H6)。
Landmarks? Why headings and landmarks are so important -- A11ycasts #18
[ ] banner角色:
標簽中加入 role="banner"屬性。 [ ] navigation角色: 標簽中加入 role="navigation"屬性。
[ ] main角色: 標簽中加入 role="main"屬性。
語義化? Using ARIA landmarks to identify regions of a page
[ ] 使用特定的HTML5輸入類型: 這對于顯示不同類型的自定義鍵盤和小部件的移動設(shè)備尤其重要。
表單? Mobile Input Types
[ ] Label: label與每個輸入表單元素相關(guān)聯(lián),如果label無法顯示,請使用aria-label代替。
Accessibility 測試? 使用aria-label屬性 - MDN
[ ] Accessibility標準測試: 使用WAVE工具測試你的頁面是否符合accessibility標準。
? Wave testing
[ ] Keyboard navigation: 在你的鍵盤上以可能出現(xiàn)的操作順序去測試,確保所有交互式元素都可訪問和可用。
[ ] Screen-reader: 所有頁面都在屏幕閱讀器(VoiceOver, ChromeVox, NVDA or Lynx)中進行了測試。
[ ] Focus style: 如果焦點被禁用,它將被CSS中的可見狀態(tài)所替代。
? Managing Focus - A11ycasts #22
? 返回頂部
SEO[ ] Google Analytics: Google Analytics 正確安裝和配置。
[ ] Headings logic: 標題文字有助于了解當前頁面的主要內(nèi)容。
[ ] sitemap.xml: sitemap.xml存在并提交到Google Search Console(以前的Google管理員工具)。
[ ] robots.txt: robots.txt正確配置,不阻止網(wǎng)頁被爬取。
? 使用Google Robots Testing Tool測試你的robots.txt。
[ ] 結(jié)構(gòu)化數(shù)據(jù): 使用結(jié)構(gòu)化數(shù)據(jù)的頁面通過測試并且沒有錯誤。結(jié)構(gòu)化數(shù)據(jù)幫助爬蟲理解當前頁面的內(nèi)容。
? 結(jié)構(gòu)化數(shù)據(jù)簡介 | 搜索 | Google Developers
? 使用Structured Data Testing Tool測試你的頁面。
[ ] Sitemap HTML: 提供HTML網(wǎng)站地圖,可通過網(wǎng)站頁腳中的鏈接進行訪問。
? Sitemap 指南 | Google 支持
? Sitemap 生成器
? 返回頂部
TranslationThe Front-End Checklist is also available in other languages. Thanks for all translators and their awesome work!
?? Japanese: miya0001/Front-End-Checklist
?? Spanish: eoasakura/Front-End-Checklist-ES
?? Chinese: JohnsenZhou/Front-End-Checklist
?? Korean: kesuskim/Front-End-Checklist
?? Portuguese: jcezarms/Front-End-Checklist
前端清單徽章如果想顯示出你的項目遵循了前端清單的各項規(guī)定,請將此徽章放在項目的README文件上!
?
[![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,內(nèi)容會自動反映到前端清單。
2. develop
網(wǎng)站上。這個分支將用于對結(jié)構(gòu)和內(nèi)容進行一些重大更改。不過最好還是使用主分支來修復小錯誤或添加新項目。
貢獻查看所有貢獻人員 contributors.
Support如果您有任何問題或建議,可以通過Gitter或Twitter聯(lián)系我們:
Chat on Gitter
David Dias
License? 回到頂部
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/89319.html
相關(guān)文章
王下邀月熊_Chevalier的前端每周清單系列文章索引
摘要:感謝王下邀月熊分享的前端每周清單,為方便大家閱讀,特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列,并以年月為單位進行分類,具體內(nèi)容看這里前端每周清單年度總結(jié)與盤點。 感謝 王下邀月熊_Chevalier 分享的前端每周清單,為方便大家閱讀,特整理一份索引。 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列,并以年/月為單位進行分類,具...
前端每周清單年度總結(jié)與盤點
摘要:前端每周清單年度總結(jié)與盤點在過去的八個月中,我?guī)缀踔蛔隽藘杉拢ぷ髋c整理前端每周清單。本文末尾我會附上清單線索來源與目前共期清單的地址,感謝每一位閱讀鼓勵過的朋友,希望你們能夠繼續(xù)支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結(jié)與盤點 在過去的八個月中,我?guī)缀踔蛔隽?..
前端每周清單半年盤點之 PWA 篇
摘要:前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。 前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點;分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(ID:frontshow),及時獲取前端每周清單;本文則是對于...
前端每周清單半年盤點之 Angular 篇
摘要:延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇 前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點;分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(ID:frontshow),及時獲取前端每周清單;本文則是對于半年來發(fā)布的前端每周清單...
前端每周清單半年盤點之 WebAssembly 篇
摘要:前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。利用降低三倍加載速度自推出之后,很多開發(fā)者都開始嘗試在小型項目中實踐,不過尚缺大型真實案例比較。 前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點;分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目...
發(fā)表評論
0條評論
閱讀 1226·2023-04-25 15:53
閱讀 2101·2021-11-19 09:40
閱讀 3488·2021-10-11 10:59
閱讀 2066·2019-08-30 15:55
閱讀 1955·2019-08-30 15:54
閱讀 2293·2019-08-29 13:03
閱讀 2754·2019-08-28 18:17
閱讀 1510·2019-08-27 10:51