css渲染原理

css渲染原理

• 浏览器渲染原理
  • 浏览器接收到服务器返回的html页面。
  • 浏览器开始构建DOM树（DOM TREE），遇到css样式会构建CSS规则树(css RULE TREE)。
  • 遇到javascript会通过DOM API和CSSDOM API来操作DOM Tree和CSS Rule Tree。
  • 解析完成后，浏览器会通过DOM Tree和CSS Rule Tree来构造Rendering Tree（渲染树）。
  • 最后，渲染树构建完成后就是“布局”处理，也就是确定每个节点在屏幕上的确切显示位置。
  • 渲染之后，开始“绘制”，遍历渲染树，并用UI后断层，将每一个节点绘制出来。
• css渲染规则
  • css的渲染规则，是从上到下，从右到左渲染的。

.main h4 a {font-size: 14px}

• 渲染过程是这样的：首先先找到所有的a，沿着a的父元素查找h4，然后再沿着h4，查找.main。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素的html都没有匹配，则这条路径不再遍历。下一个a开始重复这个查找匹配，直到没有a继续查找。
  -浏览器的这种查找规则就是为了尽早过滤掉一些无关的样式规则和元素。
• 页面渲染与执行过程
  • 通过一个例子，我们来详细看看页面渲染和执行过程到底是怎么工作的：

  
    
    
Hi here
    
    
Hi again
    
  

1. 解析器遇到了example.css，并将它从网络中下载下来。下载样式表的过程是耗时的，但是解析器并没有被阻塞，继续往下解析
2. 解析器遇到