一個網頁的優化,包括網頁的性能和用戶的體驗。其中一個關鍵環節是減少網頁的加載時間。如果一個網頁加載時長過長,就很容易降低用戶體驗和搜索引擎排名。此時,CSS文件minify和li去點css就成了優化的重要手段之一。
在CSS文件minify之后,li去點css能夠刪除CSS文件中未使用的選擇器,從而減少文件的大小,從而加快加載速度。而li去點css的執行需要借助工具。目前常用的工具包括PurifyCSS、uncss等等,這些都是基于瀏覽器渲染的方式來去除未使用的選擇器的。
ul li { margin: 5px; } // 站點其他頁面中未使用 selector-not-used {}
如上,我們可以通過這樣的代碼結構來測試一段CSS文件的li去點css。在uncss中,我們可以使用如下命令來去除未使用的選擇器:
uncss input.css output.css
以上命令代表輸入文件為input.css,輸出文件為output.css,去除之后未被使用的選擇器,從而減少CSS文件的大小。
總之,li去點css是減少CSS文件大小,提升網頁性能的有效手段之一。在大型網站中,如果CSS文件的大小達到幾十甚至上百KB,Li去點CSS會為你節省很多流量。除了利用uncss等工具外,設計CSS代碼的時候也可以避免出現無用選擇器,從而保持CSS文件的精簡。