当你的浏览器开始呈现部分传输HTML？ [英] When do browsers start to render partially transmitted HTML?
问题描述
我有一个长期运行的报告，并想展示等待微调给用户，而它的产生。我做这项工作了，不过我不知道我做的最好的还是正确的方式。
I have a long-running report and want to show a wait-spinner to the user while it's generating. I have made this work already but am not sure I'm doing it the best or right way.
这是使用ColdFusion，但它可能是我想任何语言。在页面的顶部，我有一些JavaScript（jQuery的），显示了等待加微调有一个documentReady处理程序，我把微调了下来。我刷新输出（如果它的事项），然后将code的其余部分工作于报告内容。这是有史以来没有渲染的微调，我的理论是，即使我在服务器上冲的东西，一些缓冲被沿途的发生和浏览器从来没有见过微调code，直到为时已晚。所以，我增加了一个循环之前，我是冲吐出的HTML注释几百行。经过微调的行数，即做的伎俩。我以为那么这是其他网站是如何做到这一点。
This is using ColdFusion but it could be any language I guess. At the top of the page, I have some Javascript (jQuery) that shows a wait-spinner plus there's a documentReady handler where I take the spinner down. I flush the output ( if it matters) and then the rest of the code works on the report contents. This wasn't ever rendering the spinner and I theorized that, even though I was flushing things on the server, some buffering was happening along the way and the browser never saw the spinner code until too late. So, I added a loop right before I flushed that spit out a few hundred lines of HTML comments. After fine-tuning the number of lines, that did the trick. I assumed then that that's how other sites did it too.
不过：今天，一边看不同的页面我那吐出通过一个长期运行的工作线路状态的线路，它发生，我认为每一行和浏览器后页面刷新将呈现逐步应有的作用。这并不符合上面我的结论，现在我不知道规则是什么。是否有一个predictable方式做到这一点？每个浏览器是否有所不同？
But: Today, while watching a different page of mine that spits out a line by line status of a long-running job, it occurred to me that that page flushes after each line and the browser renders that incrementally as desired. This doesn't match my conclusion from above and now I don't know what the rules are. Is there a predictable way to do this? Does it vary per browser?
澄清：我AP preciate试图解释正确的方式做一个等待微调，但我只是用一个等待微调作为一个例子来说明我的真正的问题的答案：是否有可靠的方法来predict时，浏览器将开始呈现HTML，因为它是过网传输到他们吗？很明显，通过观察发现，浏览器不等待/ html标记开始工作。这个问题并不一定有什么做的JavaScript。例如，这第二页我描述，显示状态为纯HTML。
CLARIFICATION: I appreciate the answers that attempt to explain the correct way to do a wait-spinner but I'm just using a wait-spinner as an example to illustrate my real question: are there reliable ways to predict when browsers will start to render HTML as it is streamed to them over the net? It's obvious through observation that browsers don't wait for the /html tag to start work. This question doesn't necessarily have anything to do with Javascript. For instance, that second page I describe that shows status is pure HTML.
推荐答案
---后澄清答案---
--- Post-clarification Answer ---
的我原来的答案应该是有人（我希望）是有用的，但它是不是问题的直接回应，所以我会发布另一个答案的
回答你的问题，重述是不。在FF的情况下，有一个predefined初始呈现延迟，但其他的浏览器会有所不同。这FF延迟渲染可以调整为好。
The answer to your restated question is "no". In the case of FF, there is a predefined initial render delay, but other browsers will be different. That FF render delay can be tweaked as well.
使用FF作为一个例子，那些最初的250毫秒的时间FF找出至少的部分的有用的尝试之前信息的第一渲染。然后，它不附加定期渲染，因为它更多的学习
Using FF as an example, those initial 250ms are time for FF to find out at least some useful information before attempting the first render. It then does additional renders periodically as it learns more.
有没有办法让你决定当浏览器已经开始呈现HTML文档。
There is no way for you to determine when the browser has started to render the HTML document.
---原来的答案---
--- Original Answer ---
要直接回答你的问题，我认为Firefox的作用在收到第一个数据之前等待250毫秒，但是这是可以改变的。对于其他浏览器，我不知道。
To directly answer your question, I believe Firefox waits 250ms before acting on the first data received, but that can be changed. For other browsers, I don't know.
但是，你不想去的路线。
在jQuery是做好准备工作它的魔力，它会让你知道烧成 $（文件）。就绪（）。在此之前，任何企图利用jQuery将失败。换句话说，你的微调没有显示出来，因为jQuery是没有准备好处理该请求呢。
When jQuery is ready to work its magic, it'll let you know by firing $(document).ready(). Before then, any attempt to use jQuery will fail. In other words, your spinner isn't showing up because jQuery isn't ready to process that request yet.
看看下面的例子，其中两个占位符显示在屏幕上，我们将使用jQuery来隐藏它们。
Consider the following example, where two placeholders are shown on-screen, and we'll use jQuery to hide them.
<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>
它可能会出现在：第一， $（＃1）隐藏（）; 是多余的，但事实并非如此。 $（占位符。）隐藏（）; 是jQuery的调用之前准备好，所以也没有任何影响，这就是为什么你会看到两个占位符显示（而不是一个占位符），如果你运行上面在Web浏览器的标记。
It may appear at first that $("#one").hide(); is redundant, but that's not true. $(".placeholder").hide(); is called before jQuery is ready, so it has no effect, which is why you'll see "Placeholder Two" displayed (and not "Placeholder One") if you run the markup above in a web browser.
现在，我们有出的方式，解决更大的问题（正道）是AJAX。
Now that we have that out of the way, the solution to the larger problem (the "right way") is AJAX.
- 加载包含微调code基页。确保code将微调运行作为负荷的一部分
$（文件）。就绪（）。 - 使用 jQuery的AJAX功能得到你想要的报告。
- 当它回来，隐藏微调，注入报告到你的基本页面。
- Load a base page that contains the spinner code. Make sure the code to load the spinner runs as part of
$(document).ready(). - Use jQuery's AJAX functionality to get the report you want.
- When it comes back, hide the spinner, inject the report into your base page.
祝你好运！
这篇关于当你的浏览器开始呈现部分传输HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
