dtux

网络的导航,是从输入 url 到最终获取到文件的过程。其中牵扯到浏览器架构、操作系统、网络等一系列知识。本文将从各个角度详细论述这一过程,涉及广度与深度。如果您是已经有一定基础的同学,那么本文可以快速带你系统化整理碎片化知识。

导航篇

本小节,我们将以普通请求作为抓手,跟随请求数据包漫游整个 OSI 模型,本节目录:

解析 URI

当我们在地址栏输入需要请求的网站地址,如:晨风 并按下回车,
Chrome 首先会解析内容,判断这是 URL 还是搜索内容,若是搜索内容则自动 URL 编码并拼接为默认搜索引擎的 params

如果是 URI ,如:test.com,则处理 URI,添加 http 并默认访问 80 端口号。

file

Chrome 层面,如果你的地址栏原本就有展示页面,那么进行上述操作后,会触发当前页面的 beforeunloadunload 事件。同时浏览器标签进入 loading 图标状态,新页面有两个重要的时间节点,在渲染篇会详细介绍:

  • interactive:它表示浏览器已经完成了 HTML parserRecalculate StyleLayout TreeRender Treedraw list 等工作。
  • complete: 它表示浏览器已经完成页面渲染,这会替换掉本窗口原本的位图,显示最新的界面。在 interactivecomplete 之间,就是渲染进程中的合成线程的工作位置,Chrome 渲染进程基于 skia 进行 2D 界面元素的绘制。

早些时候一些网站会在 URI 中直接制定路径和具体的后缀的文件,如:https://www.test.com/home/index.html。但是这所带来的诸如非法访问等安全问题与互联网业务需求的爆发式增长,人们对 Web 的安全性与效率有了更高的要求,因此引入代理服务器满足 保证安全负载均衡缓存代理 等需求。现代 Web 几乎都采用代理服务器以隐藏真实的资源位置。

构建请求

通过 URI Check 后,Chrome 需要为它创建 get 请求,在此之前先介绍一下 Chrome 的架构组成。

Chrome 目前采用的是 SOA 架构,主要特点是将应用程序的不同的 Service 进行拆分,并通过这些服务之间定义良好的接口和协议联系起来。常用的进程如下:

  • 浏览器主进程:负责页面展示,用户交互,子进程管理等功能
  • 渲染进程:每个选项卡都有自己的渲染进程,无关乎是否为 same-site 站点SandBox 运行环境,处理 HTMLCSSJavaScript。同时 V8Blink 也都运行在该进程中。
  • 插件进程:负责插件运行,根据插件的功能决定是否运行在 Sandbox 环境
  • GPU 进程:处理一些特殊的 CSS 效果
  • NetWork Service:处理网络资源加载,请求响应,校验 CORS。
  • Storage Service:处理对 localStoragesessionStoragecookieIndexed DB 存储的控制。
  • Audio Service:处理音视频 Buffer 的音量播放等操作
  • V8 PAC tool:利用 V8 解析 PAC 文件,干一些你懂得的事

相关文章: