【IT168 評論】為什麼Web頁面的加載速度如此重要?在這個信息化的時代，如果一個網站的加載時間過長，大部分用戶會極其不耐煩地選擇「關掉」!這讓辛辛苦苦熬夜敲代碼的程式設計師們情何以堪，不管網站功能如何強大，用戶根本都沒來得及看一眼，結果網站訪問量越來越少，粉絲轉化率越來越低，最後，程式設計師可能就要下崗了。
了解前端開發的程式設計師都知道，影響網站性能的因素有很多，例如，HTTP請求數量，臃腫的代碼，繁重的媒體文件等。如何編寫CSS以及如何在瀏覽器中加載樣式表都會對加載時間造成重大影響，接下來推薦五款針對CSS的性能提升工具，以幫助廣大前端開發程式設計師創建一流的網站。
TestMyCSS
TestMyCSS是一款免費的在線優化工具，具有很多功能。它可用來檢查代碼冗餘，驗證錯誤，未使用的CSS和尋求最佳做法。程式設計師只需將網址輸入網站的CSS文件，就可以立即開始使用，TestMyCSS可以發現需要改進的所有項目。不僅如此，程式設計師還可以看到一些有用的提示：
1、如何簡化複雜的選擇器
2、需要去掉的重複的CSS屬性和選擇器
3、代碼中存在的重要聲明的數量
4、不必要的類特異性
5、不必要的IE修復
6、不需要供應商前綴的CSS屬性
7、具有標籤名的類或ID規則，例如a.primary-link
8、通用選擇器使用不當
Stylelint
StyleLint是一款相當強大的CSS linter，它與PostCSS(一種開發工具)一起編寫了最先進的CSS，linter是一個可通過代碼捕獲潛在錯誤的程序。
StyleLint可以用來：
1、檢查拼寫錯誤，如打字錯誤，十六進位顏色無效，重複選擇器等。
2、尋求最佳做法實現
3、統一編碼風格，如每個CSS規則中的一致間距等。
4、支持新的頂級CSS語法
5、使用stylefmt自動修復一些警告，一種格式化CSS規則的工具
......
StyleLint非常強大，程式設計師可以使用其具備的：
1、StyleLint CLI(命令行界面)
2、構建工具的插件，例如webpack，gulp等。
3、文本編輯器的插件，例如Atom，Sublime Text等。
4、StyleLint Node API
5、StyleLint PostCSS插件
CSS Triggers
CSS Triggers提供在線的頁面解析參考，程式設計師可通過此參考了解哪些CSS屬性觸發了重繪和合成，但不引發布局，這些是瀏覽器在渲染網頁時的執行過程。
Layout：瀏覽器生成每個元素的幾何形狀和位置
Paint：瀏覽器將每個元素的像素解析為圖層
Composite：瀏覽器在屏幕上繪製圖層。
合成操作是瀏覽器執行的最廉價操作，如果你的CSS動畫的代碼反覆觸發合成和重繪操作的屬性，則很難將60fps(每秒幀數)作為平滑網頁動畫的關鍵數字。
Cssnano
當使用CSS呈現頁面的關鍵路徑時，使用精簡的、結構良好的樣式表文檔就變得很重要。 換句話說，默認的瀏覽器網頁渲染過程，直到樣式表被加載，解析和執行完成後才停止。因此，如果CSS文檔大而且雜亂，網站的加載時間就會很久。
cssnano是PostCSS的CSS優化和分解插件。cssnano採用格式很好的CSS，並通過許多優化，以確保最終的生產環境儘可能小。
Critical
Critical是處理上一節提到的CSS關鍵路徑問題的另一個工具。為了獲得最佳性能，程式設計師可能需要考慮將關鍵CSS直接插入到HTML文檔中，因為這消除了關鍵路徑的額外往返行程......
該想法的具體實踐是查找關鍵的CSS規則，並將這些規則放在HTML文檔的<head>部分。Critical生成並內聯關鍵路徑CSS，程式設計師可同時使用Grunt和Gulp。有關使用此工具內聯關鍵CSS的詳細教程，可訪問(https://www.sitepoint.com/how-and-why-you-should-inline-your-critical-css/)
以上五大工具可幫助前端開發程式設計師搭建一個可快速加載的網站，同時讓樣式表更精簡，減少錯誤，進而方便瀏覽器的加載和解析。其實相關的性能優化工具有很多，但各有優劣，你會選擇哪一款呢?