从浏览器地址栏输入回车后会发生什么？

前言

在前端面试中，往往会有一个非常经典的面试题，从浏览器地址栏输入地址，并敲下回车后会发生什么？这是一个非常宽泛、考察知识广度和深度的题目。还记得最开始回答这个问题时，首先想到的是DNS解析-> 请求数据 -> HTML解析、CSS解析 -> 构造DOM树 -> 构造渲染树 -> 浏览器根据渲染树进行渲染，将页面展示到浏览器界面上。后来接触了winter老师的重学前端的课程，对HTML、CSS解析又有了更深的认识，这个过程主要是通过词法、语法分析来构造DOM树和渲染树。今天我想从浏览器入手来回答我们一开始的问题。

浏览器是多进程

不知道大家有没有思考过这个问题，浏览器是多进程的，在Chrome浏览器中，设置->更多工具->任务管理器中，可以看到浏览器中有很多个进程。

可以看到这里面有一个名叫浏览器的进程，一个GPU进程，两个实用进程，多个标签页进程，多个扩展程序进程，这些进程分别是做什么呢？下面我们来分析这些进程。

主进程

浏览器的主控进程，每个浏览器中仅有一个主控进程，对应上面截图中的 浏览器进程。
主要负责：

1. 网络资源的下载；
2. 页面的展示与用户交互；
3. 协调各个进程，创建/销毁页面进程。

GUP进程

主要负责3D绘制，每个浏览器最多一个GPU进程。

渲染进程

这是浏览器每个TAB对应的进程，每一个TAB页都是一个渲染进程，该进程负责HTML、CSS解析和DOM树构造、渲染树构造，计算元素位置等页面渲染工作，以及JS脚本执行和事件处理过程。
这个进程是整个过程的核心处理过程，该进程中包括了多个线程来处理整个渲染过程。

GUI渲染线程

该线程主要做以下事情：
1. 解析HTML
2. 解析CSS
3. 构造DOM树和SOM树
4. 布局和绘制

该线程与JS引擎线程是互斥的，当有JS引擎线程在执行时，该线程就会被挂起，所以当某个JS处理时间很长时，一般会出现页面卡顿现象。

JS引擎线程

这个线程应该是我们比较熟悉的了，它是来执行我们的JS代码的。这个过程可能会与时间处理线程、异步请求线程以及定时器触发器线程并行进行。后面再整体举例子来讲。并且该线程是单线程的，所有其他线程的处理需等到该线程空闲时才会执行。

事件处理线程

事件处理线程是实现事件循环的一个专门线程，主要是来处理像setTimeout、ajax请求、点击事件等的专门的线程，为了让JS引擎线程专注得做一件事，该线程会维护一个事件队列。
当有像上述的一些JS时，会在满足条件后，将对应的任务放置到事件队列中，直到JS引擎线程空闲时，才会执行任务，执行任务的过程涉及到事件循环机制了。

异步请求线程

该线程应该就是来处理像Ajax一类的异步请求，若代码中有异步请求的过程，浏览器会创建一个异步请求线程，该线程监听XMLHTTPRequest对象的状态，若状态变更时有对应的回调函数，就会将回调函数给事件处理线程，事件处理线程将其放置到事件队列中，等到JS引擎线程空闲时，按照事件循环机制执行。

定时器触发器线程

该线程就是来处理setTimeout和setInterval这类操作了，若有这些过程，定时器线程会进行计时，当计时满足条件之后，会将回调函数给事件处理线程，事件处理线程会将其放置到事件队列中，等到JS引擎空闲时，按照事件循环机制执行。

第三方插件进程

该进程主要是扩展程序对应的进程，在扩展程序被启用时，才会有对应的进程。每种扩展程序对应一个插件进程。没错，上图中的Vimium、windows Resizer和网页截图注释是我浏览器中安装的扩展程序。

浏览器各进程如何通信

知道了浏览器是多进程的，那么浏览器各个进程是如何进行交互的呢？当我们打开浏览器，应该是主进程来接收的，那主进程是如何与每个TAB页的渲染进程进行通信的，整个浏览器的处理流程是怎样的？

当用户从浏览器发起请求时：

1. 浏览器主控进程请求页面内容，然后通过一个RenderHost接口将信息发给渲染进程；
2. 渲染进程通过Render接口拿到信息之后，进行一些解释和处理，然后由GUI渲染线程进行渲染；
3. 渲染线程主要来解析HTML、CSS以及构造DOM树等，CSS资源的下载等需要主进程来进行网络请求，也可能需要GPU进程来协助。当然，过程可能会遇到JS，此时也需要JS引擎线程来处理，如果有异步的任务，还需要事件处理线程来做。
4. 当所有渲染工作做完之后，渲染进程会将结果反馈给浏览器主进程，主进程将结果进行绘制。

这应该就是在浏览器回车之后，浏览器的一系列操作，希望本文可以让大家有个大概的了解和认识。