举个例子 - sleep 10sec 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 秒后显示
最佳答案
当前浏览器将在链接样式表完全加载后呈现内容。这避免了内容闪烁，否则您总是会在没有应用样式表规则的情况下短时间看到页面。
并且由于样式表有10秒的延迟，页面渲染部分也延迟了10秒。
这不仅适用于样式表，也适用于脚本(未加载异步属性)。
编辑
到Ryan Kinal的评论.浏览器有多个 channel 。
一个解析 html 代码，然后开始下载找到的资源。
一次将执行资源并按顺序呈现 html。
所以样式表和脚本不一定按顺序加载。唯一重要的部分是它们按照它们在 html 结构中出现的顺序应用/执行。
它就像一本施工手册，需要按部就类地做。您可以在构建之前阅读它。订购必要的元素。但只有当您收到该步骤所需的元素时，您才能继续下一步。因此，如果您收到除第一部分以外的所有内容，您将无法开始构建。
Google-Developer: Put CSS in the document head
[...] Browsers block rendering a web page until all external stylesheets have been downloaded. [...] Therefore, it's important to put references to external stylesheets, as well as inline style blocks, in the head of the page. By ensuring that stylesheets are downloaded and parsed first, you can allow the browser to progressively render the page. [...]
Google-Developer: Optimize the order of styles and scripts
[...] Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. However, more importantly for round-trip times, many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them. [...]
MDN: Tips for authoring fast-loading HTML pages: Minimize the number of files
Too much time spent querying the last modified time of referenced files can delay the initial display of a web page, since the browser must check the modification time for each CSS or JavaScript file, before rendering the page.
MDN: Optimizing your pages for speculative parsig
Traditionally in browsers the HTML parser has run on the main thread and has blocked after a
</script>tag until the script has been retrieved from the network and executed. The HTML parser in Firefox 4 and later supports speculative parsing off the main thread. It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5 and 3.6, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox 4 and later the HTML parser also runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fail
关于html - 为什么html元素只在所有css文件加载完成后才显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18853223/