找出CSS減慢你的頁面

有什麼工具可以找出CSS減慢頁面的速度嗎？我有幸爲某人回答了一個question，希望能夠刪除下面的CSS，從而大大提高了我網站的速度。我想知道還有什麼可能導致問題。我想粘貼我的CSS，並有一些類型的性能驗證器顯示哪些線路可能會導致問題。找出CSS減慢你的頁面

.ui-widget :active { 
    outline: none 
}

來源

2013-11-15 Mike Flynn

框/文字陰影，動畫，過渡，不透明度，rgba顏色。 – dfsq

它看起來像你以前的經驗與刪除CSS是更多關於在Javascript中的錯誤。說實話，這是非常罕見的事情，除非您的網站仍然存在性能問題，否則我不會擔心。即使你確實確定了一些「緩慢」的代碼，性能提高的可能性也不會被忽視。如果你仍然在尋找一些東西來檢查你的代碼，那麼一個好的開始就是：http：//validator.w3。org/ –

刪除該CSS可大大提高性能，否則我不會發布此問題。 –

CSS規則的大部分性能都是針對渲染引擎的，但是一些通用準則適用於所有引擎。你可以找到一些信息here。

目標是避免低效的規則。 ID選擇器規則總是有效的，因爲它們可以很容易地被編入索引。但是，當您構建複雜的規則來指定具有大量元素或標記的類作爲最右邊的選擇器時，瀏覽器必須測試更多元素以確定規則是否應用。

避免冗餘也可以提供幫助。由於HTML要求所有TD元素都在TR元素中，所以您不必將TR包含在選擇器中。

至於你指定的具體問題，它可能是：活動僞類只是一個昂貴的選擇匹配。

來源

2013-11-15 20:14:13 boothinator

雅虎YSlow是多個瀏覽器中blrowser插件，可以分析加載 http://developer.yahoo.com/yslow/

谷歌的PageSpeed Tools任何頁面類似於：
https://developers.google.com/speed/pagespeed/

另一個工具是CSSLint，但我回避這個，由於這樣的文章：
CSS Lint is harmful

來源

2013-11-15 20:17:25 Faust

好的工具，但是這些工具是否覆蓋了實際的頁面渲染？我認爲這兩者都更關心頁面結構和正在傳遞的內容，而不是瀏覽器擁有所需內容後實際構建頁面的方式。 – Bubbles

Chrome我們編輯有此功能，但他們認爲它不再是必要的。絕大多數規則可以在現代瀏覽器中快速確定，這意味着對規則效率的癡迷可能會讓您更及時地獲得代碼清潔度，而不是爲您購買實際的頁面加速。詳情請見see the patch notes。我認爲歌劇仍然有這個，但我沒有在我輸入這個從計算機上的瀏覽器。

就像上面的案例顯示的那樣，你不能完全忘記選擇器。但是，這是一個很糟糕的選擇器 - 「.ui-widget：active」隱含地使用了通用選擇器，這仍然被認爲是一個非常糟糕的主意。分離的「：active」將匹配整個DOM中活動的任何元素，然後將檢查它是否在具有「ui-widget」類的元素中。 Google's efficient css guide和more approachably by Chris Coyier涵蓋了這種情況。

簡而言之：這方面並沒有很好的工具，但幸運的是，您不必像過去那樣擔心。儘量避免使用通用選擇器，獲得不必要的具體內容，並且喜歡使用類和id來覆蓋元素類型。

來源

2013-11-15 20:24:11 Bubbles

找出CSS減慢你的頁面

回答

相關問題