浏览器渲染过程:
<img>
标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;<div><span><ul><li>
们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。简单来说,浏览器渲染一共有五步,
1.解析HTML标签,构建DOM树。
2.解析CSS标签,构建CSSOM树。
我们已经看到html解析器碰到脚本后会做的事情,接下来我们看下html解析器碰到样式表会发生的情况
js会阻塞解析,因为它会修改文档(document)。css不会修改文档的结构,如果这样的话,似乎看起来css样式不会阻塞浏览器html解析。但是事实上 css样式表是阻塞的。阻塞是指当cssom树建立好之后才会进行下一步的解析渲染。
所有的样式表都会被解析成cssom对象模型(就和dom树一样展现结构),每一个页面element都会被许多css规则匹配
- 匹配顺序:origin => weight => specificity
- css origin
-作者自定义
-浏览器使用者定义
-userAgent 定义
- css weight
-normal weight
-!important weight
- css specificity (我们最应该关注的点)
注意:!important 已经被css的作者引入了浏览器,用来覆盖页面样式。
本来这个方式并不是给开发者使用的,在样式表中使用!important 会让我们忽略specificity 真正工作的原理。
- specificity 是css令人困惑的主要来源。specificity规则由(a,b,c,d)的规则决定。
-a : 值为1(当样式放在style属性中的时候),0为其它情况
-b : id在样式规则中出现的次数 eg:#slide #hello p的值就是2
-c : class,伪类,和属性在样式中出现的次数 eg:input[type=email]值就是2
-d : 标签个数(tag names)和伪类元素出现的次数
例如:
Example:
HTML
<div id=”sidebar”>
<div id=”widget” class=”class-div”>
<span class=”span-class” style=”color: red”>Hello, world!</span>
</div>
</div>
CSS
.span-class { /* Specificity (0, 0, 1, 0) */
color: green;
}
#sidebar #widget { /* Specificity (0, 2, 0, 0) */
color: orange;
}
#sidebar { /* Specificity (0, 1, 0, 0) */
color: yellow;
}
#sidebar .class-div { /* Specificity (0, 1, 1, 0) */
color: blue;
}
The inline rule, will have a specificity of (1, 0, 0, 0).
接下来的优先级是(0, 2, 0, 0);以此类推
- 使用!important 的样式覆盖都可以通过css优先级机制(比如加个样式等来提高优先级)
- 总结:
-元素样式的应用按照如下规则排列
-origin
-weight
-specificity
-order of definition
specificity只有在origin和weight一致的情况下才有效,再次就是定义的顺序
最后定义的样式会覆盖之前的样式。
- 在解析css的过程中,cssom树并不是浏览器构建的唯一数据结构,css样式匹配是件重活
为了尽可能快的加载样式,每一种最精确的匹配规则都会被加入众多哈希表中的一张 。
有针对id,class类名,标签名和一些其他不符合任何规则的哈希表。
当浏览器试图寻找哪个样式表加载到元素上的时候,它没必要查看所有的规则,而只需要查看哈希表。
这又引导我们到另一个重要的知识:我们从一个元素开始,寻找它的id,class,标签等,然后在多个字典中查找他们,
我们总是匹配**最右边**的(rightmost)的选择器,这个选择器称为**主选择器(key selector).**
这个概念开始的时候可能有些难以理解,但是它对我们如何写更快的css规则至关重要。
让我们看个例子:
HTML
<div id=”container1”>
… thousands of <a> elements here …
<a> … </a>
… thousands of <a> elements here …
</div>
<div id=”container2”>
<a class=”a-class”>...</a>
</div>
我们假如要选择container2种的a标签
This selector:
#container2 a {...}
这个选择器将会严重影响加载性能,如果从左到右读取,那就是先找到#container2然后再找a标签
,然而浏览器将会从右往左读取,它会先读取所有的a标签,然后再沿着dom往上走,直到找到#container.
这意味着这个规则会寻找所有的a,但是实际上很多a在#container1之中。
我们可以写一个更有效率的样式表:#container2 .a-class {...}。
这个特性可以在javascript或者jquery中得到很好的发挥:
eg:将$(‘#container .class-name’)改为$(‘.class-name’, ‘#container’)可以很好的性能。
-前者会先去寻找.class-name然后再沿着dom树寻找#container元素
-后者会先找到#container,然后再沿着子树寻找.class-name的元素
3.把DOM和CSSOM组合成渲染树(render tree)。render树
4.在渲染树的基础上进行布局,计算每个节点的几何结构。
布局(layout):定位坐标和大小,是否换行,各种position, overflow, z-index属性 ……
5.把每个节点绘制到屏幕上(painting),正式开画!
原文:http://www.cnblogs.com/cosyer/p/6655225.html