我曾經有過類似的事情。 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(縮放,交互性)的優點,你需要找到一種方法來隱藏儘可能多的元素,以保持幀率高。
在我的屏幕上全部結束2500毫秒 - 3300毫秒 –
@ Mi-Creativity所示的時間軸用於從左向右滾動。不適合頁面加載。 –