如何确保HTML表以递增方式呈现

时间:2011-02-21 15:15:50

标签: html html-table rendering

我有一个旧式的CGI程序,它生成一个大的HTML表。因为表内容的计算速度很慢(即使它不是那么大),我想一次打印一行,并让浏览器在提取时显示行。

如果你在网上搜索,你会看到style =“table-layout:fixed”应该可以帮助一些浏览器这样做,但另一方面,即使没有它,Firefox也可以递增地呈现。我的测试浏览器是Windows上的Firefox 4.0b10,但是我无法使用下面的简单示例逐步显示它:

<html>
  <head>
    <title>x</title>
  </head>
  <body>
    <table width="100%" style="table-layout: fixed" rows="4" cols="4">
      <col width="10%" />
      <col width="20%" />
      <col width="30%" />
      <col width="40%" />
      <tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
      <!-- flush output, one second pause... -->
      <tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
      <!-- flush output, one second pause... -->
      <tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
      <!-- flush output, one second pause... -->
      <tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
      <!-- flush output, one second pause... -->
    </table>
  </body>
</html>

相反,在整个表格出现之前,页面一直是空白,直到下载结束。我已经尝试了各种方法提前告诉浏览器表格尺寸,所以它应该没有问题显示它到达,但他们没有帮助。 (删除提示也无济于事。)

如果我修改我的CGI脚本以关闭并重新启动每一行之间的表,中间有一个额外的空白段,那么页面会在浏览器中以递增方式呈现。这表明数据逐渐进入浏览器 - 只是Firefox选择不渲染它。

具有讽刺意味的是,生成更大表的更复杂的脚本似乎做了我想要的,在下载时一次显示一行,但每当我尝试将输出减少到最小测试用例时它就不起作用。这让我怀疑Firefox的渲染引擎使用了一些复杂的启发式算法。

到目前为止,我需要告诉浏览器始终显示已下载的表格,这需要什么魔法?

3 个答案:

答案 0 :(得分:1)

物有所值。 使用Firefox 3.6.16的Firefox在下载页面之前不会显示,无论下载的是什么。

您可以在about:config中查找设置,但我还没有看到任何解决方案, 有一些插件可以帮助显示占位符。但它们并不总是有效。

Just found this

阅读或尝试

about:config   - in browse bar
select new
create integer
nglayout.initialpaint.delay
set value to 0

欢呼声

答案 1 :(得分:0)

首先,我要说一次加载大量数据的用户界面设计很少。在大多数情况下,最好提供某种搜索或至少是分页功能。可能存在例外情况,但人们根本无法处理大量信息,而提供远远超过人们使用的数据的应用程序不仅仅是浪费周期,而且设计糟糕。想象一下,如果谷歌默认显示前10,000次点击,甚至是1,000次点击。大多数用户甚至看不到前5个左右,以及浪费的带宽量......

那就是说,如果网页设计糟糕,那当然不是你的错。或者它可能是,但在稍后重新设计解决方案之前,您需要快速修复。 :)

实现这一目标的一种方法是在客户端而不是在服务器上呈现表。如果页面上没有其他任何重要内容,则会快速地向用户提供其他内容,并且表格将出现的区域可能包含动画GIF或类似内容,以指示软件正在“正常工作”。您可以使用AJAX调用来获取表的数据,并在Javascript中修改DOM。然后,您可以一次创建100行,并使用window.setTimeout允许浏览器在继续之前呈现更新的DOM。

如果您选择沿着这条路走下去,那么解释事件调度模型的好文章可能会有所帮助:

http://dev.opera.com/articles/view/timing-and-synchronization-in-javascript/

答案 2 :(得分:0)

好的,那么如何放弃客户端渲染,而是多次在占位符(以及表格)中获取和替换服务器端呈现的HTML?服务器端必须使用后台线程并在其初始响应中提供句柄(例如GUID),然后AJAX调用可以用来请求表。服务器可以回复几行,并指示它没有完成,提示客户端重复此操作直到完成。

我认为这会有点混乱,但至少它会允许您为报告使用相同的页面。查询字符串参数可以告诉页面是完全呈现还是发出脚本以回调以获取数据。