將大量元素附加到頁面後發生滯後時間

我正在網格上實現虛擬滾動。滾動/按需加載功能運行相當順利。但是，如果檢測到用戶快速滾動（定義爲長於450毫秒），則會在處理髮生時顯示帶加載gif的半透明div。將大量元素附加到頁面後發生滯後時間

我的問題是，加載完成後，附加完成後，我打電話來隱藏覆蓋期望看到更新的網格。相反，我有2-3秒的延遲，然後疊加隱藏和數據顯示。

問題：

A部分：爲什麼沒有在div仍停留在屏幕上，即使代碼隱藏談到了追加後的線......引起對意外2-3秒的等待沒有進展/加載指標給用戶？

B部分：可以做些什麼來確保疊加層保持可見狀態，直到添加到dom完成並呈現爲止？

執行的路線是這樣的：

CheckToFetch(id, $(gridScrollElm).scrollTop(), true); 
    ToggleOverlay(gridScrollElm, false);

正如你所看到聽到的，數據加載和渲染後的疊加理想應該隱藏。

在CheckToFetch後面有一連串的方法調用，但我只會在發生追加的地方顯示最相關的部分。

AppendData: function (id, data, firstTime) 
{ 
    var gd = SGrid.GetGridData(id); 
    var rowClass = (gd["RecordCount"] + 1) % 2; //sets us on correct course for adding AlternatingRow classes 

    var grid = $('#' + id) 
    var tbody = grid.children('tbody'); 

    var rowsToAdd = data["Records"]; 
    for (var r = 0; r < rowsToAdd.length; r++) 
    { 
     var elmsQueue = new Array(); //used to do efficient string concat, especially for IE 
     elmsQueue.push('<tr>'); 
     for (var c = 0; c < gd['Columns'].length; c++) 
     { 
      elmsQueue.push('<td align="'); 
      elmsQueue.push(gd['Columns'][c]['DataAlign']); 
      elmsQueue.push('" '); 

      var id = rowsToAdd[r]["id"]; 
      var cell = rowsToAdd[r]["cell"]; 

      if (rowClass % 2 == 0) 
      { 
       elmsQueue.push('class="AlternatingRow">'); 
      } 
      else 
      { 
       elmsQueue.push('>'); 
      } 
      elmsQueue.push(cell[c]); 
      elmsQueue.push('</td>'); 
     } 
     elmsQueue.push('</tr>'); 
     tbody.append(elmsQueue.join('')); 
     rowClass++; 
    }

來源

2011-09-09 Feisty Mango

至於一部分你的問題的，我只能假設，即重新繪製操作（實際上顯示的JavaScript操作的結果處理），可以從DOM操作和JavaScript執行獨立運行。在你的代碼中，你添加了多個元素到DOM中，dom被更新，迴流被髮送到瀏覽器，但是（迴流操作）不會讓JavaScript執行被擱置。因此，如果重排持續了很長時間，即使您沒有看到前面的語句結果，您仍然會執行下一個JavaScript函數。

有幾個資源指的油漆事件和DOM操作的性能：http://www.html5rocks.com/en/tutorials/speed/html5/（檢查優化策略部分），並從一個和唯一的保羅愛爾蘭：http://paulirish.com/2011/viewing-chromes-paint-cycle/

至於B部分你的問題。如果我對A部分的假設是正確的，那麼您唯一能做的就是確保重繪操作被限制在絕對最小值。爲了達到這個目的，你應該暫停追加這些元素，直到你的全套準備就緒。換句話說，繼續收集數組（或字符串）中的新元素，然後執行tbody.append()。簡單來說：將DOM操作移出循環。

推遲實際的DOM修改這是一種常見的做法，並且推薦使用大量修改DOM的腳本。

爲了獲得性能的每一點，您還可以嘗試將實際對象（使用document.createElement創建）傳遞給附加函數，而不是字符串，顯然必須解析它才能獲得元素列表想要放入DOM。

來源

2011-09-09 08:20:40 WTK

我真是太過分了......我以爲我已經把dom操作移到了外面......這就是當你得到超集中時會發生什麼。也非常感謝資源！ –

將大量元素附加到頁面後發生滯後時間

回答

相關問題