您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“CSS性能優(yōu)化的五大工具是什么”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“CSS性能優(yōu)化的五大工具是什么”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
TestMyCSS
TestMyCSS是一款免費的在線優(yōu)化工具,具有很多功能。它可用來檢查代碼冗余,驗證錯誤,未使用的CSS和尋求最佳做法。程序員只需將網(wǎng)址輸入網(wǎng)站的CSS文件,就可以立即開始使用,TestMyCSS可以發(fā)現(xiàn)需要改進的所有項目。不僅如此,程序員還可以看到一些有用的提示:
如何簡化復(fù)雜的選擇器
需要去掉的重復(fù)的CSS屬性和選擇器
代碼中存在的重要聲明的數(shù)量
不必要的類特異性
不必要的IE修復(fù)
不需要供應(yīng)商前綴的CSS屬性
具有標(biāo)簽名的類或ID規(guī)則,例如a.primary-link
通用選擇器使用不當(dāng)
Stylelint
StyleLint是一款相當(dāng)強大的CSS linter,它與PostCSS(一種開發(fā)工具)一起編寫了最先進的CSS,linter是一個可通過代碼捕獲潛在錯誤的程序。
StyleLint可以用來:
檢查拼寫錯誤,如打字錯誤,十六進制顏色無效,重復(fù)選擇器等。
尋求最佳做法實現(xiàn)
統(tǒng)一編碼風(fēng)格,如每個CSS規(guī)則中的一致間距等。
支持新的頂級CSS語法
使用stylefmt自動修復(fù)一些警告,一種格式化CSS規(guī)則的工具
......
StyleLint非常強大,程序員可以使用其具備的:
StyleLint CLI(命令行界面)
構(gòu)建工具的插件,例如webpack,gulp等。
文本編輯器的插件,例如Atom,Sublime Text等。
StyleLint Node API
StyleLint PostCSS插件
CSS Triggers
CSS Triggers提供在線的頁面解析參考,程序員可通過此參考了解哪些CSS屬性觸發(fā)了重繪和合成,但不引發(fā)布局,這些是瀏覽器在渲染網(wǎng)頁時的執(zhí)行過程。
Layout:瀏覽器生成每個元素的幾何形狀和位置
Paint:瀏覽器將每個元素的像素解析為圖層
Composite:瀏覽器在屏幕上繪制圖層。
合成操作是瀏覽器執(zhí)行的最廉價操作,如果你的CSS動畫的代碼反復(fù)觸發(fā)合成和重繪操作的屬性,則很難將60fps(每秒幀數(shù))作為平滑網(wǎng)頁動畫的關(guān)鍵數(shù)字。
cssnano
當(dāng)使用CSS呈現(xiàn)頁面的關(guān)鍵路徑時,使用精簡的、結(jié)構(gòu)良好的樣式表文檔就變得很重要。 換句話說,默認(rèn)的瀏覽器網(wǎng)頁渲染過程,直到樣式表被加載,解析和執(zhí)行完成后才停止。因此,如果CSS文檔大而且雜亂,網(wǎng)站的加載時間就會很久。
cssnano是PostCSS的CSS優(yōu)化和分解插件。cssnano采用格式很好的CSS,并通過許多優(yōu)化,以確保最終的生產(chǎn)環(huán)境盡可能小。
Critical
Critical是處理上一節(jié)提到的CSS關(guān)鍵路徑問題的另一個工具。為了獲得最佳性能,程序員可能需要考慮將關(guān)鍵CSS直接插入到HTML文檔中,因為這消除了關(guān)鍵路徑的額外往返行程......
該想法的具體實踐是查找關(guān)鍵的CSS規(guī)則,并將這些規(guī)則放在HTML文檔的<head>部分。Critical生成并內(nèi)聯(lián)關(guān)鍵路徑CSS,程序員可同時使用Grunt和Gulp。
讀到這里,這篇“CSS性能優(yōu)化的五大工具是什么”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。