4

仅举例 - 睡眠 10 秒 css 文件

<!DOCTYPE html>
<html>
<head>
    <link href='http://2.cuzillion.com/bin/resource.cgi?type=css&sleep=10&n=2&t=1379426970&.css?v=1010' rel='stylesheet' />
</head>
<body>
   <h1>Hello World!</h1>
</body>
</html>

Hello World 将在 10 秒后显示

http://plnkr.co/edit/HyueD8agoYVmCfuRwjGJ?p=preview

4

2 回答 2

9

当前浏览器将在链接样式表完全加载后呈现内容。这样可以避免内容闪烁，否则您总是会在短时间内看到页面而没有应用样式表的规则。

并且因为样式表有 10 秒的延迟，所以在它之后的页面渲染部分也延迟了 10 秒。

这不仅适用于样式表，也适用于脚本（未使用 async 属性加载）。

编辑 到评论Ryan Kinal。浏览器有多个通行证。解析html代码并开始下载找到的资源的一种。一个将执行资源并按顺序呈现 html 的过程。所以样式表和脚本不一定按顺序加载。唯一重要的部分是它们按照它们在 html 结构中出现的顺序被应用/执行。

这就像一本施工手册，需要一步一步地做事。您可以在构建之前阅读它。订购必要的物品。但只有在您收到该步骤所需的物品时，您才能继续下一步。因此，如果您收到除了第一部分之外的所有内容，您将无法开始构建。

Google-Developer：将 CSS 放在文档头部

[...] 在下载所有外部样式表之前，浏览器会阻止呈现网页。[...] 因此，将外部样式表的引用以及内联样式块放在页面的头部很重要。通过确保首先下载和解析样式表，您可以允许浏览器逐步呈现页面。[...]

Google-Developer：优化样式和脚本的顺序

[...] 因为 JavaScript 代码可以改变网页的内容和布局，所以浏览器会延迟渲染脚本标记之后的任何内容，直到该脚本被下载、解析和执行。然而，对于往返时间来说更重要的是，许多浏览器会在脚本之后阻止文档中引用的资源的下载，直到这些脚本被下载并执行。另一方面，如果引用一个JS文件时其他文件已经在下载过程中，则JS文件与它们并行下载。[...]

MDN：创作快速加载 HTML 页面的技巧：最小化文件数量

花太多时间查询引用文件的最后修改时间会延迟网页的初始显示，因为浏览器必须在呈现页面之前检查每个 CSS 或 JavaScript 文件的修改时间。

MDN：优化您的页面以进行推测性分析

传统上，在浏览器中，HTML 解析器在主线程上运行，并在</script>标记后阻塞，直到从网络中检索并执行脚本。Firefox 4 及更高版本中的 HTML 解析器支持对主线程进行推测解析。它在下载和执行脚本时提前解析。与 Firefox 3.5 和 3.6 一样，HTML 解析器开始推测加载它在流中提前找到的脚本、样式表和图像。但是，在 Firefox 4 及更高版本中，HTML 解析器也投机地运行 HTML 树构造算法。好处是，当推测成功时，无需重新解析已扫描脚本、样式表和图像的传入文件部分。缺点是投机失败时会丢失更多的工作

于 2013-09-17T15:02:48.877 回答
0

对不起原始答案我读错了问题：

好的，所以浏览器从上到下解释 html 文件，这将导致它在呈现实际 html 之前下载链接到它的任何文件。

因此，建议在文件底部加载 JavaScript 作为示例，因为它们可能会变得非常大。

就实际文件大小而言，我还没有真正看到过真正的大 css 文件，这可能会导致非常大的延迟。

我也不知道在html底部加载css意味着什么，也许有人可以澄清一下。

尝试：

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>
       <h1>Hello Plunker!</h1>
   </body>
  <link href='http://2.cuzillion.com/bin/resource.cgi?type=css&sleep=10&n=2&t=1379426970&.css?v=1010' rel='stylesheet' />
</html>

更新

请参阅 t.niese 的回答，为什么 css 不应位于底部

于 2013-09-17T15:00:52.073 回答