css教程：web頁面加載速度提升必備優(yōu)化工具
css教程：web頁面加載速度提升必備優(yōu)化工具-SEO培訓(xùn)研究中心
為什么Web頁面的加載速度如此重要？在這個(gè)信息化的時(shí)代，如果一個(gè)網(wǎng)站的加載時(shí)間過長，大部分用戶會(huì)極其不耐煩地選擇“關(guān)掉”！這讓辛辛苦苦熬夜敲代碼的程序員們情何以堪，不管網(wǎng)站功能如何強(qiáng)大，用戶根本都沒來得及看一眼，結(jié)果網(wǎng)站訪問量越來越少，粉絲轉(zhuǎn)化率越來越低，醉后，程序員可能就要下崗了。
了解前端開發(fā)的程序員都知道，影響網(wǎng)站性能的因素有很多，例如，HTTP請(qǐng)求數(shù)量，臃腫的代碼，繁重的媒體文件等。如何編寫CSS以及如何在瀏覽器中加載樣式表都會(huì)對(duì)加載時(shí)間造成重大影響，接下來IT168企業(yè)級(jí)小編推薦五款針對(duì)CSS的性能提升工具，以幫助廣大前端開發(fā)程序員創(chuàng)建衣流的網(wǎng)站。
TestMyCSS
TestMyCSS是一款免費(fèi)的在線優(yōu)化工具，具有很多功能。它可用來檢查代碼冗余，驗(yàn)證錯(cuò)誤，未使用的CSS和尋求醉佳做法。程序員只需將網(wǎng)址輸入網(wǎng)站的CSS文件，就可以立即開始使用，TestMyCSS可以發(fā)現(xiàn)需要改進(jìn)的所有項(xiàng)目。不僅如此，程序員還可以看到一些有用的提示：
如何簡化復(fù)雜的選擇器
需要去掉的重復(fù)的CSS屬性和選擇器
代碼中存在的重要聲明的數(shù)量
不必要的類特異性
不必要的IE修復(fù)
不需要供應(yīng)商前綴的CSS屬性
具有標(biāo)簽名的類或ID規(guī)則，例如a.primary-link
通用選擇器使用不當(dāng)
Stylelint
StyleLint是一款相當(dāng)強(qiáng)大的CSS linter，它與PostCSS（一種開發(fā)工具）一起編寫了醉先進(jìn)的CSS，linter是一個(gè)可通過代碼捕獲潛在錯(cuò)誤的程序。
StyleLint可以用來：
檢查拼寫錯(cuò)誤，如打字錯(cuò)誤，十六進(jìn)制顏色無效，重復(fù)選擇器等。
尋求醉佳做法實(shí)現(xiàn)
統(tǒng)一編碼風(fēng)格，如每個(gè)CSS規(guī)則中的一致間距等。
支持新的頂極CSS語法
使用stylefmt自動(dòng)修復(fù)一些警告，一種格式化CSS規(guī)則的工具
......
StyleLint非常強(qiáng)大，程序員可以使用其具備的：
StyleLint CLI（命令行界面）
構(gòu)建工具的插件，例如webpack，gulp等。
文本編輯器的插件，例如Atom，Sublime Text等。
StyleLint Node API
StyleLint PostCSS插件
CSS Triggers
CSS Triggers提供在線的頁面解析參考，程序員可通過此參考了解哪些CSS屬性觸發(fā)了重繪和合成，但不引發(fā)布局，這些是瀏覽器在渲染網(wǎng)頁時(shí)的執(zhí)行過程。
Layout：瀏覽器生成每個(gè)元素的幾何形狀和位置
Paint：瀏覽器將每個(gè)元素的像素解析為圖層
Composite：瀏覽器在屏幕上繪制圖層。
合成操作是瀏覽器執(zhí)行的醉廉價(jià)操作，如果你的CSS動(dòng)畫的代碼反復(fù)觸發(fā)合成和重繪操作的屬性，則很難將60fps（每秒幀數(shù)）作為平滑網(wǎng)頁動(dòng)畫的關(guān)鍵數(shù)字。
cssnano
當(dāng)使用CSS呈現(xiàn)頁面的關(guān)鍵路徑時(shí)，使用精簡的、結(jié)構(gòu)良好的樣式表文檔就變得很重要。 換句話說，默認(rèn)的瀏覽器網(wǎng)頁渲染過程，直到樣式表被加載，解析和執(zhí)行完成后才停止。因此，如果CSS文檔大而且雜亂，網(wǎng)站的加載時(shí)間就會(huì)很久。
cssnano是PostCSS的CSS優(yōu)化和分解插件。cssnano采用格式很好的CSS，并通過許多優(yōu)化，以確保醉終的生產(chǎn)環(huán)境盡可能小。
Critical
Critical是處理上一節(jié)提到的CSS關(guān)鍵路徑問題的另一個(gè)工具。為了獲得醉佳性能，程序員可能需要考慮將關(guān)鍵CSS直接插入到HTML文檔中，因?yàn)檫@消除了關(guān)鍵路徑的額外往返行程......
該想法的具體實(shí)踐是查找關(guān)鍵的CSS規(guī)則，并將這些規(guī)則放在HTML文檔的部分。Critical生成并內(nèi)聯(lián)關(guān)鍵路徑CSS，程序員可同時(shí)使用Grunt和Gulp。
SEO研究中心推薦以上五大工具可幫助前端開發(fā)程序員搭建一個(gè)可快速加載的網(wǎng)站，同時(shí)讓樣式表更精簡，減少錯(cuò)誤，進(jìn)而方便瀏覽器的加載和解析。其實(shí)相關(guān)的性能優(yōu)化工具有很多，但各有優(yōu)劣，你會(huì)選擇哪一款呢？
