浏览器是如何渲染页面的

# 一、什么是进程，什么是线程

进程是cpu资源分配最小单位，线程是进程最小调度单位。在我们的操作系统中，有许多许多的进程，操作系统每干一件事儿就会交给一个进程去做，比如打开音乐就是一个进程。而每个进程里又包含了许多的线程，例如打开了音乐播放器，放一首歌，就是一个新的线程，切换下一首，可能又是另外一个线程。总之他俩之间的关系就是一个进程包含多个线程。

# 二、浏览器是多进程还是单进程

浏览器一般都是多进程，每开一个tab页，就是一个新的进程。这也就是为什么一个tab页崩溃了不会影响到整个浏览器崩溃。他主要分为以下几个进程：

1、主进程：只有一个，负责调度主控整个浏览器
2、插件进程：每个插件都有一个进程，只在插件被调用的时候创建
3、GPU进程：只有一个，负责3d绘制
4、渲染进程：每个tab页一个，负责网页的渲染，脚本的执行和事件的处理等。这个进程也是前端最需要了解的进程。

# 三、渲染进程

要了解渲染进程，那就得从他有几个线程开始。渲染进程主要有以下几个线程：

1、GUI线程：负责页面的构建和渲染，当页面需要被绘制的时候就会启动这个线程，要注意的是，他和js引擎线程是互斥的，不能并行执行
2、js引擎线程：负责解析和执行js脚本，因为他和GUI线程的互斥性，所以js代码是会导致页面渲染不连贯的，也就是常说的阻塞页面渲染
3、事件触发线程：归属于浏览器，而不是js引擎，他主要就是控制事件循环，将一系列的任务加入一个队列等js引擎空闲下来后去执行
4、定时器线程：管理定时器的计时，等时间到了就把事件推入任务队列，等待js引擎执行
5、异步http请求线程：每发送一个请求就会开启一个新的线程，等待响应后把回调函数推入任务队列，等js引擎执行。

以上几个就是渲染进程的主要线程。其实通过上述的了解我们就可以大概明白了，js的代码执行顺序为什么是那样，可以简单的认为只有同步代码是第一时间就在js引擎线程里去执行的，其他的例如宏任务，微任务，等都是由别的线程管理，当满足条件后才将代码交给js引擎去执行。

# 那接下来就聊一聊老生常谈的浏览器渲染流程：

1、首先浏览器会去解析html文件，构建DOM树，然后解析css，生成css树。
2、等DOM树和css树都构建好了之后，会将两者合并，生成最终的render树
3、接着去布局render树，计算位置尺寸。然后再绘制render树。
4、最后将各层的信息发送给GPU，GPU合成渲染层最终呈现出页面。

在浏览器的渲染过程中还有两个钩子会被触发，他们就是load事件和DOMcontentloaded事件那二者有什么区别呢？ DOMcontentloaded事件会在dom树构建完成之后（不包括样式表，图片等）就执行，而load事件会在渲染完毕后被执行。所有前者是先于后者执行的

# 下一个问题，css到底会不会阻塞dom渲染呢？

首先看一下浏览器的渲染流程图可以看到，DOM的加载和css的加载时并行执行的，所以理论上来说css是不会阻塞dom渲染的，但是最终的渲染是需要dom树和css树共同生成一个render树，就算dom树构建好了，但是css树没构建好，那也没办法渲染页面。所以css的加载不会阻塞但是css的解析又是会阻塞页面渲染的。