浏览器工作原理

弄清楚浏览器的工作原理，我们才能用写出更加高效的前端代码。

主流的浏览器主要包括：Firefox、Chrome、Safari、Edge、IE等，这些浏览器基于WebKit，Gecko两种内核。（各种主流浏览器内核介绍）

WebKit包含两个主要部分WebCore渲染引擎（或排版引擎）和JSCore引擎（用于解析JavaScript）。

浏览器整体框架组成

一般浏览器主要包括7个组件：

1 用户界面 （User Interface）
用户之间接触的部分，通常包括地址栏、后退/前进按钮、菜单栏等。

2 浏览器引擎 （Browser Engine）
渲染引擎的查询与操作接口

3 渲染引擎 （Rendering Engine）
显示请求的内容，即页面

4 网络层 （Networking）
网络调用，例如HTTP请求，基于具体操作系统平台

5 UI后端 （UI Backend）
用于绘制图形化组件，利用操作系统的用户接口

6 JavaScript解析器 （JavaScript Interpret）
解析并执行JavaScript代码

7 数据存储（Data Storage）
数据持久层，浏览器需要将数据存储在磁盘，例如cookies

注 Chorme浏览器不像其他浏览器，每个标签有一个渲染引擎对象进行渲染，分开处理。

Rendering Engine

渲染引擎，可以显示HTML、XML文件和图像，也可以通过插件的方式显示其他类型的文化。例如，使用PDF插件显示PDF文件。

渲染引擎的基本流程

渲染引擎解析每个HTML文件，将HTML文件中的标签转换为DOM树中的节点，构建DOM树。
然后，解析扩展的CSS文件和内嵌的style元素，计算每个DOM节点的视觉信息，并构建Render树。
Render树生成完后，需要计算每个Render树节点的布局，位置信息，最后通过UI Backend绘制RenderTree，完成页面显示。

主要的流程示例

参考：
1 http://taligarsiel.com/Projects/howbrowserswork1.htm#Resources

2 https://www.zhihu.com/question/30218438