just for example - sleep 10sec css file
例如，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 will be shown in 10 sec
《你好，世界》将在10秒后上映
http://plnkr.co/edit/HyueD8agoYVmCfuRwjGJ?p=preview
http://plnkr.co/edit/HyueD8agoYVmCfuRwjGJ?p=preview
2 个解决方案
#1
9
Current browsers will render the content after the linked stylesheets when these are fully loaded. This avoids content flickering otherwise you would always see the pages for a short time without the rules of the stylesheets being applied.
当链接样式表被完全加载时，当前浏览器将在它们之后呈现内容。这避免了内容的闪烁，否则您将在很短的时间内看到页面，而不会应用样式表的规则。
And because the stylesheet has a delay of 10 seconds the part of page rendering after it is delayed also for 10 secs.
由于样式表有10秒的延迟，所以页面呈现部分在延迟10秒后也会延迟10秒。
This is not only true for stylesheets but also for scripts (that are not loaded with the async attribute).
这不仅适用于样式表，也适用于脚本(不加载async属性)。
EDIT To the comment of Ryan Kinal. The browsers have multiple passes. One that parses the html code and that will start to download the found resources. And one pass that will execute the resource and render the html in order. So the stylesheets and scripts are not necessarily loaded in order. The only important part is that they are applied/executed in the order they appear in the html structure.
编辑评论Ryan Kinal。浏览器有多个通行证。解析html代码并开始下载找到的资源。一个传递将执行资源并按顺序呈现html。因此样式表和脚本不必按顺序加载。唯一重要的是，它们是按照html结构中出现的顺序应用/执行的。
It is like a construction manual where it is required to do the things step by step. You can read it before you build. Order the necessary items. But you can only continue with the next step at the time when you receive the necessary items for that step. So if you received everything except the first part you can't start building.
它就像一个建筑手册，要求它一步一步地完成工作。您可以在构建之前阅读它。必要的物品。但是您只能在接收到该步骤所需的项目时继续下一步。所以如果你收到除了第一部分以外的所有东西，你就不能开始建造。
Google-Developer: Put CSS in the document head
Google-Developer:将CSS放在文档头部
[...] 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
Google-Developer:优化样式和脚本的顺序
[...] 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. [...]
[…]因为JavaScript代码可以改变web页面的内容和布局，所以浏览器延迟呈现脚本标签之前的内容，直到脚本被下载、解析和执行。然而，更重要的是，对于往返时间，许多浏览器会在脚本之后阻止文档中引用的资源的下载，直到这些脚本被下载并执行。另一方面，如果在引用JS文件时，其他文件已经在下载过程中，那么JS文件将与它们并行下载。[…]
MDN: Tips for authoring fast-loading HTML pages: Minimize the number of files
MDN:编写快速加载HTML页面的技巧:减少文件的数量
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.
花费太多时间查询引用文件的最后修改时间会延迟web页面的初始显示，因为浏览器必须在呈现页面之前检查每个CSS或JavaScript文件的修改时间。
MDN: Optimizing your pages for speculative parsig
MDN:为投机的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解析器在主线程上运行，并在标记后阻塞，直到从网络检索到脚本并执行。Firefox 4和后续版本中的HTML解析器支持对主线程进行投机性解析。在下载和执行脚本时，它会提前解析。在Firefox 3.5和3.6中，HTML解析器开始对脚本、样式表和在流中找到的图像进行推测性加载。然而，在Firefox 4和后来的HTML解析器中，也推测地运行HTML树构建算法。好处是，当投机成功时，不需要重新解析已经扫描了脚本、样式表和图像的传入文件的部分。不利的一面是，当投机失败时，会有更多的工作流失。
#2
0
Sorry original answer I read question incorrectly:
对不起，原来的答案我读错了问题:
Ok so the browser interprets html files from top to bottom, this will cause it to download any files that are linked to it before rendering the actual html.
浏览器从上到下解释html文件，这将导致它在呈现实际的html之前下载所有链接到它的文件。
Because of this it is recommended to load JavaScript at the bottom of the file as an example as they can get pretty big.
因此，建议将JavaScript加载到文件底部作为示例，因为它们可能会变得非常大。
I have not really seen a real big css file, in terms of actual file size that can cause a very large delay.
我还没有看到一个真正的大css文件，就实际的文件大小而言，它会导致非常大的延迟。
I also do not know what the implication are of loading css at the bottom of the html, maybe someone can clarify this.
我也不知道在html底部加载css意味着什么，也许有人可以澄清这一点。
Try:
试一试:
<!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>
UPDATE
更新
See answer by t.niese why css should not be at the bottom
看到回答t。为什么css不应该在底部
#1
9
Current browsers will render the content after the linked stylesheets when these are fully loaded. This avoids content flickering otherwise you would always see the pages for a short time without the rules of the stylesheets being applied.
当链接样式表被完全加载时，当前浏览器将在它们之后呈现内容。这避免了内容的闪烁，否则您将在很短的时间内看到页面，而不会应用样式表的规则。
And because the stylesheet has a delay of 10 seconds the part of page rendering after it is delayed also for 10 secs.
由于样式表有10秒的延迟，所以页面呈现部分在延迟10秒后也会延迟10秒。
This is not only true for stylesheets but also for scripts (that are not loaded with the async attribute).
这不仅适用于样式表，也适用于脚本(不加载async属性)。
EDIT To the comment of Ryan Kinal. The browsers have multiple passes. One that parses the html code and that will start to download the found resources. And one pass that will execute the resource and render the html in order. So the stylesheets and scripts are not necessarily loaded in order. The only important part is that they are applied/executed in the order they appear in the html structure.
编辑评论Ryan Kinal。浏览器有多个通行证。解析html代码并开始下载找到的资源。一个传递将执行资源并按顺序呈现html。因此样式表和脚本不必按顺序加载。唯一重要的是，它们是按照html结构中出现的顺序应用/执行的。
It is like a construction manual where it is required to do the things step by step. You can read it before you build. Order the necessary items. But you can only continue with the next step at the time when you receive the necessary items for that step. So if you received everything except the first part you can't start building.
它就像一个建筑手册，要求它一步一步地完成工作。您可以在构建之前阅读它。必要的物品。但是您只能在接收到该步骤所需的项目时继续下一步。所以如果你收到除了第一部分以外的所有东西，你就不能开始建造。
Google-Developer: Put CSS in the document head
Google-Developer:将CSS放在文档头部
[...] 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
Google-Developer:优化样式和脚本的顺序
[...] 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. [...]
[…]因为JavaScript代码可以改变web页面的内容和布局，所以浏览器延迟呈现脚本标签之前的内容，直到脚本被下载、解析和执行。然而，更重要的是，对于往返时间，许多浏览器会在脚本之后阻止文档中引用的资源的下载，直到这些脚本被下载并执行。另一方面，如果在引用JS文件时，其他文件已经在下载过程中，那么JS文件将与它们并行下载。[…]
MDN: Tips for authoring fast-loading HTML pages: Minimize the number of files
MDN:编写快速加载HTML页面的技巧:减少文件的数量
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.
花费太多时间查询引用文件的最后修改时间会延迟web页面的初始显示，因为浏览器必须在呈现页面之前检查每个CSS或JavaScript文件的修改时间。
MDN: Optimizing your pages for speculative parsig
MDN:为投机的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解析器在主线程上运行，并在标记后阻塞，直到从网络检索到脚本并执行。Firefox 4和后续版本中的HTML解析器支持对主线程进行投机性解析。在下载和执行脚本时，它会提前解析。在Firefox 3.5和3.6中，HTML解析器开始对脚本、样式表和在流中找到的图像进行推测性加载。然而，在Firefox 4和后来的HTML解析器中，也推测地运行HTML树构建算法。好处是，当投机成功时，不需要重新解析已经扫描了脚本、样式表和图像的传入文件的部分。不利的一面是，当投机失败时，会有更多的工作流失。
#2
0
Sorry original answer I read question incorrectly:
对不起，原来的答案我读错了问题:
Ok so the browser interprets html files from top to bottom, this will cause it to download any files that are linked to it before rendering the actual html.
浏览器从上到下解释html文件，这将导致它在呈现实际的html之前下载所有链接到它的文件。
Because of this it is recommended to load JavaScript at the bottom of the file as an example as they can get pretty big.
因此，建议将JavaScript加载到文件底部作为示例，因为它们可能会变得非常大。
I have not really seen a real big css file, in terms of actual file size that can cause a very large delay.
我还没有看到一个真正的大css文件，就实际的文件大小而言，它会导致非常大的延迟。
I also do not know what the implication are of loading css at the bottom of the html, maybe someone can clarify this.
我也不知道在html底部加载css意味着什么，也许有人可以澄清这一点。
Try:
试一试:
<!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>
UPDATE
更新
See answer by t.niese why css should not be at the bottom
看到回答t。为什么css不应该在底部