宏观视角下的浏览器

191 阅读6分钟

chrome浏览器架构的变化:从单线程到多线程

单进程浏览器 是指浏览器的所有功能模块都是运行在同一个进程里,这些模块包含了网络、插件、JavaScript 运行环境、渲染引擎和页面等。

单进程浏览器的缺点:

由于插件模块 以及渲染模块的不稳定,而且又被一起放在页面线程中,这造成了浏览器的不稳定。(插件的奔溃导致浏览器的奔溃)

不流畅

不安全

多进程浏览器:

多进程浏览器的优缺:

浏览器进程。主要负责界面显示、用户交互、子进程管理,同时提供存储等功能。

渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页,排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中,默认情况下,Chrome 会为每个 Tab 标签创建一个渲染进程。出 于安全考虑,渲染进程都是运行在沙箱模式下。

GPU 进程。其实,Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果,只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制,这使得 GPU 成为浏览器普遍的需求。最后,Chrome 在其多进程架构上也引入了 GPU 进程。

网络进程。主要负责页面的网络资源加载,之前是作为一个模块运行在浏览器进程里面的,直至最近才独立出来,成为一个单独的进程。

插件进程。主要是负责插件的运行,因插件易崩溃,所以需要通过插件进程来隔离,以保证插件进程崩溃不会对浏览器和页面造成影响。

更高的资源占用。因为每个进程都会包含公共基础结构的副本(如JavaScript 运行环境),这就意味着浏览器会消耗更多的内存资源。

更复杂的体系架构。浏览器各模块之间耦合性高、扩展性差等问题,会导致现在的架构已经很难适应新的需求了。

未来:面向服务的架构

TCP协议:如何保证页面文件能被完整送达浏览器?

在衡量 Web 页面性能的时候有一个重要的指标叫“FP(First Paint)”,是指从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率,更快的页面响应意味着更多的 PV、更高的参与度,以及更高的转化率。那什么影响 FP指标呢?其中一个重要的因素是网络加载速度。

互联网中的数据是通过数据包来传输的,数据包在传输过程中容易丢失或出错。

  • IP 负责把数据包送达目的主机。
  • UDP 负责把数据包送达具体应用。
  • 而 TCP 保证了数据完整地传输,它的连接可分为三个阶段:建立连 接、传输数据和断开连接。

HTTP请求流程:为什么很多站点第二次打开速度会很快?

浏览器端发起 HTTP 请求流程:

  1. 构建请求: 构建请求行信息但此时并不会直接发送请求

  2. 查找缓存:在真正发起网络请求之前,浏览器会先在浏览器缓存中查询是否有要请求的文 件。

    有,直接拦截请求。没有,继续第三步。

    这样的优点:

    • 缓解服务器端压力,提升性能(获取资源的耗时更短了);
    • 对于网站来说,缓存是实现快速资源加载的重要组成部分。
  3. 准备 IP 地址和端口: 因为http协议是建立在TCP/IP协议之上的。

    具体关系如下:

http->tcp->ip,而ip地址怎么通过url链接得到,自然是通过域名解析系统或者浏览器自己的DNS 数据缓存服务。

之后再确定端口号,如url没有指定,http默认是80

  1. 等待 TCP 队列

Chrome 有个机制,同一个域名同时最多只能建立 6 个TCP 连接,如果在同一个域名下同时有 10 个请求发生,那么其中 4 个请求会进入排队等待状态,直至进行中的请求完成。 当然,如果当前请求数量少于 6,会直接进入下一步,建立 TCP 连接。

  1. 建立 TCP 连接

三次握手

  1. 发送 HTTP 请求

    在请求行中确定请求方法

    如果是post方法,除了请求信息,还需要提交一些信息,这些信息往往放在请求体中

    以请求头形式发送其他一些信息,把浏览器的一些基础信息告诉服务器。比如包含了浏览器所使用的操作系统、浏览器内核等信息,以及当前请求的域名信息、浏览器端的 Cookie 信息

服务器端处理 HTTP 请求流程

  1. 返回请求

首先服务器会返回响应行,包括协议版本和状态码。

服务器会通过请求行的状态码来告诉浏览器它的处理结果

响应头包含了服务器自身的一些信息,比如服务器生成返回数据的时 间、返回的数据类型(JSON、HTML、流媒体等类型),以及服务器要在客户 端保存的 Cookie 等信息。

发送完响应头后,服务器就可以继续发送响应体的数据,通常,响应体就包含了 HTML 的实际内容。

  1. 断开连接

通常情况下,一旦服务器向客户端返回了请求数据,它就要关闭 TCP 连接。不过如果浏览器或者服务器在其头信息中加入了:keep-alive 即建立持久化连接,那么在服务器返回信息之后,依然保持tcp连接状态。

  1. 重定向

服务返回的状态码是301。状态 301 就是告诉浏览器,我需要重定向到另外一个网址,而需要重定向的网址正是包含在响应头的Location 字段中,接下来,浏览器获取 Location 字段中的地址,并使用该地址重新导航

在此我们再考虑为什么很多站点第二次打开速度会很快?

主要原因是第一次加载页面过程中,缓存了一些耗时的数据。如dns缓存,浏览器缓存。

第二个问题登录状态是如何保持的?

这个是通过cookies做到的。

用户打开登录界面,post提交->服务器收到并验证,生成表示用户身份的字符串,放在响应头->浏览器解析并保存到本地->再次访问时,将数据写进请求头的字段->服务器收到验证,返回->浏览器接收