0

是否所有浏览器在至少<style>下载一个嵌入式标签或至少一个外部 CSS 文件后立即开始渲染，还是等到页面中链接的所有外部 CSS 文件都下载完毕？

4

2 回答 2

2

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

这篇文章“浏览器的工作原理”更详细，其中一个参考资料是官方的CSS 2.1 处理模型。这由六个步骤组成，特别是

  1. ...
  2. ...
  3. 检索与为目标媒体类型指定的文档关联的所有样式表。
  4. ...
  5. ...
  6. 将格式化结构传输到目标介质
于 2013-02-22T19:50:58.327 回答
0

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

资源

浏览器同时运行多个线程来下载资源。样式表、html、脚本它们都在不同的线程中运行，对于 html，浏览器不会等待它开始创建的所有内容，DOM tree并且render tree只要样式数据可用，它们就会同时构建。因此，简而言之，浏览器会在内存中为样式规则创建一个映射树，但除非下载了所有 CSS，否则它不会绘制它。

您可能已经在 firebug 中看到所有 css 都是异步下载的，并且注意到 DOM 已经更改了很多次，这是因为脚本更改了 css 并且重新创建了渲染框架。

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

于 2013-02-22T20:00:04.853 回答