一旦所有浏览器至少有一个嵌入式<style>
标记或至少下载了一个外部CSS文件,或者等到页面中链接的所有外部CSS文件都被下载,它们是否会立即开始呈现?< / p>
答案 0 :(得分:2)
对外部脚本或样式表的所有显式引用都将阻止所有后续页面呈现,直到下载并执行资源为止。
本文“How browsers work”详细介绍,其中一个参考文献是官方CSS 2.1 processing model。这由六个步骤组成,特别是
- ...
- ...
- 检索与为目标媒体类型指定的文档关联的所有样式表。
- ...
- ...
- 将格式化结构传输到目标媒体
醇>
答案 1 :(得分:0)
对于html,渲染引擎会尽快在屏幕上显示内容。在开始构建和布局渲染树之前,它不会等到解析所有HTML。 另一方面,样式表具有不同的模型。从概念上讲,似乎由于样式表不会更改DOM树,因此没有理由等待它们并停止文档解析。但是,在文档解析阶段要求样式信息的脚本存在问题。如果尚未加载和解析样式,脚本将得到错误的答案,显然这会导致很多问题。这似乎是一个边缘案例,但很常见。
<强> Source 强>
浏览器同时运行多个线程以进行资源下载。样式表,html,脚本都在不同的线程中运行,对于html,浏览器不等待它开始创建DOM tree
的所有内容,并且render tree
并排也在构建样式数据可用。 因此,在简短的浏览器中,在内存中为样式规则创建了一个地图树,但除非下载了所有css,否则它不会绘制它。
你可能已经在firebug中看到所有css都是异步下载的,并且发现DOM已经多次改变了,因为脚本改变了css并重新渲染了渲染帧。
仅供参考:当有一个仍在加载和解析的样式表时,Firefox会阻止所有脚本。 Webkit仅在尝试访问可能受卸载样式表影响的某些样式属性时阻止脚本。