與10.000個對象交互的高性能

我需要在網頁上顯示大約10.000個圓圈。每個圓都必須綁定到數據。我還需要我的圈子如下交互：與10.000個對象交互的高性能

變化的CSS，如果我鼠標移到它們（高亮例如）
訪問數據，如果我點擊它

我試過三種實現：

一個通過D3生成SVG
一個通過D3再次生成的div sorte的「模仿」圈子
一個通過Fabricjs要經過帆布

對於DIV的解決方案，它只是醜陋的我的圈子並不總是完美的圓形。對於SVG和畫布，使用它有兩點緩慢。

如何在不減少顯示圓圈數量的情況下提高性能並保持好看？

來源

2017-09-25 MrFlo

究竟是什麼人可以理解顯示10,000個物體的東西呢？你需要重新思考你的UX –

@RobertLongson：我對天體物理學數據做了dataviz。我需要顯示衛星拍攝的所有「照片」。我已經將相同座標的數據彙總在一起，但如果不放鬆精度，我就無法繼續前進。在評判我之前，請看看那裏：http://episteme.univ-nantes.fr/dev/skymap/0 – MrFlo

從你的文章中我收集到的div解決方案運行良好，這只是醜陋的。你有一個我們可以看看的演示，試圖讓它更漂亮嗎？ ;） – DarthJDG

什麼可能會減慢你的鼠標對象重疊的檢測，這是瀏覽器的一個非常普遍的功能，因此沒有特別優化。好消息是你可以自己輕鬆優化。考慮這種方法：

將圓形渲染爲畫布。畫布在整個交互過程中將保持靜態。無需重新繪製內容。
檢測鼠標是否在圓上很容易實現。你知道圓心的位置，你知道鼠標的位置，你知道數學。因此，您可以自己搜索鼠標光標下的圓圈。
此外，你可以利用例如quadtree結構將圓心組織成分層結構，極大地加快了搜索過程。
除了在鼠標光標下更改圓圈的CSS，您可以在其上繪製另一個圓圈。在canvas之上單獨執行div，以便不需要重繪底層canvas。

來源

2017-09-25 08:13:30 Matey

其實我猜是什麼讓我的應用變慢是綁定圈數據。通過僅使用不帶交互的canvas2D，它可以很好地工作。所以我認爲我沒有開箱即用的解決方案:) – MrFlo

當然，代碼中可能還有其他瓶頸。沒有研究就很難說清楚。但是，標記結構中的10.000個元素（無論是HTML還是SVG）都將成爲一種表現。祝你好運，如果你需要進一步的幫助，請回來。 – Matey

與10.000個對象交互的高性能

回答

相關問題