如何分析CSS選擇器？

1）Google從Blink中刪除了CSS Profiler（問題＃265486）如何分析CSS選擇器？

2）Firefox沒有一個（問題＃713031）（有趣的是，幾年前有人問了一個類似於鉻探測器......現在他們知道了！）

3）歌劇有蜻蜓，但現在歌劇基於Blink ...而蜻蜓走了。

4）唯一的分析器仍然在那裏，在Safari中，不能在我的6.0.5/OSX 10.8.5上工作。（它保持記錄的CSS，我不能停止它）

此外，這應該是瀏覽器依賴，因此只測試一個瀏覽器不是最好的選擇。

我知道這個工具「CSS-Stress-Testing-and-Performance-Profiling」，但我沒有弄清楚如何將它用於我的目的。

我碰到一些基準來，如：http://jsperf.com/css-selector-speed/15並立足於一個我寫的東西是這樣的：https://gist.github.com/tagliala/7009411

鉻傢伙說，「CSS選擇器匹配現在是相當快的絕對多數使用的通用選擇器在探測器實施時慢「，好吧...

我該如何檢查是否值得它將語法從」.icon- 「更改爲」.font-icon.font-icon-「避免像「[class * = icon-]，[class * = icon-]」這樣的通用規則？這就是Bootstrap 3.0爲Glyphicons和FontAwesome所做的計劃是4.0

謝謝並對不起我的英文！

來源

2013-10-16 tagliala

我猜你真的不應該擔心這個.. – Enrichman

[*類= icon-]是不是一個普遍的選擇是一個屬性選擇器，找到其值至少包含一個字符串的子字符串..該*本身被認爲是通用選擇器..它有時被忽視，因爲它非常慢 –

基於給出的推理，我簡單地假設它不是真的值得。 – BoltClock

現代網絡發展趨勢遠離分析CSS選擇器，只是因爲它從中得不到什麼。要在性能上做出顯着改變需要花費大量時間和精力，並且可能會妨礙代碼的可維護性。

鑑於選擇器被解析的速度，你最好專注於可以使用性能增益的網站的其他方面。

只需從頁面中刪除單個圖像就可能比任何數量的CSS重構都能提高網站的性能。

來源

2013-10-16 16:09:47 zzzzBov

但誰在乎可維護性，對嗎？：P – BoltClock

謝謝，但FontAwesome中沒有圖像，我只需要在所有主流瀏覽器中剖析CSS選擇器。 – tagliala

對於功能強大的臺式電腦，這可能是正確的，但很多移動設備（智能手機，平板電腦等）速度非常慢。濫用CSS可能會導致它們的性能急劇下降。而且像IE8這樣的一些較老的瀏覽器在解析CSS時速度明顯較慢，所以能夠根據CSS解析速度確定哪些設置是最佳的總是很好的。 – tomasz86

在任何更好的解決方案創建之前，您可以繼續使用Opera 12.x，並繼續使用Dragonfly。

你可以在這裏下載舊版本的Opera：http://ftp.opera.com/pub/opera/

來源

2014-02-17 09:22:39 tomasz86

感謝您的回答，但問題在於瀏覽器的css性能不斷髮展，測試Opera的過時版本與測試所有瀏覽器的現代版本不一樣 – tagliala

@tagliala Opera 12.16不到一年前，所以它還不算舊...今天仍然使用的很多其他網絡瀏覽器比這個要舊（比如舊版Android中包含的默認瀏覽器）。如果您需要檢查是否有任何特別的CSS規則對性能有顯着影響，我認爲Opera 12.x及其配置文件仍然足夠。從我的觀察，與CSS鬥爭的瀏覽器通常是較舊的（IE8等），而不是最新版本的Firefox或Chrome。 – tomasz86

如何分析CSS選擇器？

回答

相關問題