javascript - 如何在本地最好地呈现大部分表格内容(~5 MB)的大型网页

Question

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

为了缩短页面加载时间，我想到了最初将内容分成多个页面，审阅者可以在其中单击链接转到下一页。但是，它会导致连续性出现不良中断 - 像无限滚动或延迟加载这些表格这样的事情会是一个更好的主意。

这些 html 页面将在本地查看(而不是从网络服务器获取)。从我读到的关于无限滚动/延迟加载的内容来看，它似乎在网络服务器中工作。我想避免这种情况。

基本上，我可以使用 javascript 在单个页面中延迟加载内容，但不使用 AJAX/php 吗？

此 html 输出将在 VM 内查看，因此减少页面加载时间很重要，现在大约为 2-3 分钟。

-- 编辑--

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

此应用程序作为 VM 镜像的一部分提供，因此页面加载/呈现时间很重要。我想避免将 Web 服务器 (xampp) 打包为 VM 的一部分。 AJAX 需要 Web 服务器来获取内容？

我该如何开始只显示这个静态的长网页的一部分，并在用户滚动时加载其余内容？

通过 lazyloadany [ http://jquery-plugins.net/jquery-lazyload-any 之类的东西延迟加载 div ] 到目前为止似乎是一个相关的答案。所以，我只是用标签包装了一些表格，然后使用这个 jquery 插件来显示所有这些 div？

Answer 1

使用 JavaScript 分页浏览大型表格

这是我过去用来导航大型表结构的东西。对于一个 7Mb 的文件，它显然不会绕过下载时间，但 AJAX 也不会。然而，它所做的 - 至少对于现代浏览器 - 是跳过许多行的呈现(这对于表格呈现来说是需要花费大量时间的)。通过将行 display: none 作为默认值，浏览器应该忽略它们。

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

截图

fiddle

显然这是一个缩减表，如果你引入一个更大的表，你需要调整 slider 的步长值来适应，即行数越大，步长值应该越小。当使用大约 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如果可能的话。

Some further table optimisation tips: By specifying every cell width and height you should dramatically speed up a table's rendering speed. Also I remember reading that specifying a table's borders to collapse, using border-collapse can help with render speed, although I have not tried this myself.