浏览器工作原理

目录
一、前言
二、工作流程概况
三、从大致功能上，谈浏览器构成
四、渲染流程（宏观）
五、从进程、线程的角度，谈浏览器构成
六、多进程的优劣分析
七、总进程分析
八、渲染进程分析
九、事件注意点

一、前言

本文以chrome为线索展开，其他浏览器会有差异，但是在宏观上，变化不大。

二、工作流程概况

1、url输入并确认

2、dns解析，查找ip地址

3、应用层——客户端发送http请求

4、http报文传输过程

（1）传输层——通过tcp协议，传输报文
（2）网络层————通过ip协议，查询mac地址
（3）数据到达数据链路层

5、服务器

（1）接收数据
（2）响应请求
（3）返回数据

6、客户端

（1）接收数据
（2）整理数据
（3）渲染页面，监听用户操作

PS：为了用户体验，在整个过程中，无论宏观、微观，都是异步的。

三、从大致功能的角度，谈浏览器构成

1、构成清单

（1）用户界面
（2）浏览器引擎
（3）渲染引擎
（4）网络
（5）UI后端
（6）JS解释器
（7）数据存储

2、关系图

关系图

四、渲染流程（宏观）

1、主干线

主干线

2、完整线路

完整线路

五、从进程、线程的角度，谈浏览器构成

1、初识进程、线程

（1）进程
工厂。为社会作出相应的产出，完成专属的工作，如：鞋厂。
（2）线程
工人。进程分配任务到线程，每个线程的产出，形成进程的总产出。如：包装工、质检工。

2、IPC协议

进程之间的通信协议，存在于多进程应用。

PS：进程可以呼叫操作系统，启动新进程。

3、chrome进程分析

（1）浏览器进程（总进程）
基本UI界面操作、底层操作（网络请求、文件操作）。
（2）渲染进程
每个tab页具有独立的渲染进程，iframe共用当前tab页的进程。
（3）插件进程
控制插件的使用。
（4）GPU进程
处理GPU相关任务。

PS：浏览器中的任务管理器，可以查看所有浏览器进程概况。

六、多进程的优劣分析

1、优势

功能即是服务，若多个进程中，具有相同的功能，
在高端机下，服务依旧独立于其他相同服务，存在于对应的进程中，浏览器更稳定；
在低端机下，相同的服务，则会合并到一个进程中，降低内存占用率。

2、劣势

根据机子性能，限制进程数，若超出限制数，出现合并进程的行为，降低浏览器稳定性（维持操作系统稳定）。

七、总进程分析

1、构成

（1）UI线程
（2）网络线程
（3）存储线程

2、渲染前工作

渲染前工作

（1）提交url，开始tab页的loading动画。
（2）响应到达。
（3）通知渲染进程开始渲染流程。
（4）渲染完成，停止tab页的loading动画。

八、渲染进程分析

1、构成

（1）主线程
（2）工作线程
（3）排版线程
（4）光栅线程
（5）合成器线程

2、渲染流程（微观）

（1）dom树构建
（2）样式计算
（3）排版布局（形成布局树）
（4）确定绘制顺序（形成层树）
（5）根据层树信息，进行栅格化，形成磁贴，并存放到GPU显存
（6）合成器线程监听GPU中，是否存在磁贴
（7）若存在磁贴，通知GPU，将磁贴合成为帧
（8）页面渲染完成

PS：在dom树构建时，资源加载（css、js、img等）是异步的，且当资源加载完成时，会为该部分资源，走一次以上的渲染流程。

九、事件注意点

1、事件触发时机

（1）非连续性事件
鼠标点击、键盘操作类等事件，会立即触发。
（2）连续性事件
滚动、移动类等事件，会等到下一帧渲染时触发。

2、总线程负责监听事件，将事件类型、坐标等信息，发送到渲染进程，位于渲染进程完成事件触发。

3、若渲染区域无事件绑定，合成器线程可以直接进行工作，无需等待主线程响应。