title: How to speed up scrolling through large tables?
body: <p>I have a number of large tables I'm displaying to the user in tabs, one table per tab. The tables can get large to the point of causing speed issues, with anywhere up to 5000 rows and 100 columns. When the tables get this large, switching between tabs and scrolling in the tables becomes slow. So I'm looking for ways to speed up viewing the table contents. Here's some other information about the page setup; I'd post an example but I don't have one that fine to post.</p>
  
  <p>I implemented a header/row lock on the tables so that the thead and the first 4 columns in each row are always visible, because what was being done before didn't have the scroll lock and looking at a majority of the table was pointless because you couldn't tell what you were looking at; the identifying cells weren't visible anymore.</p>
  
  <p>For most of the data sets I'm viewing through this there aren't any issues but when the tables reach the aforementioned size, just attempting to scroll through the tables it takes a few seconds for the browser to catch up. I'm guessing the browser doesn't like the amount of content on the page, so I'm trying to figure out a good way to speed things up.</p>
  
  <p>I've already done a number of things with the page from my initial ideas because it was even slower before. I've taken most of the load off of Javascript by having the 'locked' tables being constructed in PHP rather than attempting to dynamically convert regular tables, and that helped significantly. The only things that I'm doing in Javascript now are making the ajax calls for each table, appending the returned html code to the page, resizing the table's div container if necessary, and setting up the scroll trigger so the fixed header and fixed sides scroll along with the content, and I don't think there's significantly more I can take off of the Javascript engine at this point.</p>
  
  <p>I think having some virtual scrolling or pagination implemented for the tables could help, but I'm not sure how to go about implementing it myself. I've found a number of things that have those features, but don't have the scroll lock that I need, so I don't think I'll be able to get something that's already out there for use. (Even with showing less rows per 'page', I can't think of a way to get around the fact there's ~100 columns). I think rather than just sending the html for the tables from the php script, I can send an array that has a row's HTML per index or something. Then when I load a page I can join the relevant section of the array, remove the previously displayed section, and dump the joined HTML code to the page. That way there's only one .append per page change. But before I went ahead and tried to implement something like that only to find it didn't really help, that it causes other issues, etc., I figured I should get other ideas or suggestions.</p>