Question

仅举例 - 睡眠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

Answer 1

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

因为样式表有10秒的延迟，所以页面渲染后的部分也会延迟10秒。

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

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

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

<强> Google-Developer: Put CSS in the document head


[...]浏览器阻止呈现网页，直到下载了所有外部样式表。 [...]因此，在页面的顶部放置对外部样式表以及内联样式块的引用非常重要。通过确保首先下载和解析样式表，您可以允许浏览器逐步呈现页面。 [...]

<强> Google-Developer: Optimize the order of styles and scripts


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

<强> MDN: Tips for authoring fast-loading HTML pages: Minimize the number of files


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

<强> MDN: Optimizing your pages for speculative parsig


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

Answer 2

抱歉原始回答我错误地读了问题：

好的浏览器从上到下解释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不应该在底部

为什么html元素只在加载所有css文件时显示

2 个答案: