 |
VOOZH | about |
|
VOOZH | about |
「閱」——JSCourse 旗下欄目，專門推薦我們為大家精心挑選的優質 JavaScript 相關技術內容
就像一輛汽車交付前需要經過非常多項目的檢查一樣。一個網站上線前，我們也得確保各個方面都做到位了，沒有遺漏也沒有錯誤。比如：HTML、CSS、JavaScript、安全、SEO、性能、可訪問性等等。
最近小編讀到了一篇來自 David Dias 的文章——《The Front-End Checklist》，講的就是在一個網站上線前需要檢查的清單（僅前端），今天小編就把這份清單中比較重要的分享給大家，小編覺得其中有些東西確實可能是我們會忽略的地方，希望對你有所幫助！
HeadMeta 標籤1、在 HTML 頂部申明 HTML 5 Doctype
<!doctype html>緊接著，我們要申明下面這些 meta 標籤：
2、正確地設置 Charset
<!-- 設置文檔的字符編碼 --> <meta charset="utf-8">3、別忘了 X-UA-Compatible
<!-- 告訴 IE 用最新的渲染引擎 --> <meta http-equiv="x-ua-compatible" content="ie=edge">4、viewport
<!-- 為響應式設計設置 viewport --> <meta name="viewport" content="width=device-width, initial-scale=1">5、Title
Title 標籤的重要性不需要贅述了。務必要確保所有頁面都正確的設置了 title 標籤。像 Google 搜尋引擎會計算 title 的寬度，一般在 472 到 482 像素左右，因此 title 內容建議控制在 55 個字符以內，國內的引擎大家可以自行了解這部分的限制。
<!-- 文檔標題 --> <title>Page Title less than 55 characters</title>6、Description
和 Title 標籤一樣重要，出於 SEO 考慮，建議不要超過 150 個字符。
<!-- Meta Description --> <meta name="description" content="Description of the page less than 150 characters">7、Favicons
關於網站圖標，光這個話題要深入講可以講很久，不同的設備，不同的系統都需要考慮，而且遇到 iOS 設備可以講一個網頁作為快捷方式放到桌面上，這個時候這個圖標也是需要專門設置的，包括 Windows Tile 等等。今天這部分不在本文中展開，但是最起碼的，底線是你得有一個 ico 文件，最好你在準備一個 32x32 的 png 圖標。就像這樣：
<!-- 標準 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"> <!-- Microsoft Tiles --> <meta name="msapplication-config" content="browserconfig.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>8、Canonical
如果你的網站有多個頁面雖然 URL 不同但是呈現的內容都是一樣的，比如下面這樣的 URL：
那麼就可以使用 canonical 來避免重複的內容，告訴搜尋引擎把相關的搜索信號都傳遞到第一個 URL 上面，這樣不管一個頁面實際的 URL 是什麼，搜尋引擎都只會收入 canonical 指向的頁面。
<!-- Helps prevent duplicate content issues --> <link rel="canonical" href="https:/jscourse.cn/courses">1、正確設置 lang 屬性
<html lang="en">2、dir 屬性
一般支持 rtl（right to left） 都需要設置這個屬性
<html dir="rtl">3、RSS
如果是一個博客或者文章為主的網站，那麼最好提供一個 rss feed
4、內聯 critical CSS 代碼
所謂 Critical CSS 代碼就是指首屏渲染必要的 CSS 代碼，對於這些代碼最好直接內聯在 HTML 中。
HTML最佳實踐1、使用 HTML 5 語義化更好的標籤
比如：header、section、footer、main 等
2、記得錯誤頁面
錯誤的 404 以及 5xx 頁面都要有專門的錯誤頁面展示給用戶
3、別忘了 noopener
如果頁面中有超連結，並且需要打開新的標籤或者窗口的，那麼別忘了設置 rel=」noopener」（除非你有足夠的理由需要在新窗口中獲取父窗口的句柄），否則打開的頁面就可以通過 window.opener 獲取父頁面的句柄了，這是有風險的。
<a class="user-generated" href="malicious.html" target="_blank" rel="noopener">打開新頁面</a>4、將注釋都移除掉
HTML 測試1、檢查代碼是否違反 W3C 標準
可以使用 validator.w3.org/ 來測試
2、看看 HTML 代碼是否規範
可以使用 dirtymarkup.com/ 進行檢查
這部分中文網站一般比較少，除非你用了 icon font，那麼留意下下面兩條
1、使用 WOFF、WOFF2、TTF、SVG 來兼容主流瀏覽器
2、Web 字體大小不要超過 2 MB
CSSCSS 規範1、支持響應式
2、提供了列印的 CSS 樣式
3、可以使用 CSS Preprocessor
4、確保頁面上的 ID 是唯一的
5、Reset CSS
6、不要對第三方庫所用到的專屬 ID 作為 CSS 選擇器
有的時候，很多第三方庫要求 DOM 上包含指定的 ID，這個時候你的 CSS 定義樣式的時候不要去使用這個 ID，因為這個 ID 很可能以後會變動的，就像這樣：
<div id="js-slider" class="my-slider"> <!-- Or --> <div id="id-used-by-cms" class="js-slider my-slider">7、自動對生成瀏覽器前綴
有些 CSS 屬性需要添加瀏覽器前綴，這種時候儘量使用工具自動生成，比如：autoprefixer
1、合併多個 CSS 文件
2、壓縮 CSS 文件
3、考慮非阻塞加載 CSS 文件
比如使用我們之前：《[閱 #29] 我們一起聊聊加載 CSS 的那些事兒吧》：https://zhuanlan.zhihu.com/p/31881595 文中介紹的 preload 等屬性來對 CSS 進行預加載，而不阻塞 DOM 渲染。
4、移除不用的 CSS 代碼
這個現在直接用 Chrome 開發者工具就能看到哪些 CSS 沒有用到。
CSS 測試1、CSS 代碼規範測試
可以用 stylelint.io/ 來進行測試。
2、對響應式進行測試
需要在不同的顯示寬度上進行多解析度測試
3、兼容性測試
針對不同設備、瀏覽器進行測試
4、不同作業系統測試
這部分和瀏覽器測試可以合併，因為 IE 你只能在 Windows 上測試，而 Mac 版的 Safari 和 Windows 版的 Safari 雖然也有微小的差異但是考慮到成本，一般測試一個系統就可以了。
5、支持 RTL 的話還要針對 RTL 進行測試
圖片最佳實踐1、使用 picture/srcset 提供不同圖片以保證最好的用戶體驗
2、支持 Retina 顯示
3、針對一系列小圖標或者小尺寸圖片考慮用雪碧圖
4、設置圖片寬高
如果提前就知道圖片寬高的話就需要設置好寬高，這樣可以提高渲染速度
5、別忘了圖片的 alt 屬性
6、對圖片進行懶加載
JavaScriptJavaScript 最佳實踐1、不要內聯 JavaScript 代碼
2、合併並壓縮 JavaScript 代碼
3、注意 JavaScript 安全性相關的問題
可以查看：owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#Guidelines_for_Developing_Secure_Applications_Utilizing_JavaScript 了解詳細內容
4、考慮通過 async 和 defer 屬性來異步加載 JavaScript 代碼
5、針對特殊功能的時候進行特性檢測
比如可以使用 Modernizr。
JavaScript 測試1、使用各類 lint 工具對 JavaScript 代碼進行校驗
安全對網站進行安全掃描比如使用 securityheaders.io/ 這類工具對網站進行安全掃描
安全方面最佳實踐1、HTTPS
全站使用 HTTPS 包括外部資源
2、使用 HSTS（HTTP Strict Transport Security）
通過返回 Strict-Transport-Security 響應頭來告訴瀏覽器只能通過 HTTPS 而非 HTTP 來訪問本網站
3、預防 CSRF 攻擊
參看這份 《預防指南》：https://www.owasp.org/index.php/Cross-SiteRequest_Forgery%28CSRF%29_Prevention_Cheat_Sheet。
4、預防 XSS 攻擊
參看這份《官方 XSS 預防指南》：https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet
5、使用 XFO（X-Frame-Options）來預防 clickjacking 攻擊
具體可以參見這篇文章——scotthelme.co.uk/hardening-your-http-response-headers/#x-frame-options
性能性能方面最佳實踐1、注意頁面尺寸不要太大
2、壓縮 HTML 代碼
3、對一切可以懶加載的資源都進行懶加載
4、Cookie 尺寸
Cookie 不要超過 4093 個字節，數量不要超過 20 個
提前準備後續會發送的請求1、dns-prefetch
<link rel="dns-prefetch" href="https://example.com">2、preconnect
<link rel="preconnect" href="https://example.com">3、prefetch
<link rel="prefetch" href="image.png">4、preload
<link rel="preload" href="app.js">可以使用像 Google PageSpeed： developers.google.com/speed/pagespeed/insights/ 這樣的工具進行性能測試，並且分數最好超過 90 分。
SEO1、合理的使用標題
有利於讓搜尋引擎了解你頁面內容的結構
2、提供 sitemap.xml
3、提供 robots.txt
4、頁面結構合理
關於 SEO 你還可以針對國內的不同的搜尋引擎，進行有針對性的 SEO 優化。
這份長長的清單中包含了非常多非常細緻的項目，最好當然是都能夠做到，但是實際情況下未必能實現，因此小編分享這份清單主要是讓你心裡對這些方面有個了解，從而你可以結合你實際的需求根據優先級有針對性的進行檢查和完善。
好了，本期就到這裡了，我們下期再見哦！
關注「jscourse」微信公眾號獲取更多 JavaScript 學習課程和資源。