正经学前端笔记——Web基础学习1之浏览器内核

一、组成

渲染引擎

负责渲染、输出，包括取得网页内容、整理讯息（如加入CSS等）、计算网页的显示方式、将解析后的内容输出至显示器或打印机。

JS引擎

解析JavaScript语言，执行JavaScript语言，实现网页动态效果。

二、常见浏览器内核

IE内核：trident（其他浏览器所谓之“兼容模式”）
Edge内核：EdgeHTML
火狐内核：gecko（开源，但打开速度慢、升级频繁）
Safari内核：webkit
谷歌内核：chromium/Blink（一开始用的Safari内核webkit，后来使用Blink，实际上也是webkit的分支）
Opera内核：presto（从前使用）/Blink（后来使用）

三、渲染引擎工作流程

1.从网络层获取请求文档的内容（通常以 8K分块 的方式完成）

2.解析html以构建DOM树

DOM树：一种树形的数据结构，解析HTML生成，存放HTML中的标签内容。

3.构建render树

render树（渲染树）：一种树形的数据结构，存放HTML中的标签内容、外部CSS样式信息（CSS将被解析成CSS规则树）、style标签中的样式数据。

4.布局render树

render树告诉浏览器网页中有哪些节点内容及其从属关系，渲染引擎通过render树，就可以计算出每个节点在屏幕中的位置，为每个节点分配一个屏幕坐标。

5.绘制render树

遍历render树，通过显卡，绘制每个节点至屏幕上。
由于一个元素是否为块级元素是可以通过 CSS 改变的，所以，一个render树的结构也会根据 CSS 的变化而变化。如果CSS影响到元素的位置发生变化，则会都在整个树重新计算，即回流。
注：渲染引擎将会尽可能早的将内容呈现到屏幕上，不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络获取其余内容。