一、前端方向的重点
对于前端方向(这里更多的指客户端前端),这里将知识点按重要程度划分为以下几大类(用一个脑图表示):
二、以经典话题《从输入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运行机制最全面的一次梳理: