html怎么渲染到css,css是怎么渲染的？

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验。简单地说，页面渲染就是浏览器将html代码根据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 渲染规则

css的渲染规则，是从上到下，从右到左渲染的。

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

渲染过程是这样的：首先先找到所有的 a，沿着 a 的父元素查找h4，然后再沿着 h4，查找.main。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素的 html 都没有匹配，则这条路径不再遍历。下一个 a 开始重复这个查找匹配，直至没有a继续查找。

好处：为了尽早过滤掉一些无关的样式规则和元素。firefox称这种查 找方式为keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则。

更多前端开发知识，请查阅 HTML中文网 ！！