# 浏览器渲染与内核

浏览器内核可以分成两部分：渲染引擎与`JS`引擎。最开始渲染引擎与`JS`引擎并没有明确的区分，但随着`JS`引擎越来越独立，内核就越来越倾向于只指渲染引擎。

## 渲染过程
不同浏览器内核的渲染方式不同，但整体流程基本一致：

1. 自上而下，首先解析`HTML`标签，生成`DOM Tree`。
2. 在解析到`<link>`或者`<style>`标签时，开始解析`CSS`，生成`CSSOM`，值的注意的是此时解析`HTML`标签与解析`CSS`是并行执行的。
3. 当遇到`<script>`标签后，浏览器会立即开始解析脚本，并停止解析文档，因为脚本有可能会改动`DOM`与`CSS`，继续解析会浪费资源，所以应当将`<script>`标签放于`<body></body>`后。
4. 当`DOM Tree`与`CSSOM`生成后，将两者结合进行布局，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型，可称为渲染树`render tree`。
5. 根据计算好的信息绘制整个页面，系统会遍历渲染树，并调用`paint`方法，将内容显示在屏幕上。

### 重绘
当`render tree`中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如`background-color`，则就叫称为重绘。

### 回流
当`render tree`中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流，也可以称为重新布局。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建`render tree`。  

### 内核
* `IE`浏览器：`Trident`内核，也是俗称的`IE`内核。
* `Chrome`浏览器：统称为`Chromium`内核或`Chrome`内核，以前是`Webkit`内核，现在是`Blink`内核。
* `Firefox`浏览器：`Gecko`内核，俗称`Firefox`内核。
* `Safari`浏览器：`Webkit`内核。
* `Opera`浏览器：最初是自己的`Presto`内核，后来是`Webkit`，现在是`Blink`内核。

## JS引擎
`JS`引擎的作用比较统一，在浏览器的实现中必须含有`DOM`（文档对象模型，是`W3C`组织推荐的处理`XML`的标准编程接口）和`BOM`（浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，例如`window`对象）。浏览器一般使用公共`API`来创建对象来负责将`DOM`对象反射进`JavaScript`。`JS`引擎负责对`JavaScript`进行解释、编译和执行，以使网页达到一些动态的效果。

### 引擎
* `Chrome`浏览器：`V8`引擎。
* `Safari`浏览器：`JavaScriptCore`引擎。
* `Firefox`浏览器：`TraceMonkey`引擎。
* `Opera`浏览器：`Carakan`引擎。
* `IE3~IE8`浏览器：`JScript`引擎。
* `Edge`浏览器：`Chakra`引擎。

## 每日一题

```
https://github.com/WindrunnerMax/EveryDay
```

## 参考
```
https://segmentfault.com/a/1190000010298038
https://imweb.io/topic/56841c864c44bcc56092e3fa
```