Raphael JS在很多矩形上使用背景時變得非常慢

Question

我有一大套小矩形（4K-5K），我想用sprite技術給它們背景，所以我只有一個圖像（否則請求數將會終止服務器）。

如果我給他們一個彩色背景，地圖只需要幾秒鐘的時間來構建。

我試圖創建一個矩形，應用它的翻譯來獲得分配的背景圖像的不同部分，並且工作。但是，即使只添加10個，速度也非常慢。

我做錯了什麼？

Answer 1

我有一個類似的問題，試圖生成一個六角形的地圖，然後用像森林，水，草地等精靈填充六角形。當我用純色填充它們時，渲染10K元素只需兩秒鐘。

如果我嘗試使用fill: url('image.png');，則只需繪製180個六角形並在10K上崩潰瀏覽器需要更長的時間。

據我所知，問題在於Raphael JS爲每個元素創建一個單獨的紋理定義，然後將其應用爲填充。這意味着對於10K元素，您有10K紋理定義指向相同的圖像。這不好。

更新：

我最終拋棄SVG的這種用法。快速創建HTML元素並使用CSS設置背景。例如，您可以將它們與SVG結合爲頂層。但是你正在處理很多元素。

我只通過動態加載我需要的元素來解決我的問題，因爲所有10K不需要同時在視口中。

在你的情況下，這不是一個真正的選擇。一個好的選擇是使用Canvas繪製元素。從我的實驗中，繪製這麼多的圖片比SVG要快，不過如果你使用的是動畫，它們比RaphaelJS庫更難實現。