如何在本地最佳地呈现大多数表格内容（~5 MB）的大型网页

Question

应用程序生成包含表格的html输出。生成的html文件非常大，大约7 MB，因此即使在最新的浏览器上渲染/滚动也需要很长时间。此html内容将手动策划（语言学相关项目）。

为了改善页面加载时间，我想到最初将内容分成多个页面，审阅者可以点击链接转到下一页。但是，它会带来不希望的连续性中断 - 像无限滚动或延迟加载这些表格会更好。

这些html页面将在本地查看（不从Web服务器获取）。从我读到的无限滚动/延迟加载，它似乎在Web服务器中工作。我想避免这种情况。

基本上，我可以使用javascript在一个页面内延迟加载内容，但是没有AJAX / php吗？

这个html输出将在VM内部查看，因此减少页面加载时间非常重要，现在大约需要2-3分钟。

- 编辑 -

应用程序将要翻译的英文文本文件作为输入，并生成html输出并分析每个句子。每个句子一个表，变量列（单词），固定行（元素属性）。必须手动查看此数据，以检查应用程序是否正确分析了文本。

此应用程序作为VM映像的一部分提供，因为这样的页面加载/渲染时间很重要。我想避免在Web服务器（xampp）中打包作为VM的一部分。 AJAX需要Web服务器来获取内容吗？

我最初如何仅显示此静态长网页的一部分，并在用户滚动时加载其余内容？

懒惰加载div通过类似lazyloadany [http://jquery-plugins.net/jquery-lazyload-any]似乎是一个相关的答案，截至目前。所以，我只是将一些表格包装在标签中，并使用这个jquery插件来显示所有这些div？

Answer 1

使用JavaScript分页

导航大型表

这是我过去用来导航大型表结构的东西。它显然不会绕过7Mb文件的下载时间，但AJAX也不会。然而，它所做的事情 - 至少对于现代浏览器而言 - 是跳过很多行的渲染（使用表渲染需要花费很多时间）。通过将行display: none作为默认值，浏览器应该忽略它们。

然后我使用一些js创建一个寻呼机界面，然后一次只显示多个行。这个界面用户友好程度完全取决于您;我已经使用了水平输入滚动条..但它可能是真正的任何东西（只是不是原始页面的滚动条，在渲染之前不知道每行的确切高度，这是相当棘手的，如果行，几乎不可能有不同的高度。）

截图

小提琴

显然这显示了一个缩减表，如果你引入一个更大的表，你需要调整滑块的步长值以适应，即行数越大，步长值应该越小。当使用大约9000行的表测试此代码时，我需要大约0.002的步长才能适合小页面。

http://jsfiddle.net/qXzzV/1/

代码

这是基本的JavaScript，它设计用于现代浏览器，如果您需要向后兼容任何过时的东西我建议您更新代码以使用像jQuery这样的库 - 工作应该是最小的。

(function(){
  /// store our references
  var table = document.getElementById('target'),
      wrapper = document.getElementById('target-wrapper'),
      rows = table.getElementsByTagName('tr'),
      scroller = document.getElementById('scroller'),
      shown = [];
  /// core function, updates which rows are visible at what scroller offset
  var reveal = function(){
    var i, tr,
        s = scroller.step,
        p = +scroller.value,
        c = Math.floor(rows.length * s),
        l = rows.length,
        o = Math.floor(p * (l - c)) + 1;
    while ( (tr = shown.pop()) ) { tr.style.display = 'none'; }
    for ( i=0; i<c; i++ ) {
      if ( (tr = rows[o+i]) ) {
        shown.push(tr);
        tr.style.display = 'table-row';
      }
    }
  };
  /// update when the scroller is changed
  scroller.addEventListener('input', reveal);
  scroller.focus();
  /// transfer right and left arrow keys to the scroller (optional)
  window.addEventListener('keypress', function(e){
    if ( document.activeElement !== scroller ) {
      switch ( e.keyCode ) {
        case 37:
          scroller.value = parseFloat(scroller.value) - parseFloat(scroller.step);
          reveal();
        break;
        case 39:
          scroller.value = parseFloat(scroller.value) + parseFloat(scroller.step);
          reveal();
        break;
      }
    }
  });
  /// set the ball rolling
  reveal();
})();

这是预期的加价：

<table cellspacing="0" cellpadding="0" id="target">
<!--  your contents here //-->
</table>
<input id="scroller" type="range" min="0" max="1" step="0.1" value="0" />

...和预期（通用）CSS，你应该根据你的情况做出这个：

table { width: 800px; }
th { text-align: left; padding-bottom: 10px; }
tr { display: none; }
tr:first-child { display: table-row; }
#scroller { width: 800px; margin-top: 30px; }

更进一步

考虑到有人手动策划数据，您应该改进此UI以支持值过滤/搜索等，使用此设计，这很容易做到。您只需要在选择行的位置插入并放置您自己的过滤器/选择代码，并在用户更改其过滤器时更新rows变量。请记住getElementsByTagName将返回一个实时节点列表，该列表将比静态节点列表或元素数组更快。当/如果您实现过滤代码，您应该尽可能使用live node lists。

  

一些进一步的表格优化提示：通过指定每个单元格的宽度和高度，您应该大大加快表格的渲染速度。另外我记得读到指定一个表格的边框要折叠，使用border-collapse可以帮助提高渲染速度，虽然我自己没有尝试过。

Answer 2

您可以实现某种延迟加载。您不需要拥有PHP或任何其他服务器端代码，但这并不妨碍您在任何情况下都使用AJAX进行数据检索。

我建议的方法是将大数据存储在单独的JSON文件中（您可以将其称为 data.json ），并且您的页面脚本将使AJAX调用直接指向此文件。然后，您的数据的全部内容可供您的脚本动态创建HTML元素以显示数据。

另一个完全不涉及AJAX的类似解决方案是创建一个普通的Javascript文件，它执行一个简单的var data = { /* all your data here */ }，并使用普通的script标记引用该文件。结果与前一种方法完全相同，因此您有一个大型Javascript对象，其中包含您当时可以渲染的所有数据。