网络的导航,是从输入 url 到最终获取到文件的过程。其中牵扯到浏览器架构、操作系统、网络等一系列知识。本文将从各个角度详细论述这一过程,涉及广度与深度。如果您是已经有一定基础的同学,那么本文可以快速带你系统化整理碎片化知识。
导航篇
本小节,我们将以普通请求作为抓手,跟随请求数据包漫游整个 OSI 模型,本节目录:
解析 URI
当我们在地址栏输入需要请求的网站地址,如:晨风
并按下回车,
Chrome 首先会解析内容,判断这是 URL
还是搜索内容,若是搜索内容则自动 URL
编码并拼接为默认搜索引擎的 params
。
如果是 URI
,如:test.com
,则处理 URI
,添加 http
并默认访问 80
端口号。
在 Chrome
层面,如果你的地址栏原本就有展示页面,那么进行上述操作后,会触发当前页面的 beforeunload
与 unload
事件。同时浏览器标签进入 loading
图标状态,新页面有两个重要的时间节点,在渲染篇会详细介绍:
-
interactive
:它表示浏览器已经完成了HTML parser
、Recalculate Style
、Layout Tree
、Render Tree
、draw list
等工作。 -
complete
: 它表示浏览器已经完成页面渲染,这会替换掉本窗口原本的位图,显示最新的界面。在interactive
与complete
之间,就是渲染进程中的合成线程的工作位置,Chrome
渲染进程基于 skia 进行2D
界面元素的绘制。
早些时候一些网站会在 URI
中直接制定路径和具体的后缀的文件,如:https://www.test.com/home/index.html
。但是这所带来的诸如非法访问等安全问题与互联网业务需求的爆发式增长,人们对 Web
的安全性与效率有了更高的要求,因此引入代理服务器满足 保证安全、负载均衡、缓存代理 等需求。现代 Web 几乎都采用代理服务器以隐藏真实的资源位置。
构建请求
通过 URI Check
后,Chrome
需要为它创建 get
请求,在此之前先介绍一下 Chrome
的架构组成。
Chrome
目前采用的是 SOA
架构,主要特点是将应用程序的不同的 Service
进行拆分,并通过这些服务之间定义良好的接口和协议联系起来。常用的进程如下:
- 浏览器主进程:负责页面展示,用户交互,子进程管理等功能
- 渲染进程:每个选项卡都有自己的渲染进程,无关乎是否为 same-site 站点,
SandBox
运行环境,处理HTML
、CSS
、JavaScript
。同时V8
和Blink
也都运行在该进程中。 - 插件进程:负责插件运行,根据插件的功能决定是否运行在
Sandbox
环境 - GPU 进程:处理一些特殊的 CSS 效果
- NetWork Service:处理网络资源加载,请求响应,校验 CORS。
- Storage Service:处理对
localStorage
、sessionStorage
、cookie
、Indexed DB
存储的控制。 - Audio Service:处理音视频
Buffer
的音量播放等操作 - V8 PAC tool:利用 V8 解析 PAC 文件,干一些你懂得的事