这篇承上启下,当我们输入完网址,按下回车到页面请求发出之前发生了什么?
在浏览器层面有很多交互。
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