CSS3 - 性能最佳實踐是什麼？

去年我花了很長時間閱讀JavaScript的性能，瓶頸和最佳實踐。在我最近的項目中，我使用了CSS3，將回退到javascript/jquery用於基本動畫和效果，例如懸停，並且有興趣進一步嘗試CSS3。CSS3 - 性能最佳實踐是什麼？

CSS3性能有問題嗎？

如果是，那麼最佳做法是什麼？

例如transition: all 150ms ease-out;比transition: opacity 150ms ease-out, background-color 150ms ease-out;使用更多的內存嗎？

[請不要只是回答我的例子問題！]

來源

2011-09-20 Haroldo

有趣的問題。到目前爲止您的測試結果如何？你有沒有試過用500個div來製作一個頁面，通過每種方法（也可能是值得嘗試Javascript方法）？ –

這是一個有趣的問題，但CSS不可能成爲任何現實生活中的性能瓶頸。 – JJJ

@Steven Xu - 哈哈，我以爲我會先問這裏。如果某人已經在某個地方已經制作了一個很棒的資源，那麼重新發明輪子就沒有意義了，我會盡最大努力檢查一下，然後做我的實驗來展開已經完成的工作...... – Haroldo

-6

要測試出來，你就必須讓你的動畫發生500或1000倍和時間了。

畫布和HTML5動畫的方式比閃存更多的CPU。 iPhone上的Flash優於HTML5替代品。我會做我的動畫，音頻和視頻使用JQuery作爲HTML5交換靈活性的方便。

來源

2011-09-20 13:39:59 desbest

iPhone上的Flash ...？ – JJJ

同上 - 在iPhone上閃存？而且，jQuery與Flash完全無關。 – Spudley

不太確定flash是如何進入它的，我正在操縱dom元素。 CSS，JavaScript和jQuery使用'css'，flash在一個完全不同的畫布上工作？ – Haroldo

是的！如果你喜歡修補性能 - 你會很高興知道CSS3存在很多性能問題。

重繪和迴流。它很容易造成不必要的重繪和迴流，從而使整個頁面滯後。閱讀：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/極端示例：http://files.myopera.com/c69/blog/lag-me.html
滾動和懸停。當您滾動或懸停時，瀏覽器必須呈現新內容。 Webkit在這裏很聰明，因爲它將頁面緩存爲靜態圖像，因此當您滾動時它不會呈現頁面。但是 - 你可以繞過這個優化，通過在你正在滾動的塊中使用諸如透明背景之類的東西，在懸停時添加旋轉，添加position:fixed粘性頁眉/頁腳等等 - 效果會在不同的瀏覽器中保持警惕，Opera似乎最受當前影響。
箱子陰影是邪惡的。在不同的瀏覽器中，Box-shadows具有不同的渲染質量（Webkit中較低，Opera/IE9中較高，因Firefox版本而異） - 因此它們對不同瀏覽器的性能影響不同 - 然而，inset盒影和盒影如果傳播半徑較大，則可能導致在任何瀏覽器中重繪時出現可觀察的掛起。
漂浮物，桌子和他們的朋友是邪惡的。起初聽起來很瘋狂，但閱讀這篇文章（俄語） - http://chikuyonok.ru/2010/11/optimization-story/ - 它可能會爲你節省一些頭髮。主要思想是 - 浮動元素的孩子會一直向上修改鏈。
邊界半徑非常昂貴，甚至比梯度更昂貴。不影響佈局，但會影響重新繪製。 http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
漸變滯後。 CSS漸變是非常酷的新工具，我是他們的忠實粉絲。然而，只有幾個測試表明，如果您計劃使用漸變的元素並且需要響應式界面（不過有一些測試表明您不應該使用它們:(儘管如此，還是有一種解決方法/使用canvas - 使用畫布渲染漸變圖像並設置他們作爲背景通過數據url
透明度很貴。如果您有多個移動元素互相交叉且半透明（不透明度< 0，rgba顏色，png，圓角（！）） - 預計滯後。通常可以通過限制可以疊加的透明元素的數量來制定。
轉換比JS好，但是 ...如果您同時將它們應用到150多個元素，則Firefox無法正確呈現轉換。 Opera無法將轉場應用於之前和之後。 IE9根本不支持它們。在使用它們之前進行測試，但通常 - 它們比JS類似物更快（jQuery.animate）。
注意CPU負載。它很難測量跨瀏覽器的內存使用情況，（但你可以用鉻和內插結果，用一些鹽），但它很容易觀察CPU使用情況（通過Process Explorer或系統工具）。尖刺會顯示你的地方，你需要注意的地方。
舊的瀏覽器是舊的。不要嘗試現代化IE6，Firefox 2，Safari 3.這些瀏覽器從來不應該處理很酷的新東西。讓他們獨處。只需提供基本樣式的基本內容。剩下的IE6用戶會爲此感恩。

來源

2011-09-20 15:49:39 c69

感謝您的指點！我肯定會不同意那些因爲「不具有建設性」而關閉這個問題的MODS。我會認爲你的評論非常有建設性。 TBH似乎感到惋惜，人們正在關閉這樣的問題。 – Haroldo

從我所知道的情況來看，box-shadow：插入半徑> = 15px在Safari中確實很慢。對於其他情況：只是不要過度使用此功能。 – kirilloid

二維和三維轉換也非常昂貴，動畫也是如此。但是在大多數情況下，您會注意到沒有任何外部提示或工具的性能影響;） – c69

-1

Paul Irish on CSS3 performance

來源

2011-09-20 16:38:29 Rob

好視頻，但它不完全關於CSS。像WebWorkers或requestAnimationFrame是JS。 – c69

CSS3 - 性能最佳實踐是什麼？

回答

相關問題