是否所有浏览器都需要至少一种样式信息才能开始渲染?

时间:2013-02-22 19:46:57

标签: css

一旦所有浏览器至少有一个嵌入式<style>标记或至少下载了一个外部CSS文件,或者等到页面中链接的所有外部CSS文件都被下载,它们是否会立即开始呈现?< / p>

2 个答案:

答案 0 :(得分:2)

对外部脚本或样式表的所有显式引用都将阻止所有后续页面呈现,直到下载并执行资源为止。

本文“How browsers work”详细介绍,其中一个参考文献是官方CSS 2.1 processing model。这由六个步骤组成,特别是

  
      
  1. ...
  2.   
  3. ...
  4.   
  5. 检索与为目标媒体类型指定的文档关联的所有样式表。
  6.   
  7. ...
  8.   
  9. ...
  10.   
  11. 将格式化结构传输到目标媒体
  12.   

答案 1 :(得分:0)

对于html,渲染引擎会尽快在屏幕上显示内容。在开始构建和布局渲染树之前,它不会等到解析所有HTML。  另一方面,样式表具有不同的模型。从概念上讲,似乎由于样式表不会更改DOM树,因此没有理由等待它们并停止文档解析。但是,在文档解析阶段要求样式信息的脚本存在问题。如果尚未加载和解析样式,脚本将得到错误的答案,显然这会导致很多问题。这似乎是一个边缘案例,但很常见。

<强> Source

浏览器同时运行多个线程以进行资源下载。样式表,html,脚本都在不同的线程中运行,对于html,浏览器不等待它开始创建DOM tree的所有内容,并且render tree并排也在构建样式数据可用。 因此,在简短的浏览器中,在内存中为样式规则创建了一个地图树,但除非下载了所有css,否则它不会绘制它。

你可能已经在firebug中看到所有css都是异步下载的,并且发现DOM已经多次改变了,因为脚本改变了css并重新渲染了渲染帧。

仅供参考:当有一个仍在加载和解析的样式表时,Firefox会阻止所有脚本。 Webkit仅在尝试访问可能受卸载样式表影响的某些样式属性时阻止脚本。