複雜頁面的SVG內存佔用情況

我有一個設計，需要大量的小條形圖（sparkline大小）。一個典型的頁面可以很容易地顯示60個圖表，每個圖表顯示100個以上的數據點。瀏覽器內存佔用的內存是否會令人望而卻步？我也可以使用輸出png的服務器端渲染器，但SVG似乎可以做得更多。複雜頁面的SVG內存佔用情況

其他注意事項：SVG可能會被Rapheal.js轉換爲IE的VML。所以那裏的內存佔用也需要合理。

任何幫助，或找到一個很好的答案方法表示讚賞。

來源

2011-02-11 Matt

這是很容易爲你測試，並很難別人回答，因爲「望而卻步」是主觀。我建議你提出一個快速測試案例，並確定它是否符合你的需求。 – Phrogz 2011-02-12 14:04:43

這個問題有幾個問題。首先，內存佔用取決於正在使用的瀏覽器。這也取決於用於創建劇情的JavaScript內存結構的複雜性。其次，Raphael不會將SVG轉換爲VML，它需要一組命令來呈現矢量圖形，並將DOM內部的圖形構建爲SVG或VML。您可能想要做的是創建一個示例頁面，在單個頁面上創建60個迷你圖並觀察您感興趣的瀏覽器的內存消耗情況。它幾乎肯定比PNG要多得多。 – Pridkett 2011-02-15 20:25:46

您描述的svg元素的數量肯定會造成內存消耗方面的問題。

與canvas元素相反，SVG要求瀏覽器爲所有表示的元素維護一個對象模型。此對象模型使您可以輕鬆地將事件連接到特定元素的單擊。您不必跟蹤屏幕上廣場的位置，屏幕的大小，縮放比例等等。但是，這是以內存要求爲代價的，並且與畫布標籤形成鮮明對比，後者只是擔心關於用什麼顏色來繪製像素，以及您需要擔心跟蹤什麼「對象」被點擊。

因此，當試圖弄清楚性能是否會成爲問題時，從目標硬件方面來說，以最低公分母開始通常是明智的做法。你的目標是移動設備？你的目標是筆記本電腦和臺式機嗎？

一旦你有了這個問題的答案，建立一個虛擬的應用程序針對該硬件，使用一個虛擬圖形（100個數據點）60次以上。只需構建一下，就可以以一種反映用戶如何與之交互的方式與顯示器進行交互（如果您希望用戶能夠滑動圖表，應該包含該圖表等）

使用該功能笨拙的原型，現在嘗試使用基本的交互方式，如果性能滿足您的要求（即您的應用程序的觀衆的期望）。

就性能增強這種性質的應用程序而言，我建議使用ajax和svg的組合。我會生成圖表的縮略圖（使用SVG，由於縮小了細節，它們會更小），並且當用戶決定獲取更多細節時，我會使用ajax獲取該特定的更詳細的SVG表示圖形。

享受構建應用程序:)

來源

2011-02-18 00:03:02 AdamJonR

使用PNG替身的SVG火花線和需要的基礎上拉低SVG的愛亞當的想法。這些可以很容易地在服務器端使用同樣的SVG源渲染到庫中，如librsvg或者Cairo。

如果您正在尋找使用畫布的東西（使用IE的自動替代方法），請查看jQuery Sparklines庫，它可能已經做好了您所需的一切。

來源

2011-02-28 16:45:01 joshperry

規範化您的數據是關鍵。在大多數情況下，在50px寬的火花線中，人眼不需要100個數據點。使用數據規範化從100點減少到5點，這對眼睛和更高性能更容易。

服務器端的sparkline圖片精靈在擁有大量的圖片時往往會優於前端SVG/Canvas生成的圖片。

這裏有一個快速，服務器端的火花在Java中使用優秀的PNG壓縮解決方案：

https://github.com/AnthumChris/anthum-sparkline

來源

2017-10-11 20:02:54

複雜頁面的SVG內存佔用情況

回答

相關問題