浏览器什么时候开始渲染部分传输的 HTML？

发布于 2024-08-20 06:52:05 字数 642 浏览 9 评论 0原文

我有一个长期运行的报告，并希望在生成报告时向用户显示一个等待旋转器。我已经完成了这项工作，但不确定我是否以最好或正确的方式做这件事。

这是使用 ColdFusion，但我猜它可以是任何语言。在页面顶部，我有一些 Javascript (jQuery)，它显示了一个等待旋转器，另外还有一个 documentReady 处理程序，我可以在其中将旋转器取下来。我刷新输出（如果重要的话），然后其余代码将处理报告内容。这并没有渲染旋转器，我推测，即使我在服务器上刷新东西，但一路上发生了一些缓冲，并且浏览器永远不会看到旋转器代码，直到为时已晚。因此，我在刷新吐出几百行 HTML 注释之前添加了一个循环。微调行数后，就成功了。我当时认为其他网站也是这样做的。

但是：今天，在观看我的另一个页面逐行吐出长期运行作业的状态时，我突然想到该页面会在每行之后刷新，并且浏览器会根据需要增量呈现该页面。这与我上面的结论不符，现在我不知道规则是什么。有没有可预测的方法来做到这一点？每个浏览器都有不同吗？

澄清：我很欣赏尝试解释等待旋转器的正确方法的答案，但我只是使用等待旋转器作为示例来说明我真正的问题：是否有可靠的方法来预测浏览器何时开始渲染HTML 是通过网络传输给他们的吗？通过观察可以明显看出，浏览器不会等待 /html 标签开始工作。这个问题不一定与Javascript有任何关系。例如，我描述的显示状态的第二页是纯 HTML。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可可 2024-08-27 06:52:05

除了 Firefox 的内置延迟之外，还有其他区域会导致浏览器在渲染之前等待。

当 html 页面发送到浏览器时，它首先必须决定内容的去向，然后才能绘制屏幕。例如，表格因导致渲染延迟而臭名昭著。为了绘制表格，浏览器需要计算列大小。如果您使用百分比作为列宽或根本不指定它们，则浏览器必须在渲染之前获取整个表格。

但是，如果您使用诸如 table-layout:fixed; css 属性之类的内容，那么浏览器只能读取第一行并在数据输入时开始绘制。

其他标签可能会导致类似的问题。基本上，每当浏览器必须计算内容的大小时，它就必须渲染所有内容。如果您可以通过使用固定大小（宽度/高度）元素提前给出提示，那么浏览器不需要计算出任何内容，并且可以在下载元素时绘制它们。

作为一条自我强加的规则，我从不让浏览器决定任何事情。相反，我给元素固定大小。因此，我工作的网站通常具有闪电般的快速渲染速度。

回复收藏 0 原文

魔法唧唧 2024-08-27 06:52:05

如果我理解正确，您希望在页面仍在加载内容时显示“正在加载”图像。

我所做的，以及我认为最好的方法是在页面顶部添加一个 div 标签，最接近保存加载图像/文本的 body 标签。您可以借助一些 css 将此 div 放置在其他位置。

然后让 Jquery 在页面加载时删除这个 div。我不会像某些人建议的那样使用 $(document).ready ，而是使用 $(window).load ，因为它是在整个页面完全加载时激活的，包括所有框架、对象和图像。
这里链接； 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>
[...]

...

If I understand you correctly, you want a "loading"-image to display whilst page is still loading up content.

What I do, and what I believe is best way is to add a div-tag at top of your page, closest to body-tag which holds the loading image/text. You can place this div elsewhere with help of some css.

Then have Jquery remove this div when page is loaded. Instead of using $(document).ready as some have recommended i would use $(window).load instead, since it is activated when the complete page is fully loaded, including all frames, objects and images.
Se link here; http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Example;

<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>
[...]

...

回复收藏 0 原文

明月松间行 2024-08-27 06:52:05

--- 澄清后答案 ---

我原来的答案应该对某人有用（我希望），但这不是对问题的直接回答，所以我会发布另一个答案

对你重述的问题的回答是“否”。在FF的情况下，有一个预定义的初始渲染延迟，但其他浏览器会有所不同。 FF 渲染延迟也可以调整。

以 FF 为例，最初的 250 毫秒是 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 准备好之前调用，因此它没有任何效果，这就是为什么您会看到显示“Placeholder Two”（而不是“Placeholder One”） ") 如果您在网络浏览器中运行上面的标记。

既然我们已经解决了这个问题，那么更大问题（“正确的方法”）的解决方案就是 AJAX。

加载包含微调器代码的基页。确保加载微调器的代码作为 $(document).ready() 的一部分运行。
使用 jQuery 的 AJAX 功能获取您想要的报告。
当它返回时，隐藏微调器，将报告插入到您的基页中。

祝你好运！

--- Post-clarification Answer ---

My original answer should be useful to someone (I hope), but it isn't a direct response to the question, so I'll post another answer

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.

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.

There is no way for you to determine when the browser has started to render the HTML document.

--- Original Answer ---

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.

However, you don't want to go that route.

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.

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>

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.

Now that we have that out of the way, the solution to the larger problem (the "right way") is 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.

Good luck!

回复收藏 0 原文