浏览器什么时候开始渲染部分传输的HTML？
我有一个长期运行的报告，并希望在用户生成时向用户显示一个等待微调。 我已经完成了这项工作，但不知道我是以最好还是最正确的方式做到这一点。
这是使用ColdFusion，但它可以是我猜测的任何语言。 在页面的顶部，我有一些Javascript（jQuery），它显示了一个等待微调，另外还有一个documentReady处理程序，我将微调器放下。 我刷新输出（如果它很重要），然后代码的其余部分工作在报告内容上。 这并没有渲染微调，我推理说，即使我在服务器上刷新了一些东西，但是一路上发生了一些缓冲，浏览器从来没有看到微调代码，直到太晚。 所以，我在刷新之前添加了一个循环，吐出几百行HTML注释。 在微调了行数之后，这就实现了。 那么我就认为这就是其他网站也是这样做的。
但是：今天，在观察我的一个不同的页面时，我发现在每行之后刷新页面并且浏览器根据需要递增地呈现。 这与我上面的结论不符，现在我不知道规则是什么。 有没有一种可预测的方式来做到这一点？ 它是否因浏览器而异？
澄清：我赞赏试图解释做一个等待微调的正确方法的答案，但我只是用一个等待微调的例子来说明我真正的问题：是否有可靠的方法来预测浏览器何时开始渲染HTML是通过网络传输给他们的？ 通过观察显而易见，浏览器不会等待/ html标签开始工作。 这个问题并不一定与Javascript有关。 例如，我描述的第二页显示的状态是纯HTML。
---澄清后答案---
我的原始答案应该对某人有用（我希望），但这不是对问题的直接回应，所以我会发布另一个答案
你重申的问题的答案是“否”。 在FF的情况下，有一个预定义的初始渲染延迟，但其他浏览器会有所不同。 FF渲染延迟也可以调整。
以FF为例，最初的250ms是FF在尝试第一次渲染之前至少查找一些有用信息的时间。 随着它学习更多，它会定期进行额外的渲染。
您无法确定浏览器何时开始呈现HTML文档。
---原始答案---
为了直接回答你的问题，我认为Firefox在收到第一批数据之前等待250毫秒，但这可以改变。 对于其他浏览器，我不知道。
但是，你不想走那条路。
当jQuery准备好使用它的魔法时，它会通过触发$(document).ready()让你知道。 在此之前，任何使用jQuery的尝试都将失败。 换句话说，你的微调没有显示出来，因为jQuery还没有准备好处理那个请求。
考虑下面的例子，其中两个占位符显示在屏幕上，我们将使用jQuery来隐藏它们。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
// We're not ready yet. This will fail.
$(".placeholder").hide();
$(document).ready(function(){
// This won't fail
$("#one").hide();
});
</script>
</head>
<body>
<div id="one" class="placeholder">Placeholder One</div>
<div id="two" class="placeholder">Placeholder Two</div>
</body>
</html>
它可能首先出现$("#one").hide(); 是多余的，但事实并非如此。 $(".placeholder").hide(); 在jQuery准备好之前调用，所以它没有任何作用，这就是为什么如果您在Web浏览器中运行上面的标记，您将看到“Placeholder Two”（而不是“Placeholder One”）。
现在我们已经做到了，解决更大问题（“正确的方式”）的解决方案就是AJAX。
$(document).ready()一部分运行。 祝你好运！
如果我理解正确，则希望显示“加载”图像，同时页面仍在加载内容。
我所做的和我认为最好的方法是在页面顶部添加一个div标签，最接近包含加载图像/文本的body标签。 你可以把这个div放在其他地方的某个css的帮助下。
然后让Jquery在页面加载时删除这个div。 而不是使用$（document）.ready，因为有些人建议我使用$（window）.load代替，因为它在完整加载完整页面（包括所有框架，对象和图像）时被激活。
Se链接在这里; http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
例;
<body>
<div id="loading" style="z-index:200; width:100%; height:40px; border-top:2px #D4D4D4 solid; background:#E8E8E8; color:#000; position:fixed; bottom:0; left:0;">
<div align="center">
<img src="load.gif" alt="Loading...">
</div>
</div>
<script type="text/javascript">
$(window).load(function() { $("#loading").remove(); });
</script>
[...]
...
除了Firefox的内置延迟之外，还有其他一些区域会导致浏览器在渲染之前等待。
当一个html页面被发送给浏览器时，它首先必须确定事物发生的位置，然后才能绘制屏幕。 例如，表格因渲染延迟而臭名昭着。 为了绘制表格，浏览器需要计算列大小。 如果使用百分比作为列宽或者根本不指定它们，那么浏览器必须在呈现之前获取整个表。
但是，如果您使用类似table-layout: fixed;东西table-layout: fixed; css属性，那么浏览器可以读取第一行，并在数据输入给它时开始绘制。
其他标签可能导致类似的问题。 基本上任何时候浏览器都必须计算内容的大小，那么它必须具有所有内容才能呈现。 如果您可以通过使用固定尺寸（宽度/高度）元素提前提示，那么浏览器不需要计算任何内容，并且可以在下载元素时绘制它们。
作为一种自我强加的规则，我从不让浏览器确定任何东西。 相反，我给我的元素固定大小。 因此，我工作的网站通常具有闪电般的渲染效果。
链接地址: http://www.djcxy.com/p/44569.html上一篇: When do browsers start to render partially transmitted HTML?