# 浏览器及网络协议

主要跟浏览器和网络协议有关

1735-613fffb6defee1735431dc5f89085d8b

浏览器的正式名字叫“Web Browser”,顾名思义,就是检索、查看互联网上网页资源的应用程序,名字里的Web,实际上指的就是“World Wide Web”,也就是万维网。

浏览器本质上是一个HTTP协议中的请求方,使用HTTP协议获取网络上的各种资源。当然,为了让我们更好地检索查看网页,它还集成了很多额外的功能。

浏览器本质上是一个解析器,也是一个客户端,用于将符合 W3C 的标记序列解析并还原到编码人员希望用户看到的呈现状态。浏览器本身为 javascript 提供了 DOM 和 BOM 等对象,供开发人员控制使用。

# 浏览器的实现原理和 API

原理API

# 浏览器的主要组件

1654-browser-components-1

  1. 用户界面

    包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面之外,其他显示的各个部分都属于用户界面。

  2. 浏览器引擎

    在用户界面和呈现引擎之间传送指令。

  3. 渲染引擎

    也称为浏览器内核(web browser engine)、排版引擎(layout engine)或样板引擎,是一种软件组件,负责获取标记式内容(如:HTML、XML 以及图像文件等)、整理信息(如 CSS、XSL),并将排版后的内容输出至显示屏或打印机。

    所有网页浏览器、电子邮件客户端以及其他需要根据表示性的标记语言来显示内容的应用程序,都需要排版引擎。

    各浏览器使用的浏览器内核
    1. IE:Trident。
    2. Chrome:前 WebKit,现 Blink。
    3. Firefox:Gecko。
    4. Safari:WebKit。
    5. Opera:前 Presto,现 Blink。
    6. Edge:EdgeHTML。
  4. 网络

    用于网络调用,如:HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。

  5. 用户界面后端

    用于绘制基本的窗口小部件,如:组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。

  6. JS 解释器

    一个专门处理 JS 脚本的虚拟机,一般会附带在网页浏览器中。

    各浏览器使用的JS解释器
    1. JScript:ie8-,ASP。
    2. Chakra:ie9+,Edge。
    3. V8:Chrome,Opera,Node.js,MongoDB。
    4. SpiderMonkey:Firefox。
    5. Nitro:Safari。
  7. 数据存储

    这是持久层。浏览器需要在硬盘上保存各种数据,如:cookie。HTML5 定义了「网络数据库」,这是一个完整(但是轻便)的浏览器内置数据库。

# 从输入 URL 到页面展示

1103-CzUwyQ

从图中可以看出,整个过程需要各个进程之间的配合,所以在开始正式流程之前,我们还是先来快速回顾下浏览器进程、渲染进程和网络进程的主要职责。

  • 浏览器进程主要负责用户交互、子进程管理和文件储存等功能。
  • 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。
  • 渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的,会存在一些恶意代码利用浏览器漏洞对系统进行攻击,所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里,就是为了保证系统的安全。

这个过程可以大致描述为如下:

  • 首先,用户从浏览器进程里输入请求信息;
  • 然后,网络进程发起 URL 请求;
  • 服务器响应 URL 请求之后,浏览器进程就又要开始准备渲染进程了;
  • 渲染进程准备好之后,需要先向渲染进程提交页面数据,我们称之为提交文档阶段;
  • 渲染进程接收完文档信息之后,便开始解析页面和加载子资源,完成页面的渲染。

输入URL背后的技术步骤

# 同一站点(same-site)

具体地讲,我们将“同一站点”定义为根域名(例如,domain.org)加上协议(例如,https:// 或者 http://),还包含了该根域名下的所有子域名和不同的端口,比如下面这三个:

https://a.domain.org
https://www.domain.org
https://www.domain.org:8080
1
2
3

它们都是属于同一站点,因为它们的协议都是 HTTPS,而且根域名也都是 domain.org

# 一些术语

  • URI(Uniform Resource Identifier,统一资源标识符)是一个指向资源的字符串。最通常用在 URL 上来指定 Web 上资源文件的具体位置。

URI另一个更常用的表现形式是URL(Uniform Resource Locator), 统一资源定位符,也就是我们俗称的“网址”,它实际上是URI的一个子集,不过因为这两者几乎是相同的,差异不大,所以通常不会做严格的区分。

扩展阅读:

上次更新: 2021-11-29