详解浏览器打开一个页面的过程

前言：在讲解浏览器打开页面过程之前，我们先了解下浏览器进程线程，这些知识点都是必要的铺垫

线程与进程

首先要说明的就是进程与线程的关系，这个只是大概讲一下不必深入的导论，如果想在服务端方面做深入研究的可以去详细研究

我们先看定义

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

单从定义上看根本无法理解，我们看网上举的一例子个

进程 理解为一个工厂，工厂有它独立的资源

工厂之间相互独立

线程是工厂中的工人，多个工人协作完成任务

工厂内有一个或多个工人

这个例子中工厂与工人对应概念就是

工厂的资源-----系统分配的独立内存

工厂之间相互独立-----进程之间相互独立

多个工人协作完成任务----多个线程在进程中协作完成任务

工厂内有一个或多个工人----一个进程有一个或多个线程组成

工人之间共享内存----同一进程下的各个线程之间共享程序的内存空间

最后在总结下两者的之间的区别

• 本质区别： 进程是操作系统分配资源的基本单位，而线程是cup任务调度和执行的基本单位
• 资源开销：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。

• 包含关系：如果一个进程内有多个线程，则执行过程不是一条线的，而是多条线（线程）共同完成的；线程是进程的一部分，所以线程也被称为轻权进程或者轻量级进程。
• 内存分配：同一进程的线程共享本进程的地址空间和资源，而进程之间的地址空间和资源是相互独立的

• 影响关系：一个进程崩溃后，在保护模式下不会对其他进程产生影响，但是一个线程崩溃整个进程都死掉。所以多进程要比多线程健壮。
• 执行过程：每个独立的进程有程序运行的入口、顺序执行序列和程序出口。但是线程不能独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制，两者均可并发执行

浏览器的进程与线程

以chrome为例，浏览器是多进程的，分为Browser主进程、第三方插件进程、GPU进程、浏览器渲染进程

我们主要看浏览器渲染进程这个是核心，它主要分为以下几个线程

• GUI渲染线程
  1、负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
  2、当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
  3、注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行
• JS引擎线程（传说中的单线程）
  1、也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）
  2、JS引擎线程负责解析Javascript脚本，运行代码。
  3、JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
  4、同样注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

• 事件触发线程
  1、归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
  2、当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
  3、当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
  4、注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）
• 定时器触发线程
  1、传说中的setInterval与setTimeout所在线程
  2、浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
  3、因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
  4、注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。

• 异步请求线程
  1、在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
  2、将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行

如下图所示

打开一个网页的全过程

1、输入www.baidu.com

2、进行DNS解析

3、发送http请求

4、建立TCP连接

5、接收返回数据，断开连接

6、解析html创建DOM tree

7、下载css文件，解析css文件创建CSSOM tree

8、下载js文件，解析运行js

9、继续创建DOM完成(DOM tree 创建完毕)

10、创建渲染树(render tree)

11、布局(layout)渲染树

12、绘制(painting)渲染树

13、页面显示完毕

第5步==>第6步 浏览器并不会等到所有的数据返回在开始解析，当它接收到可解析数据就会开始解析

如下图所示：

对以下几个概念解释下：

• DOM Tree（document object model）
  将HTML解析成树行的数据结构，DOM树构建过程是一个深度优先的遍历过程，当前节点的所有子节点都构建好了才会构建当前节点的下一个兄弟节点
• CSSOM Tree(css object model)
  将css解析成CSS规则树

• Render Tree
  将DOM Tree和CSSOM Tree合并解析为渲染树
• Layout
  这时候虽然有了Render Tree但是并不知道每个元素在屏幕上的位置，所谓的布局就是从可视区域的左上角即坐标原点，从左到右从上到下从DOM的根节点开始画，布局阶段输出的结果称为box盒模型，盒模型精确表示了每一个元素的位置和大小，并且所有相对度量单位此时都转化为了绝对单位。

• Painting
  遍历render tree绘制到屏幕上

CSS与JS都会阻塞渲染，也就说CSS与JS都是阻塞资源，他们之间的阻塞关系，大致如下：

1.CSS 阻塞渲染

当浏览器解析到link标签时会被视为阻塞渲染资源，浏览器会优先处理css资源，直至CSSOM构建完毕，CSS不会阻塞DOM Tree的构建,他会阻塞Render Tree的构建,因为Render Tree是CSSOM与DOM合并而来的，CSS渲染会阻塞JS的执行，所以CSS阻塞情况如下：

1. css加载不会阻塞DOM Tree的构建
2. css加载会阻塞Render Tree的构建
3. css加载会阻塞后面js语句的执行

2.Javascript 阻塞渲染

1. js加载会阻塞DOM Tree构建
2. DOM Tree构建被阻塞那么Render Tree构建肯定是被阻塞的
3. js的执行会等到CSSOM构建完毕在执行，也就是上面CSS所说的阻塞js执行

总结：浏览器的执行步骤流程