本文目录：
- 1.浏览器构成
- 2.渲染引擎
- 3.CSS 特性
- 4.CSS 选择器执行顺序
- 5.CSS 书写顺序对性能有影响吗？
- 6.优化策略
1.浏览器构成
1.用户界面，包括浏览器中可见的地址输入框、浏览器前进返回按钮、书签，历史记录等用户可操作的功能选项。
2.浏览器引擎，可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据，是浏览器各个部分之间相互通信的核心。
3.渲染引擎，解析 DOM 文档和 CSS 规则并将内容排版到浏览器中显示有样式的界面，也就是排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。
4.网络功能模块，是浏览器开启网络线程发送请求以及下载资源的模块。
5.JS 引擎，解释和执行 JS 脚本部分，例如 V8 引擎。
6.UI 后端则是用于绘制基本的浏览器窗口内控件，比如组合选择框、按钮、输入框等。
7.数据持久化存储，涉及 Cookie、LocalStorage 等一些客户端存储技术，可以通过浏览器引擎提供的 API 进行调用。
2.渲染引擎
渲染引擎，解析 DOM 文档和 CSS 规则并将内容排版到浏览器中显示有样式的界面，也就是排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。
渲染引擎的工作流程：
- HTML Parser 生成的 DOM 树；
- CSS Parser 生成的 Style Rules（CSSOM 树）；
在这之后，DOM 树与 Style Rules 会生成一个新的对象，也就是我们常说的 Render Tree 渲染树，结合 Layout 绘制在屏幕上，从而展现出来。
3.CSS 特性
1.优先级
| 选择器 | 权重 |
|---|---|
| !important | 1/0(无穷大) |
| 内联样式 | 1000 |
| ID | 100 |
| 类/伪类/属性 | 10 |
| 元素/伪元素 | 1 |
| 通配符/子选择器/相邻选择器 | 0 |
!important > 行内样式（权重1000） > ID 选择器（权重 100） > 类选择器（权重 10） > 标签（权重1） > 通配符 > 继承 > 浏览器默认属性
2.继承性
继承得到的样式的优先级是最低的，在任何时候，只要元素本身有同属性的样式定义，就可以覆盖掉继承值。
在存在多个继承样式时，层级关系距离当前元素最近的父级元素的继承样式，具有相对最高的优先级。
有哪些属性是可以继承的呢，我们简单分一下类：
- font-family、font-size、font-weight 等 f 开头的 CSS 样式。
- text-align、text-indent 等 t 开头的样式。
- color
3.层叠性
CSS 之所以有「层叠」的概念，是因为有多个样式来源。
CSS 层叠性是指 CSS 样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的 CSS 选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，相同权重的强中的情况下后面的会覆盖前面的。
4.CSS 选择器执行顺序
浏览器 CSS 匹配核心算法的规则是以从右向左方式匹配节点的。
这样做是为了减少无效匹配次数，从而匹配快、性能更优。
所以，我们在书写 CSS Selector 时，从右向左的 Selector Term 匹配节点越少越好。
5.CSS 书写顺序对性能有影响吗？
需要注意的是：浏览器并不是一获取到 CSS 样式就立马开始解析，而是根据 CSS 样式的书写顺序将之按照 DOM 树的结构分布渲染样式，然后开始遍历每个树结点的 CSS 样式进行解析，此时的 CSS 样式的遍历顺序完全是按照之前的书写顺序。
在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。
我们来看看下面这个代码片段：
width: 150px;
height: 150px;
font-size: 24px;
position: absolute;
当浏览器解析到 position 的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染。
渲染引擎首先解除该元素在文档中所占位置，这就导致了该元素的占位情况发生了变化，其他元素可能会受到它回流的影响而重新排位。
我们对代码进行调整：
position: absolute;
width: 150px;
height: 150px;
font-size: 24px;
这样就能让渲染引擎更高效的工作，可是问题来了：
在实际开发过程中，我们如何能保证自己的书写顺序是最优呢？
这里有一个规范，建议顺序大致如下：
1.定位属性
position display float left top right bottom overflow clear z-index
2.自身属性
width height padding border margin background
3.文字样式...
4.文本属性...
5.CSS3 中新增属性...
当然，我们需要知道这个规则就够了，剩下的可以交给一些插件去做，譬如 CSSLint（能用代码实现的，千万不要去浪费人力）。
6.优化策略
1. 使用 id selector 非常的高效
在使用 id selector 的时候需要注意一点：因为 id 是唯一的，所以不需要既指定 id 又指定 tagName
2. 避免深层次的 node
3. 不要使用 attribute selector
如：p[att1=”val1”]，这样的匹配非常慢。更不要这样写：p[id="id1"]，这样将 id selector 退化成 attribute selector。
4. 将浏览器前缀置于前面，将标准样式属性置于最后
类似：
.foo {
-moz-border-radius: 5px;
border-radius: 5px;
}
5. 不要使用 @import
使用 @import 引入 CSS 会影响浏览器的并行下载。
使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载、解析之后，浏览器才会知道还有另外一个 CSS 需要下载，这时才去下载，然后下载后开始解析、构建 Render Tree 等一系列操作。
多个 @import 会导致下载顺序紊乱。在 IE 中，@import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 JS 文件先于 @import 下载，并且打乱甚至破坏 @import 自身的并行下载。
6. 减少 CSS 文档体积
移除空的 CSS 规则（Remove empty rules）。
值为 0 不需要单位。
使用缩写。
属性值为浮动小数 0.xx，可以省略小数点之前的 0。
不给 h1-h6 元素定义过多的样式。
7. 避免过分回流/重排（Reflow）
8.减少昂贵属性
当页面发生重绘时，它们会降低浏览器的渲染性能。所以在编写 CSS 时，我们应该尽量减少使用昂贵属性，如：
- box-shadow
- border-radius
- filter
- :nth-child
9. 依赖继承
如果某些属性可以继承，那么自然没有必要再写一遍。
网友评论