css其中一个div被挤出了大div_CSS 渲染原理以及优化策略深剖析

转载自：http://jartto.wang/2019/10/23/css-theory-and-optimization/

作者：Jartto

推荐理由：由浅入深，鞭辟入里。

提起 CSS 很多童鞋都很不屑，尤其是看到 RedMonk 2019 Programming Language Rankings 的时候，CSS 竟然排到了第七位。

我们先来看看这张排行榜：

css渲染原理

既然 CSS 这么重要，那么我们花点时间来研究相关原理也就物有所值了。

本节我们就来说说 CSS 渲染以及优化相关的内容，主要围绕以下几点，由浅入深，了解来龙去脉：

1. 浏览器构成
2. 渲染引擎
3. CSS 特性
4. CSS 语法解析过程
5. CSS 选择器执行顺序
6. 高效的 ComputedStyle
7. CSS 书写顺序对性能有影响吗
8. 优化策略

浏览器构成

浏览器构成

• User Interface：

  用户界面，包括浏览器中可见的地址输入框、浏览器前进返回按钮、书签，历史记录等用户可操作的功能选项。

• Browser engine：

  浏览器引擎，可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据，是浏览器各个部分之间相互通信的核心。

• Rendering engine：

  渲染引擎，解析 DOM 文档和 CSS 规则并将内容排版到浏览器中显示有样式的界面，也就是排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。

• Networking：

  网络功能模块，是浏览器开启网络线程发送请求以及下载资源的模块。

• JavaScript Interpreter：

  JS 引擎，解释和执行 JS 脚本部分，例如 V8 引擎。

• UI Backend：

  UI 后端则是用于绘制基本的浏览器窗口内控件，比如组合选择框、按钮、输入框等。

• Data Persistence：

  数据持久化存储，涉及 Cookie、LocalStorage 等一些客户端存储技术，可以通过浏览器引擎提供的 API 进行调用。

渲染引擎

渲染引擎，解析 DOM 文档和 CSS 规则并将内容排版到浏览器中显示有样式的界面，也就是排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。

渲染引擎

上图中，我们需要关注两条主线：

• 其一，HTML Parser 生成的 DOM 树；
• 其二，CSS Parser 生成的 Style Rules(CSSOM 树)；

在这之后，DOM 树与 Style Rules 会生成一个新的对象，也就是我们常说的 Render Tree 渲染树，结合 Layout 绘制在屏幕上，从而展现出来。

CSS 特性

1.优先级

css优先级

选择器	权重
!important	1/0(无穷大)
内联样式	1000
ID	100
类/伪类/属性	10
元素/伪元素	1
通配符/子选择器/相邻选择器	0

!important > 行内样式(权重1000) > ID 选择器(权重 100) > 类选择器(权重 10) > 标签(权重1) > 通配符 > 继承 > 浏览器默认属性

示例代码一：

Jartto's blogp>
div>