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

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

并且因为样式表有10秒的延迟,页面渲染后的部分也会延迟10秒.

这不仅适用于样式表,也适用于脚本(未加载async属性).

编辑

对Ryan Kinal的评论.浏览器有多个通行证.

一个解析html代码并开始下载找到的资源的人.

并且一个将执行资源并按顺序呈现html的传递.

因此,样式表和脚本不一定按顺序加载.唯一重要的部分是它们按照它们在html结构中出现的顺序被应用/执行.

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

[…] 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. […]

[…] 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. […]

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.

Traditionally in browsers the HTML parser has run on the main thread and has blocked after a 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