从输入URL到页面加载的过程(2) - 从浏览器接收 `url` 到开启网络请求线程

Posted by cody1991 on July 24, 2020

from 从输入 URL 到页面加载的过程?如何由一道题完善自己的前端知识体系!

作为进阶回头再来看看:从输入 URL 到页面加载完成的过程中都发生了什么事情?

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

浏览器是多进程的,有一个主控进程,每个 tab 页面都会打开一个新的进程,但是有时候会合并

进程可能包含下面几个

  • 浏览器进程,负责协调主控,只有一个
  • 第三方插件进程,每个插件对应一个进程,只有被使用的时候才会使用
  • GPU 进程,主要一个,负责 3D 绘制
  • 浏览器渲染进程(内核):默认每个 tab 只有一个进程,互不影响,控制页面渲染,脚本执行,事件处理等

浏览器任务管理器

每个 tab 可以看成是一个浏览器内核进程,这个进程是多线程的,有下面几大类线程

  • GUI 线程
  • js 引擎线程
  • 时间触发线程
  • 定时器线程
  • 网络请求线程

js 引擎线程是内核中的一个线程,所以经常说 js 引擎是单线程的

之后我们开始解析 url 地址

url 有下面几个组成部分

  • protocol: 协议头,比如 http ftp
  • host: ip 地址或者主机名
  • port: 端口号
  • path: 目录路径
  • query: 查询参数
  • fragment: # 后面的 hash 值,一般用来定位到某个地方

网络请求都是单独的线程,比如 url 解析到 http 协议,就会新建一个网络线程去处理资源下载

后续要继续读这一篇:从浏览器多进程到 JS 单线程,JS 运行机制最全面的一次梳理