CSS-浏览器加载Css的过程

  1. 浏览器加载html（从网络下载）；
  2. 转换HTML为DOM (Document Object Model). DOM会被存放在计算机的内存里面。
  3. 浏览器会抓取HTML文档里面的linked的资源，比如：图片、视频以及CSS，JavaScript的处理会晚一点。
  4. 浏览器解析抓取到的css，根据不同的规则（rules）分类，比如：element，class，ID等等。基于找到的selectors，计算出那个rule需要应用到那个dom的哪个节点，然后根据需要附加样式（这个中间过程叫做：渲染树）。
  5. 规则被应用后，这个渲染树（render tree)在应该出现的结构中布局。(The render tree is laid out in the structure it should appear in after the rules have been applied to it.)
  6. 可视化的页面展现在屏幕上。 (this stage is called painting).

图: rendering.svg
The following diagram also offers a simple view of the process.


rendering.svg 66.2 KB



阅读量: 399
发布于:
修改于: