/browser-render

从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

一、前端方向的重点

对于前端方向(这里更多的指客户端前端),这里将知识点按重要程度划分为以下几大类(用一个脑图表示):

前端重点知识

二、以经典话题《从输入URL到页面加载的过程》为切入点,展开分析

梳理主流程

全链路流程

2.1、从浏览器接收url到开启网络请求线程

浏览器进程/线程模型,JS运行机制

2.1.1、多进程浏览器

浏览器是多进程的,有一个主控进程,以及每一个tab页面都会新开一个进程(某些情况下多个tab会合并进程)。

进程可能包括主控进程,插件进程,GPU,tab页(浏览器内核)等等。

* Browser进程:浏览器的主进程(负责协调、主控),只有一个
* 第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件时才创建
* GPU进程:最多一个,用于3D绘制
* 浏览器渲染进程(内核):默认每个Tab页面一个进程,互不影响,控制页面渲染,脚本执行,事件处理等(有时候会优化,如多个空白tab会合并成一个进程)

如下图:

进程监控

2.1.2 多线程的浏览器内核

每一个tab页面可以看作是浏览器内核进程,然后这个进程是多线程的,它有几大类子进程:

* GUI线程
* JS引擎线程
* 事件触发线程
* 定时器线程
* 网络请求线程

浏览器内核进程

可以看到,JS引擎是内核进程的一个线程,这就是大家常说JS引擎是单线程。

2.1.3 解析URL

输入URL后,会进行解析(URL的本质就是统一资源定位符)

URL一般包括几大部分:

* protocol:协议头,譬如http、ftp等;
* host:主机域名或IP地址;
* port:端口号;
* path:目录路径;
* query:即查询参数;
* fragment:即#后的hash值,一般用来定位到某个位置
2.1.4 网络请求都是单独的线程

每次网络请求时都需要开辟单独的线程进行,譬如如果URL解析到http协议,就会新建一个网络线程去处理资源下载。

因此浏览器会根据解析出得协议,开辟一个网络线程,前往请求资源(这里是浏览器内核开辟)。

2.1.5 更多

从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理:

从浏览器多进程到JS单线程,JS运行机制