如何确保 HTML 表格增量呈现
我有一个老式的 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 的渲染引擎使用了一些复杂性启发式方法。
我需要什么魔法来告诉浏览器始终显示到目前为止下载的表格？
I have an old-style CGI program which generates a large HTML table. Because the table contents are slow to calculate (even though it's not that big) I would like to print it one row at a time, and have the browser display rows as they are fetched.
If you search online you'll see that style="table-layout: fixed" is supposed to help some browsers do this, but on the other hand Firefox can render incrementally even without it. My test browser is Firefox 4.0b10 on Windows but I cannot get it to display incrementally using the simple example below:
<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>
Instead the page is blank until the end of the download, when the whole table appears. I've tried various ways to tell the browser the table dimensions in advance so it should have no problem displaying it as it arrives, but they don't help. (Removing the hints doesn't help either.)
If I modify my CGI script to close and restart the table between each row, with an extra blank paragraph in between, then the page does render incrementally in the browser. This shows that the data is getting to the browser incrementally - just Firefox is choosing not to render it.
Ironically, much more complex scripts producing larger tables seem to do what I want, showing one row at a time as it downloads, but whenever I try to reduce the output to a minimal test case it doesn't work. This leads me to suspect there is some complexity heuristic used by Firefox's rendering engine.
What's the magic dust I need to tell the browser to always display the table as downloaded so far?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
为了它的价值。
我用的Firefox Firefox 3.6.16 直到页面下载完毕后才显示，无论下载的是什么。
您可以在 about:config 中查找设置，但我还没有看到任何解决方案，
有一些插件可以帮助显示占位符。但它们也不总是有效。
刚刚找到这个
阅读它或尝试
欢呼
For what it is worth.
The Firefox I use Firefox 3.6.16 does not display until the page is downloaded, regardless of what is being downloaded.
You could look for settings in about:config, but I have not seen any solution to this,
there are addins to help with displaying placeholders. but they don't always work either.
Just found this
Read it OR try
cheers
首先，我想说，一次性加载大量数据很少是好的用户界面设计。在大多数情况下，最好提供某种搜索或至少分页功能。可能会有例外，但人们根本无法处理大量信息，而应用程序提供的数据远远超出人们的使用量，这不仅浪费周期，而且设计得很糟糕。想象一下，如果 Google 默认显示前 10,000 个点击，甚至是 1,000 个。大多数用户甚至不会关注前 5 个左右的内容，以及浪费的带宽量……
也就是说，如果页面设计得很糟糕，这当然可能不是你的错。或者可能是这样，但您需要快速修复，然后再回来重新设计解决方案。 :)
实现此目的的一种方法是在客户端而不是在服务器上呈现表。如果页面上没有其他繁重的内容，用户将很快获得其他内容，并且表格出现的区域可能包含动画 GIF 或类似内容，以指示软件正在“运行”。您可以使用 AJAX 调用来获取表的数据，并在 Javascript 中修改 DOM。然后，您可以一次创建 100 行，并使用
window.setTimeout允许浏览器在继续之前渲染更新的 DOM。如果您选择走这条路，一篇解释事件调度模型的好文章可能会有所帮助：
First of all, I'd say it's seldom good user interface design to load huge amounts of data at once. In most cases, it's better to offer some sort of search or at least paging functionality. There may be exceptions, but people simply cannot process very large quantities of information, and apps serving far more data than people have any use for aren't just wasting cycles, they are badly designed. Imagine if Google displayed the first 10,000 hits by default, or even 1,000. Most users wouldn't even look beyond the first 5 or so, and the amount of wasted bandwidth...
That said, it may of course not be your fault if the page is badly designed. Or it may be, but you'll need a quick fix before coming back to redesign the solution later. :)
One way to make this happen would be to render the table client-side instead of on the server. If there's nothing else heavy on the page, the user would be served quickly with the other content, and the area where the table will appear could contain an animated GIF or similar to indicate the software is "working". You could use an AJAX-call to fetch the data for the table, and modify the DOM in Javascript. You could then create for instance 100 rows at a time and use
window.setTimeoutto allow the browser to render the updated DOM before continuing.A good article explaining the event dispatch model may be of help if you choose to go down this path:
http://dev.opera.com/articles/view/timing-and-synchronization-in-javascript/
好的，那么如何删除客户端渲染，但在占位符（以及表格）中多次获取和替换服务器端渲染的 HTML？服务器端必须使用后台线程并在其初始响应中提供句柄（例如 GUID），然后 AJAX 调用可以使用该句柄来请求表。服务器可以回复几行以及尚未完成的指示，提示客户端重复此操作直到完成。
我想这会有点混乱，但至少它可以让您使用同一页面来制作报告。查询字符串参数可以告诉页面是完全渲染还是发出脚本来回调以获取数据。
OK, so how about dropping client-side rendering but fetching and replacing server-side rendered HTML within a placeholder (and thus the table) multiple times? The server-side would have to use a background thread and supply a handle (e.g. a GUID) in it's initial response that an AJAX call could then use to ask for the table. The server could reply with a few rows plus an indication that it's not done, prompting the client to repeat this until finished.
I suppose it would be a little messy, but at least it would allow you to use the same page for your report. A query string parameter could tell the page whether to render completely or emit script to call back to get the data.