新網站上線前，最好檢查下這些項目是否都做到位了

就像一輛汽車交付前需要經過非常多專案的檢查一樣。一個網站上線前，我們也得確保各個方面都做到位了，沒有遺漏也沒有錯誤。比如：HTML、CSS、JavaScript、安全、SEO、性能、可訪問性等等。

最近小編讀到了一篇來自 David Dias 的文章——《The Front-End Checklist》，講的就是在一個網站上線前需要檢查的清單（僅前端），今天小編就把這份清單中比較重要的分享給大家，小編覺得其中有些東西確實可能是我們會忽略的地方，希望對你有所幫助！

Head

Meta 標籤

1、在 HTML 頂部申明 HTML 5 Doctype

緊接著，我們要申明下面這些 meta 標籤：

2、正確地設置 Charset

3、別忘了 X-UA-Compatible

4、viewport

5、Title

Title 標籤的重要性不需要贅述了。務必要確保所有頁面都正確的設置了 title 標籤。像 Google 搜尋引擎會計算 title 的寬度，一般在 472 到 482 圖元左右，因此 title 內容建議控制在 55 個字元以內，國內的引擎大家可以自行瞭解這部分的限制。

Page Title less than 55 characters

6、Description

和 Title 標籤一樣重要，出於 SEO 考慮，建議不要超過 150 個字元。

7、Favicons

關於網站圖示，光這個話題要深入講可以講很久，不同的設備，不同的系統都需要考慮，而且遇到 iOS 設備可以講一個網頁作為快捷方式放到桌面上，這個時候這個圖示也是需要專門設置的，包括 Windows Tile 等等。今天這部分不在本文中展開，

但是最起碼的，底線是你得有一個 ico 檔，最好你在準備一個 32x32 的 png 圖示。就像這樣：

8、Canonical

如果你的網站有多個頁面雖然 URL 不同但是呈現的內容都是一樣的，比如下面這樣的 URL：

https://jscourse.cn/courses

https://jscourse.cn/courses?sessionId=121212

https://jscourse.cn/courses?fromChannel=121212

那麼就可以使用 canonical 來避免重複的內容，告訴搜尋引擎把相關的搜索信號都傳遞到第一個 URL 上面，這樣不管一個頁面實際的 URL 是什麼，搜尋引擎都只會收入 canonical 指向的頁面。

HTML 標籤

1、正確設置 lang 屬性

2、dir 屬性

一般支援 rtl（right to left）都需要設置這個屬性

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 獲取父頁面的控制碼了，

這是有風險的。

打開新頁面

4、將注釋都移除掉

HTML 測試

1、檢查代碼是否違反 W3C 標準

可以使用 https://validator.w3.org/ 來測試

2、看看 HTML 代碼是否規範

可以使用 https://dirtymarkup.com/ 進行檢查

3、確保頁面上沒有 404 的連結

可以用 https://validator.w3.org/checklink 來檢查

Web 字體

這部分中文網站一般比較少，除非你用了 icon font，那麼留意下下面兩條

1、使用 WOFF、WOFF2、TTF、SVG 來相容主流流覽器

2、Web 字體大小不要超過 2 MB

CSS 規範

1、支援回應式

2、提供了列印的 CSS 樣式

3、可以使用 CSS Preprocessor

4、確保頁面上的 ID 是唯一的

5、Reset CSS

6、不要對協力廠商庫所用到的專屬 ID 作為 CSS 選擇器

有的時候，很多協力廠商庫要求 DOM 上包含指定的 ID，這個時候你的 CSS 定義樣式的時候不要去使用這個 ID，因為這個 ID 很可能以後會變動的，就像這樣：

7、自動對生成流覽器首碼

有些 CSS 屬性需要添加流覽器首碼，這種時候儘量使用工具自動生成，比如：autoprefixer

CSS 性能

1、合併多個 CSS 檔

2、壓縮 CSS 檔

3、考慮非阻塞載入 CSS 檔

4、移除不用的 CSS 代碼

這個現在直接用 Chrome 開發者工具就能看到哪些 CSS 沒有用到。

CSS 測試

1、CSS 代碼規範測試

可以用 https://stylelint.io/ 來進行測試。

2、對回應式進行測試

需要在不同的顯示寬度上進行多解析度測試

3、相容性測試

針對不同設備、流覽器進行測試

4、不同作業系統測試

這部分和流覽器測試可以合併，因為 IE 你只能在 Windows 上測試，而 Mac 版的 Safari 和 Windows 版的 Safari 雖然也有微小的差異但是考慮到成本，一般測試一個系統就可以了。

5、支持 RTL 的話還要針對 RTL 進行測試

圖片

圖片最佳實踐

1、使用 picture/srcset 提供不同圖片以保證最好的使用者體驗

2、支援 Retina 顯示

3、針對一系列小圖示或者小尺寸圖片考慮用雪碧圖

4、設置圖片寬高

如果提前就知道圖片寬高的話就需要設置好寬高，這樣可以提高渲染速度

5、別忘了圖片的 alt 屬性

6、對圖片進行懶載入

JavaScript

JavaScript 最佳實踐

1、不要內聯 JavaScript 代碼

2、合併並壓縮 JavaScript 代碼

3、注意 JavaScript 安全性相關的問題

4、考慮通過 async 和 defer 屬性來非同步載入 JavaScript 代碼

5、針對特殊功能的時候進行特性檢測

比如可以使用 Modernizr。

JavaScript 測試

1、使用各類 lint 工具對 JavaScript 代碼進行校驗

安全

對網站進行安全掃描

比如使用 https://securityheaders.io/ 這類工具對網站進行安全掃描

安全方面最佳實踐

1、HTTPS

全站使用 HTTPS 包括外部資源

2、使用 HSTS（HTTP Strict Transport Security）

通過返回 Strict-Transport-Security 回應頭來告訴流覽器只能通過 HTTPS 而非 HTTP 來訪問本網站

3、使用 XFO（X-Frame-Options）來預防 clickjacking 攻擊

性能

性能方面最佳實踐

1、注意頁面尺寸不要太大

2、壓縮 HTML 代碼

3、對一切可以懶載入的資源都進行懶載入

4、Cookie 尺寸

Cookie 不要超過 4093 個位元組，數量不要超過 20 個

提前準備後續會發送的請求

1、dns-prefetch

2、preconnect

3、prefetch

4、preload

性能測試

可以使用像 Google PageSpeed工具進行性能測試，並且分數最好超過 90 分。

SEO

1、合理的使用標題

有利於讓搜尋引擎瞭解你頁面內容的結構

2、提供 sitemap.xml

3、提供 robots.txt

4、頁面結構合理

關於 SEO 你還可以針對國內的不同的搜尋引擎，進行有針對性的 SEO 優化。

這份長長的清單中包含了非常多非常細緻的項目，最好當然是都能夠做到，但是實際情況下未必能實現，因此小編分享這份清單主要是讓你心裡對這些方面有個瞭解，從而你可以結合你實際的需求根據優先順序有針對性的進行檢查和完善。

好了，本期就到這裡了，我們下期再見哦！