解析浏览器打开网页过程

浏览器是什么，浏览器是用户用来查看网页的软件程序，它是由多个进程构成，那么什么是进程？什么又是线程呢？

进程与线程科学定义：

• 进程 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
• 线程 线程是cpu是调度的最小单位 （线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

总的来说软件服务好比一座工厂，进程好比一个加工车间，而线程则是加工车间中的一条流水线，多条线程构成一个进程，多个进程构成一个软件服务，

以chorme浏览器为例，他分为Browser主进程，GPU进程，第三方插件进程、浏览器渲染进程。其中我们前端开发
人员最需要关注的是它的浏览器渲染进程，该进程主要由下列几个线程构成：

1.JS引擎线程；2.GUI渲染线程；3.事件触发线程；4.定时器触发线程；5，异步请求线程；

通常我们说JS是单线程运行的，是因为JS程序的可执行代码在JS引擎线程中执行，其中的异步任务会丢到其他的线程中执行，待拿到返回结果，再通知JS引擎线程运行其回调。需要注意的一点是GUI渲染进程和JS引擎互斥，一个运行另一个就需要挂起，他们中的一方要是运行的时间过长，则会引起程序的卡顿。

64bf928efc59f98184b77df2b6c15eba.png

打开网页的全过程：

1.在地址栏中输入URL；

2.对输入的URL进行DNS解析，获取目标服务器IP地址，优先浏览器DNS缓存查询>本地host文件查询，如没有则进行递归或迭代查询，本地区的域名服务器>根DNS域名服务器>顶级域名服务器>依次向下>>>;

3.像目标IP发送http请求；

4.建立tcp链接；

5.接受返回数据，（http1.1长链接，默认不会断开tcp握手）

6.浏览器渲染线程解析html文件，方向由上至下；

7. 解析HTML文件标签对并渲染，具体规则如下：

• 1.解析到DOM（文档对象模型 Document Object Model）标签，置入DOM树，HTML标签对以栈的形式解析，解析到标签头先入栈并构成一个DOM节点，解析到该标签尾，则需要判断当前栈顶是不是该标签头，是则认为解析完毕出栈。因为HTML标签是成对出现的且标签对之间无法穿插只能是包含关系，所以以这种形式解析dom节点的话，必然会将其子节点全部解析完成才开始进行其兄弟节点的解析；
• 2.解析到CSS标签（link）,首先将CSS文件下载完毕，然后进行解析生成CSSOM（层叠样式表对象模型 Cascading Style Sheets Object Model）CSSOM和DOM是完全独立的数据模型 ，因此它们是彼此分开解析的 。 但是它们都具有相似的树结构 ，并且具有相同的目的：为浏览器提供一种结构，以呈现和标识页面上的不同元素。注意下载和解析CSS文件都会阻止页面渲染，从而阻塞JS运行，这是因为DOM 和 CSSOM 要最终合并成为 render tree 用于页面渲染，其中一项未解析完毕则无法正常渲染,而页面渲染和JS代码运行互斥，所以也阻塞JS运行。
• 3.合成render tree，利用以获得的DOM 和 CSSOM 合成render tree，其中包含完整的界面展示信息。
• 4.生成Layout布局阶段，生成盒模型，确定各节点大小位置层级等；
• 5.进行painting绘制阶段，将各节点绘制到界面上（类似片元着色器）
• 6.解析到JS标签，将JS文件下载完毕然后执行，此过程阻塞DOM解析和CSS解析，因为JS代码种可能对DOM和样式有操作，避免引起冲突。

注意上述解析规则并不是等待所有数据全部返回才开始解析，而是当它接收到可解析数据就会开始解析。

CSS解析与JS代码执行都会阻塞渲染，他们阻塞关系如下：

CSS阻塞渲染规律：

1.CSS加载和解析不会阻塞DOM TREE构建，他们是两个并行的线程在处理；
2.CSS加载和解析会阻塞RENDER TREE合成，因为CSSOM是构成渲染树的一部分；
3.CSS加载和解析阻塞JS代码执行，因为JS代码与渲染互斥，可能有DOM操作或者样式操作上的冲突；

JS阻塞渲染规律：

1.JS加载和运行阻塞DOM TREE和RENDER TREE的构建；
2.JS执行需等待CSSOM构建完成；
3.上述2点可以理解为GUI线程与JS引擎线程互斥，在浏览器解析HTML文件并渲染的过程里，只有执行js代码交由JS主线程处理（异步任务除外），其他过程有GUI线程处理。

总结：日常盗图

51c3660d3f67948d4ec8279baad97d96.png