为什么 HTML 元素只有在所有 CSS 文件加载完后才会显示？

Question

为什么 HTML 元素只有在所有 CSS 文件加载完后才会显示？

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>

10秒后将显示“Hello world”。

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

- user2788132

https://dev59.com/S1PTa4cB1Zd3GeqPk6Ty - gvee

2个回答

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不应该放在底部。

- Armand

2

永远不要在 body 后加载 css。 - Royi Namir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- t.niese · Accepted Answer

当前的浏览器会在链接的样式表完全加载后渲染内容。这样可以避免内容闪烁，否则您总是会在规则未应用到样式表时短暂地看到页面。

由于样式表有10秒的延迟，因此其后面的页面呈现部分也会延迟10秒。

这不仅适用于样式表，还适用于没有使用异步属性加载的脚本。

编辑：针对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树构建算法。优点是，当推测成功时，无需重新解析已经扫描过脚本、样式表和图片的部分传入文件。缺点是，当推测失败时会有更多的工作丢失。