jquery - 浏览器什么时候开始呈现部分传输的 HTML?

标签 jquery html browser spinner flush

我有一个长时间运行的报告,想在它生成时向用户显示一个等待微调器。我已经完成了这项工作,但不确定我是否以最佳或正确的方式完成了这项工作。

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

但是:今天,在观看我的另一个页面逐行显示长期运行作业的状态时,我突然想到该页面在每一行之后刷新,并且浏览器会根据需要逐步呈现。这与我上面的结论不符,现在我不知道规则是什么。有没有一种可预测的方法来做到这一点?它是否因浏览器而异?

澄清:我很欣赏试图解释执行等待微调器的正确方法的答案,但我只是使用等待微调器作为示例来说明我的真正问题:是否有可靠的方法来预测浏览器何时会开始呈现通过网络流式传输给他们的 HTML?通过观察很明显,浏览器不会等待/html 标签开始工作。这个问题不一定与 Javascript 有任何关系。例如,我描述的显示状态的第二个页面是纯 HTML。

最佳答案

除了 Firefox 的内置延迟外,还有其他方面会导致浏览器在呈现之前等待。

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

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

其他标签可能会导致类似的问题。基本上任何时候浏览器必须计算内容的大小,然后它必须呈现所有内容。如果您可以通过使用固定大小(宽度/高度)的元素提前给它提示,那么浏览器不需要弄清楚任何事情,它可以在下载元素时绘制它们。

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

关于jquery - 浏览器什么时候开始呈现部分传输的 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2203751/

相关文章:

jquery - 使用 jQuery 更改 onblur 属性

html - 表格单元格内的下拉菜单会在每次点击时切换表格行高

php - 如何将 icon-linkedin 链接到 Linkedin 个人资料页面?

javascript - Bootstrap 模态对话框在按下 Enter 键时捕获第一个按钮

javascript - 使用 jquery 创建新 DOM 时无法读取 if 语句

javascript - 刷新后保持在同一选项卡上(选项卡中的选项卡)

javascript - 在 jQuery/JavaScript 中为事件/非事件状态切换类

browser - 为什么用户代理/浏览器会撒谎

javascript - 如何确定浏览器UI事件是否具有相同的 "cause"

javascript - 如何通过 Javascript 关闭 "browser suggestions"?