需要通過500多個表格行循環瀏覽器正在窒息

Question

我有一個大表列出了約50名用戶和他們的賬戶，包括他們有「項目」的數量一些簡單的數據。當點擊用戶行時，會在下面展開更多行，以顯示每個項目的詳細信息。大多數用戶只有不到20個項目，所以這對瀏覽器來說並不是很重要。然而，有幾個用戶擁有100多個項目（其中一個擁有500多個項目），當點擊用戶行時，瀏覽器停頓的時間爲1-4秒。

錶行設置，以便與.project類的任何行默認情況下隱藏，並在用戶行點擊（無.project類）當與.project類的所有後續行具有類.open其中加入顯示它們。

關於如何使運行速度更快的建議？有沒有更好，更乾淨的方法來達到相同的效果？

下面是HTML的一個簡化版本：

<table> 
    <tr> 
     <td>Username</td><td>Email</td><td>10 Projects</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr> 
     <td>Username</td><td>Email</td><td>3 Projects</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
    <tr class="project"> 
     <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td> 
    </tr> 
</table> 

...和JS：

(function($) { 

    $.fn.viewProjects = function() { 

     this.each(function() { 
      $(this).click(function(){ 

       var projects = $(this).nextUntil(':not(.project)'); // get all rows that follow and have the '.project' class 

       if ($(this).hasClass('focused')) { // collapse 
        $(this).removeClass('focused'); 
        projects.each(function(n, proj){ 
         $(proj).removeClass('open'); 
        }); 
       } 
       else { // expand 
        $(this).addClass('focused'); 
        projects.each(function(n, proj){ 
         $(proj).addClass('open'); 
        }); 
       } 

      }); 
     }); 

    }; 

    $('tr:not(.project)').viewProjects(); 

})(jQuery); 

Answer 1

這是因爲DOM加載到這麼多東西加入。我在類似情況下做的是：

• 檢查是否有超過50行
• 如果是這樣，則停在50和放置一個「點擊查看更多」鏈接。
• 點擊後，加載下50行。
• 繼續此過程，直到加載所有行。

或者，您可以在用戶向下滾動頁面時自動觸發下一行50行。我更喜歡顯示一個鏈接，因爲自動加載的東西可能會令人困惑。

編輯 - 如果您使用jQuery顯示和隱藏內容而不是每次添加和刪除類，會出現什麼情況？

if ($(this).hasClass('focused')) { // collapse 
    $(this).removeClass('focused'); 
    projects.hide(); 
} 
else { // expand 
    $(this).addClass('focused'); 
    projects.show(); 
} 

Answer 2

您可以檢查webworker創建線程來提高性能。我知道這是一個模糊的，但我想提出這個方向。

不幸的是，我們不能在webworkers內部操縱DOM。但是DOM可以在你的客戶端代碼上操作。

看來您正在使XMLhttprequest獲取新數據，並且這可以在webworkers內完成。

Answer 3

你不需要每個。jQuery中點擊功能是支持鏈式這可能加快速度：

(function($) { 

    $.fn.viewProjects = function() { 

      $(this).click(function(){ 

       var projects = $(this).nextUntil(':not(.project)'); // get all rows that follow and have the '.project' class 

       if ($(this).hasClass('focused')) { // collapse 
        $(this).removeClass('focused'); 
        projects.each(function(n, proj){ 
         $(proj).removeClass('open'); 
        }); 
       } 
       else { // expand 
        $(this).addClass('focused'); 
        projects.each(function(n, proj){ 
         $(proj).addClass('open'); 
        }); 
       } 

      }); 

    }; 

    $('tr:not(.project)').viewProjects(); 

})(jQuery); 

Answer 4

相反的顯示/隱藏500個項目，顯示/隱藏一個：

重組HTML到這樣的事情：

<table> 
    <tr> 
     <td>Username</td><td>Email</td><td>10 Projects</td> 
    </tr> 
    <tr class="project"> 
     <td colspan="3"> 
      <ul> 
       <li>Project Name</li> 
       <li>Project Name</li> 
       <li>Project Name</li> 
       <li>Project Name</li> 
       <li>Project Name</li> 
       <li>Project Name</li> 
       <li>Project Name</li> 
       <li>Project Name</li> 
       <li>Project Name</li> 
     </ul> 
    </td> 
</tr>