與位圖相比，svg圖像難以呈現給瀏覽器嗎？

因此，我正在製作這個有很多圖像的水平滾動網站。我計劃在整個網站上使用svgs，但在頁面中使用的中高複雜度只有20-30個svg圖像，而Chrome瀏覽器似乎已經顯示了som jpg和高滾動時間（而Firefox更糟糕，儘管safari似乎做得更好）。與位圖相比，svg圖像難以呈現給瀏覽器嗎？

滾動時間表

View the site（滾動在Mac只，Windows用戶可以使用箭頭鍵）

我的問題是，如果我使用png格式，而不是svgs，它會減少油漆時間，從而減少油膩度？爲什麼瀏覽器只能處理大約20張奇怪的svg圖像？

來源

2015-11-04 Shubham Kanodia

在我的屏幕上全部結束2500毫秒 - 3300毫秒 –

@ Mi-Creativity所示的時間軸用於從左向右滾動。不適合頁面加載。 –

我曾經有過類似的事情。 SVG的寬度是上面顯示的寬度的10倍或更多倍，它包含約20k個元素，大小約爲3MB。唯一帶回性能的東西（因爲它是一個跳躍和跑步遊戲）是一種算法，它能夠找到邊界框與視口重疊的所有元素。有了這個我可以使用display: none;來隱藏一切看不見的東西。

將可見元素的數量減少到每幀約150個，遊戲再次流暢地運行。

由於視口的高度始終與圖像相同，因此我使用了平衡二叉樹（avl樹）和一維範圍查詢。

祝你好運！

[編輯]

忘了留下的東西像前面回答。從我的經驗來看，大型/巨大的SVG Graphics是渲染的瓶頸，尤其是在發生大量腳本的情況下。如果你不需要與Graphic中的元素有任何交互性，那麼除了大背景圖像之外，我會推薦使用基於PNG圖像的Tile圖，這是Jump'n'Run遊戲中的標準方式，帶有huges »世界«這樣你就可以在兩個點獲得性能比較：

渲染速度更快，
您可以»懶AJAX負荷«瓷磚，取決於知名度，以防止用戶下載»全世界«在啓動。

此外，您可以使用像PIXI.js這樣的東西來渲染WebGL，這將大大提升性能，並支持Tilemaps和Spritesheets。

如果你堅持Vector Grafics（縮放，交互性）的優點，你需要找到一種方法來隱藏儘可能多的元素，以保持幀率高。

來源

2015-11-04 08:22:46 philipp

非常有趣！我也想過隱藏元素。您可以分享您在視口外檢查元素的方式和頻率？另外，不會讓它們顯示：當他們即將進入視口引起突然的時候突然阻擋？ –

測試運行每個幀，由'requestAnimationFrame'觸發。我將AVL-Tree中每個元素的x-min和x-max座標（初始化需要一些時間）存儲起來，然後在該樹上運行範圍查詢，反過來又非常快。 – philipp

「將可見元素的數量減少到每幀約150個」..你是說你減少了視口外的元素嗎？ –

正如我的懷疑，問題原來是完全不同的。瀏覽器不僅能夠處理多個矢量圖像。但是他們不擅長的（也是可以理解的）就是經常重繪這些圖像。

問題

我長水平滾動的網站是很寬（30,000px）。我有一個background-color屬性應用於其中一個較低的z-index'ed div的表示整個滾動網站的天空。我不想天空伸展整個30,000px，因爲它本質上並沒有太大變化，因此給它的視口的寬度和高度，具有：

position:fixed;

不是一個非常聰明的舉動。原來這個屬性導致我的文檔圖層在每一幀都被重新繪製。最初，雖然瀏覽器在滾動上這樣做是正常的，因爲我用作參考的Robby Leonardi's網站也重繪了每一幀。

解決方案

由於this article通過的Chrome瀏覽器開發工具的開發商之一，我拋開傳統的智慧，讓天空層

position:absolute;

和拉伸它整個網站的寬度，繁榮！油漆矩形消失了。滾動表現比黃油更平滑。

其他的解決方案我試過

隱藏元素不靠近視口，使畫更輕，通過@philipp的建議，但沒有任何一代產量明顯的差異。此外，它感覺超級黑客，並沒有針對問題的根源。
我試着將我的網站模塊化成場景，並在每個場景中使用translateZ(0)黑客程序，以便只有較小的場景被重新繪製而不是文檔。這實際上有所幫助，滾動是體面的。然後，我使用translateZ(0)爲所有svg圖像提供了自己的圖層。現在我開始獲得大約60分的FPS，但是這又不是正確的做事方式。

來源

2015-11-05 22:30:06

與位圖相比，svg圖像難以呈現給瀏覽器嗎？

回答

相關問題