浏览器渲染原理
1. 浏览器在接收到服务器返回的html页面后，
2. 浏览器开始构建DOM树DOM TREE，遇到CSS样式会构建CSS规则树CSS RULE TREE，
3. 遇到javascript会通过DOM API和CSSDOM API来操作DOM Tree和CSS Rule Tree，解析完成后，
4. 浏览器引擎会通过DOM Tree 和CSS Rule Tree 来构造 Rendering Tree（渲染树），
5. 最后，渲染树构建完成后就是 "布局" 处理，也就是确定每个节点在屏幕上的确切显示位置
6. 下个步骤（渲染之后），开始 "绘制" ，遍历渲染树，并用UI后端层，将每一个节点绘制出来。
浏览器渲染页面和加载页面的常规流程
为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个可以先从下面这个常规流程开始：
1. 浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4. 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
6. JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
这里关键的是第2-5这三点。渲染效率与下面三点有关：
1. css选择器的查询定位效率
2. 浏览器的渲染模式和算法
3. 要进行渲染内容的大小
css 渲染规则
css样式规则渲染是先就近渲染，从上到下，从右到左；然后依据选择符权重进行渲染。
.main h4 a { font-size: 14px; }渲染过程是这样的：首先先找到所有的 a，沿着 a 的父元素查找h4，然后再沿着 h4，查找.main。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素的 html 都没有匹配，则这条路径不再遍历。下一个 a 开始重复这个查找匹配，直至没有a继续查找。
浏览器的这种查找规则是为了尽早过滤掉一些无关的样式规则和元素。
css选择器权值
权值，代表着优先级，权值越大，优先级越高。同种类型的选择器权值相同，后定义的选择器会覆盖先定义的选择器。
important最高
内联： 1000
ID： 100
Class：10
Tag： 1
注： 组合使用，权值会叠加
影响DOM树构建的因素
HTML响应流被阻塞在网络中
有加载未完成的脚本
遇到<script>, 但是此时还有未加载完的样式文件
浏览器对CSS的匹配原理
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的DIV#divBox p span.red{color:red;}，浏览器 的查找顺序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为 divBox的div元素，如果都存在则CSS匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。firefox称这种查 找方式为keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
想要了解更多相关知识，可访问 前端学习网站！！
以上就是css样式如何渲染？的详细内容，更多请关注0133技术站其它相关文章！
