瀏覽器重繪/迴流性能：使用CSS3漸變對PNG漸變

Question

我正在一個導致大量瀏覽器重排的應用程序工作。性能是一個關鍵問題。從性能角度來看，對某些DOM元素使用CSS3漸變或圖像漸變效果會更好嗎？使用CSS文字陰影和漸變的頁面是否會使用較慢的迴流作爲使用圖像來實現這些視覺效果的頁面？ 另外，有沒有我可以使用的迴流焊測試？

Answer 1

對於繪圖而言，CSS梯度和陰影的作用不僅僅是圖像。表現曾經很糟糕，現在他們可以接受。如果你有很多漸變/陰影，你應該實施它們並在你的真實環境中進行測試。如果你只有幾個，我不會擔心。

Answer 2

它很大程度上取決於瀏覽器如何呈現它，但大部分情況下渲染速度會變慢。另外，在較舊的瀏覽器中，您將擁有較少的像素完美顯示。但是，這也可以用於細分受衆羣體，因爲通常那些使用更新的瀏覽器的用戶也會更新計算機。所以，這是一種折衷方案，可以有效地爲您的網站提供簡化版本，但無法處理這些版本。這不是保證，但我發現它通常平衡很好。

總的來說，真實世界的測試是一條路。構建它，查看它是否有效，並在找到它們時解決性能問題。我會毫不猶豫的，因爲有可能無法工作。如果它工作的很好，而且你不嘗試，你永遠不會知道！