浏览器组成部分、用户代理、AJAX

浏览器的主要功能是从服务器检索 web 资源并将其显示在窗口中。
web 资源通常是 HTML 文档、css、js文件，也可能是图片音视频等内容，通过 URL 来定位。URL 详见《# 前端网络基础知识——分层模型、URL、应用协议》

浏览器组成部分

现代浏览器通过架构图中的 7 大组件来运作：

• 用户界面（UI）：浏览器用户界面，如地址栏、前进、后退、书签按钮等。
• 浏览器引擎（BE）：连接 UI 和渲染引擎的桥梁，数据持久化交互等。
• 渲染引擎（RE）：即浏览器内核，如webkit、blink等，参与从解析 HTML 到绘制页面的整个过程。
• 网络（NET）：可开启浏览器网络进程，使用各种通信协议获取 URL 资源，如发送 HTTP 请求。
• JS 解释器（JSI）：即 js 引擎，如 chrome V8 等，解释运行 js 代码。
• 用户界面后端（UIB）：用于绘制基本的窗口部件，向下调用操作系统的用户界面，如下拉框，文本框，按钮等。
• 数据存储（DS）：持久层，用户保存数据到磁盘中，如 cookie、localStorage、indexDB、FileSystem 等。

用户代理

浏览器又被称为“用户代理”（User Agent），其中主要是代表用户与服务器进行通信。在浏览器的网络组件中，拥有两大核心能力：

• 自动发出请求的能力
• 自动解析响应的能力

一、自动发出请求的能力：

1. 当用户在地址栏输入了一个地址并按下了回车：
   浏览器会自动解析 URL，并发出一个 GET 请求，同时抛弃当前页面。

2. 当用户点击了页面中的 a 元素：
   浏览器会拿到 a 元素的 herf 地址，并发出一个 GET 请求，同时抛弃当前页面。

3. 当用户点击了 submit 类型的提交按钮：
   浏览器会获取按钮所在 form 元素的 action 属性地址和 method 属性值，然后把表单中的数据组织到请求体中并发出指定请求，同时抛弃当前页面。

4. 当解析 HTML 时遇到了 link/img/video/audio/script 等元素：
   浏览器会拿到对应地址，发出 GET 请求。

5. 当用户点击了刷新：
   浏览器会拿到当前页面的地址、请求方法，重新发一次 GET 请求，同时抛弃当前页面。

二、自动解析响应的能力：

1. 识别响应码：
   浏览器能够自动识别响应码，并针对特殊响应码自动进行特殊处理，如 301、302。

2. 根据响应结果做不同的处理：
   浏览器能自动分析响应头中的 Content-Type，根据不同的 MINE 值进行不同处理，如 text/plain、image/png。

AJAX

AJAX（asyc js and xml），是浏览器给 js 的一套 API，是浏览器发送请求的统称，始终都是异步执行。

两种实现方式：XHR（XMLHttpRequest）、Fetch（html5 新发布）

功能	XHR	Fetch
发送请求和获取响应	✅	✅
监控请求进度	✅	❌
监控响应进度	✅	✅
请求取消	✅	✅
控制 cookie 的携带	❌	✅
控制重定向	❌	✅
流式传输	❌	✅
service work 可用	❌	✅
API 风格	Event	Pormise
第三方库	axios	umi-request