谷歌瀏覽器中大（ish）html表格的滾動行爲很慢

我想用滾動條創建一個大的HTML表格（大約5000行），所以我想過在<div>裏面插入那張表格，然後我可以格式化爲I欣慰。谷歌瀏覽器中大（ish）html表格的滾動行爲很慢

它運作良好，在Firefox 47和IE 11，但在Chrome瀏覽器上滾動低迷的行爲59.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test page</title> 
    </head> 

    <body> 
     <div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div> 
     <script> 
      let table = '<table style="table-layout: fixed; width: 3000px">'; 
      table += '<thead>'; 
      table += '<tr>'; 
      for(let i=0; i < 30; i++) { 
       table += '<th style="width: 100px">#' + i +'</th>'; 
      } 
      table += '</tr>'; 
      table += '</thead>'; 
      table += '<tbody>'; 
      for(let i=0; i < 5000; i++) { 
       table += '<tr>'; 
       for(let j=0; j < 30; j++) { 
        table += '<td>r: '+ i +' || c: '+ j +'</td>'; 
       } 
       table += '</tr>'; 
      } 
      table += '</tbody>'; 
      table += '</table>'; 
      document.getElementById('test').innerHTML = table; 
     </script> 
    </body> 

</html>

但是如果我只是添加表格文檔正文中，在我測試過的3個瀏覽器中，滾動行爲是平滑的（但我只能在我的本地開發服務器中運行代碼時觀察到這種行爲;如果我將該表追加到JSFiddle中的文檔主體中，則Chrome的呆滯行爲會再次出現）。

我的問題是什麼可能會導致Chrome瀏覽器緩慢的行爲，我能做些什麼來獲得更流暢的滾動表？

*編輯：我已經從代碼塊中的<td>中刪除了style="position: relative"，因爲這就是我在小提琴中所做的。我正在嘗試這種風格，因爲我注意到，當表格元素相對定位時，IE瀏覽器往往會在滾動上變得呆滯。我的最終目標是創建一個帶有固定/凍結標題的大型html表格，該標題具有包含大量行的可滾動主體。

來源

2017-07-17 Moaning Neighbors

有使用Chrome（64）相同的問題，而沒有與FF和邊緣沒有問題。然而，在你的例子中加入「overflow：scroll」到外部div - 解決了這個問題。無論如何：看看slickgrid，也許正是你在找什麼。 –

嘗試將transform: translate3d(0, 0, 0)添加到表中。下面給出一個例子。然而，這個伎倆正在變老。有關它的帖子已經可以追溯到2012年。例如，請參閱this posting。

目前，瀏覽器附帶硬件加速;他們只有在它指示DOM元素會從中受益時才使用它。使用CSS，最強烈的跡象是3D變換正被應用於元素。

在我的公司，我們幾乎每個大的清單都使用它。大多數情況下，它工作正常。另一個解決方案是虛擬化。

let table = '<table style="table-layout: fixed; width: 3000px">'; 
 
table += '<thead>'; 
 
table += '<tr>'; 
 

 
for(let i=0; i < 30; i++) { 
 
    table += '<th style="width: 100px">#' + i +'</th>'; 
 
} 
 

 
table += '</tr>'; 
 
table += '</thead>'; 
 
table += '<tbody>'; 
 

 
for(let i=0; i < 5000; i++) { 
 
    table += '<tr>'; 
 
    for(let j=0; j < 30; j++) { 
 
    table += '<td>r: '+ i +' || c: '+ j +'</td>'; 
 
    } 
 
    table += '</tr>'; 
 
} 
 

 
table += '</tbody>'; 
 
table += '</table>'; 
 
document.getElementById('test').innerHTML = table; 
 
document.getElementById('test2').innerHTML = table;

#test { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
      transform: translate3d(0, 0, 0); 
 
}

<h2>With translate3d</h2> 
 
<div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div> 
 
<h2>Without translate3d</h2> 
 
<div style="width: 400px; height: 300px; overflow: scroll;" id="test2"></div>

（或full snippet）

來源

2017-07-18 09:08:24 SVSchmidt

對不起，我一直在閱讀關於什麼是虛擬化，我一直在努力正確地實現它。這對我的文檔性能有很大的影響。這是[** WORKING DEMO **]（https://jsfiddle.net/ddqw6tg3/3/）。不過，如果用戶拖動滾動條，或者如果他在懸停固定列時使用鼠標滾輪（演示中的前10個），我的電子表格元素纔會平滑滾動。但是這種行爲在我測試的3瀏覽器中並不一致。只有Chrome才能使用鼠標滾輪進行平滑滾動。 –

我很抱歉，但我不得不對此做出迴應，原因有兩個：1）在答案中，您要說「嘗試將變換：translate3d（0，0，0）添加到該列表中。」。但老兄，你把它添加到表格的父分區！（從某處複製？）2）轉換不是做的伎倆，溢出：滾動（至少在Chrome 64）。 –

谷歌瀏覽器中大（ish）html表格的滾動行爲很慢

回答

相關問題