这篇承上启下,当我们输入完网址,按下回车到页面请求发出之前发生了什么?

在浏览器层面有很多交互。

todo

0 前置知识

多进程的浏览器 multi-process

进程Process ,线程Thread。现代的浏览器是多进程的。

  • Browser Process 浏览器进程。控制主功能。
  • Renderer Process 渲染进程。用来显示网站、处理事件。
  • GPU Process GPU进程。其他进程的独立任务,同一个界面上绘制图形。
  • Plugin Process 插件进程
  • Untility Process 实用程序进程等

每个新开的标签对应一个 RendererProcess,好处是一个崩了不影响全局。当然也有进一步的优化,比如服务化,

刚才提到了 Browser Process 浏览器进程里有很多线程,这里做个列举:

  • UI Thread,UI线程,绘制网站。
  • Storage Thread,存储线程。存储缓存。
  • Network Thread 网络线程。网络请求。

总体流程

发生了很多进程和线程的交互,这里会进行深入。

简单的导航Navigation 包含:

  • UI Thread 判断是搜索还是网址,因为可以从地址栏直接发起搜索。
  • UI thread 调用 Network thread 请求内容,通知标签栏准备loading 标识
  • Network thread 会进行网络请求,这里可以进入单独的 《说尽DNS》《说尽网络协议TCP、HTTP和其他》章节
    • 如果返回了301,network thread 会让 UI thread 进行重定向,重新走流程
  • 阅读返回内容,选择合适的 MIME Type 解析,同时进行安全性检查,尤其是CORB Cross Origin Read Blocking
  • 选择合适的 renderer Process , Network Process 通知 UI thread 准备干活,UI thread 会找一个合适的 renderer process
  • commit navigation ,接下来交给 renderer process ,同时 browser process 的 ui trhead 做相应变化
  • 页面加载完成。如果再导航,用户修改网址时候,browswer process 需要看beforeUnload,如果是js里跳转 renderer process 看 beoforeUnload
  • 还有 service worker ,这里可以控制代理网络请求。这个再 renderer process 里是 worker thread