Javascript - 大量渲染對象

我正在構建一個基於javascript/jQuery和php的Web應用程序，並且需要渲染和管理（例如，用戶拖放，調整大小等）大量（20,000 +）網頁上的繪製對象，並且正在尋找使用方法/庫的建議，主要是爲了瞭解如何做到這一點，同時保持頁面性能可接受。Javascript - 大量渲染對象

對象是簡單的幾何形狀（矩形，圓形，正方形等），我需要將事件處理程序附加到並能夠移動/重新調整大小。形狀屬性將基於JavaScript對象的屬性，我需要根據JavaScript對象屬性更改形狀，反之亦然。儘管不是所有對象在頁面上都是「可見的」，但必須能夠在div內滾動（使用溢出等）。）圍繞整個畫布。我使用jQuery SVGDOM構建了一些用於測試目的的東西，當我有幾百個對象時效果很好，但是當超過1000個對象時頁面會停下來停下來。

我喜歡svgdom的方式是它很適合用於引用DOM對象（用於事件處理程序等）的jQuery，但如果我需要爲了成爲（嘗試）開發更復雜的代碼能夠解決從性能角度來看svgdom看起來不太滿意的大量對象。

有關如何做到這一點的任何建議？

來源

2015-01-15 jTrouble

試圖讓用戶理解和操縱20000+項目肯定會壓倒用戶和瀏覽器。所以首先減少物品的數量。請記住，SVG項目是DOM的「智能」成熟成員，因此它們很有用，但使用起來很昂貴。畫布的形狀是「啞」，所以它們對編程和跟蹤很有用但代價很高。是的，一個超大的畫布會燒燬資源，因爲瀏覽器必須保留整個畫布，即使它只是部分可見。無論哪種方式，你都包括太多項目！ – markE

感謝您的評論markE - 不幸的是需求是針對這個數量的對象，所以問題是**我如何處理它們。我仍然在考慮的另一個選擇是繼續使用SVG，並且如此高效地對對象進行分頁，例如500，然後用戶將需要進入下一頁以查看下一個500.雖然這不是理想的到對象的關係，如果現實是在一個畫布上管理大量對象是不切實際的，那麼我將不得不採用這種方式 – jTrouble

儘管您有要求，但併發管理項目的20K對於偶數最有能力的設備來處理。 200-500個並行管理項目更爲現實。 – markE

我正在回答我的原始問題，即在單個頁面上顯示/管理我需要的對象數量（不管是SVG還是直接在畫布上）是不切實際的。

所以我的方法必須是減少在任何給定時間顯示的對象的數量 - 現在我只需要弄清楚如何做最好的方式，這是...

來源

2015-01-19 13:09:24 jTrouble

我想你需要研究一下使用GPU呈現的webGL。一個好的框架是three.js。

儘管如此，要管理您的期望：使20k對象互動真的是一個很大的挑戰，可能需要一些智能緩存系統來僞造它。如果你也瞄準移動設備，我會說你的目標太過於模糊。如果100個對象運行/平穩移動，我有時已經很開心。

來源

2015-01-15 23:18:12

謝謝馬克，同意這是一個挑戰，我現在真的在尋找選擇。正如我在上面** markE **的評論中提到的那樣，我正在考慮的一個選項是將畫布拆分並在多個頁面上運行，這會增加一組不同的複雜情況。回覆：移動設備 - 將會有一個應用程序的移動元素，但它將有一個稍微不同的焦點，所以我不需要顯示相同類型的數據 – jTrouble

或者，我的最愛：http：//www.pixijs。 com /：D – Cristy

Javascript - 大量渲染對象

回答

相關問題