浏览器运行原理

一、浏览器简介

浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。

二、浏览器内核

使用Trident内核的浏览器：IE、Maxthon、TT、The World等；
使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；
使用Presto内核的浏览器：Opera7及以上版本；
使用Webkit内核的浏览器：Safari（ [sə’fɑːrɪ）、Chrome。

三、浏览器的主要功能

1.用户界面（这个不重要） - 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
2.浏览器引擎 - 用来查询及操作渲染引擎的接口。另外还用来操作浏览器的数据存储。
3.渲染引擎 - 用来显示请求的内容，例如，如果请求内容为html，它负责解析html和css，并将解析后的结果显示出来。
4.网络 - 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
5.UI后端 - 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6.JS解析器 - 用来解释执行JS代码。
7.数据存储 - 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

四、浏览器渲染主流程

1.解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 – 内容树。
2.构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。
3.布局渲染树: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
4.绘制渲染树: 遍历渲染树，每个节点将使用UI后端层来绘制。