浏览器知识体系

作为前端开发工程师，浏览器的工作原理，是我们进行前端性能优化的基础，掌握底层的原理才能层层分析在实际项目中使用，快速给出准确的优化方案，下面是我个月自学前端所归纳出来的浏览器知识。

浏览器起源

说到浏览器我们当然要聊聊发展历史， 1949 年网景公司推出了代号为“网景导航者”的网景浏览器1.0，并迅速占领了市场大部分份额，我们的巨头微软一看，你这么吃香不行，于是立马收购了一家浏览器公司，在其基础上开发了Internet Explorer（我们俗称的 IE），然后利用微软的操作系统和IE浏览器捆绑销售，迅速垄断了市场， 1998 年 1 月，网景公司由于竞争失利，将软件取消收费并且开放了网景浏览器的源码，成立了非正式组织 Mozilla，可微软操作系统的市场占有率很大，造成其他浏览器的市场份额一直不变，直到 2008 年 chrome 出世了，并且由于界面简洁、加载快速、数据安全等这些特点迅速取代了 IE 的位置 。

内核

浏览器最重要的核心的部分就是 “Rendering Engine” ，分为渲染引擎和 JS 引擎两个部分组成，不过通常我们称之为 “浏览器内核”, 常见的浏览器内核可以分为四种: Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari），下面我一起来看看这四种常见内核。

1.Webkit 内核

Webkit : 是苹果公司自主研发的内核，也是 Safari 浏览器使用的内核。 Webkit 引擎包含渲染引擎 WebCore 和javascript 引擎 JSCore，其中 Google Chrome、360 极速浏览器以及搜狗高速浏览器高速模式也使用 Webkit 作为内核。

2.Trident 内核

Trident ：由微软开发，国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”，Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML，其中IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等都使用其做 Trident 内核。

3.Gecko 内核

Gecko ：火狐采用该内核，Gecko 的特点就是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码增加功能，且跨平台。 可惜这几年因其打开速度慢、升级频繁等原因，已经没落了。

4.Blink

Blink ：由谷歌和 Opera 共同开发，内置于 Chrome 浏览器之中，Blink 其实是 WebKit 的分支，大部分国产浏览器都是采用 Blink 内核进行二次开发。

进程与线程

那么什么是进程与线程呢？
进程：就是一个程序的运行实例。
线程：依赖于进程上，它是由进程来启动和管理的，使用多线程并行处理能提升运算效率。

1.两者之间的关系

1. 进程中任意线程执行出错，都会导致整个进程崩溃。
2. 线程之间共享进程中的数据，线程之间可以对进程的公共数据进行读写操作。
3. 当一个进程关闭后，系统会回收所占用的内存。
4. 进程之间的距离相互隔离。

2.单进程浏览器

单进程浏览器是指浏览器的所有功能模块,都是运行在同一个模块里。

缺点：

• 不稳定
  • 一个插件的意外崩溃会导致整个浏览器崩溃。
  • 一些复杂点的 JavaScript 代码有可能会使渲染模块崩溃。
• 不流畅
  • 同一时候渲染模块与 JS执行环境 只有一个可以使用，会导致整个浏览器失去响应，变卡顿。
  • 会存在内存不能完全回收的情况，页面内存出现泄漏。
• 不安全
  • 某些恶意插件可以获取到操作系统的任意资源。
  • 通过浏览器的漏洞，获取系统权限对电脑进行恶意操作。

3.多进程浏览器

多进程模式是指使每一个网页、每一个插件都是一个独立的进程。这样，其中一个崩溃也不会影响到其他页面的浏览。

组成

多进程浏览器组成分为五大部分：浏览器进程、渲染进程、GPU 进程、网络进程、插件进程，进程之间相互隔离，通过 IPC 来实现通信。

• 浏览器进程：主要负责页面显示、用户交互、子进程管理，同时提供储存等功能。
• 渲染进程： 核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页。
• GPU 进程：初衷是用来实现 3D CSS 的，随着 Chrome 的 UI 界面采用 GPU 来绘制，这使得 GPU 成了浏览器普遍的需求。
• 网络进程：主要负责页面的网络资源加载。
• 插件进程：主要负责插件的运行，由于插件易崩溃，所以单独使用插件进程来运行。

缺点：

• 资源占用
  • 每个进程都会包含公共基础结构的副本，这就意味着浏览器会消耗更多的内存资源。
• 体系结构
  • 浏览器各模块之间耦合性高、扩展性差等问题，会导致现在的架构已经很难适应新的需求了。

TCP/IP

网络的加载速度是直接影响 FP 的重要指标，TCP/IP 分为五层模型：物理层、网络层、数据链路层、网络层、传输层、应用层，我们这里只需要了解应用层。
首先我们看一下一个完整的 TCP 连接过程：
建立连接（三次握手） => 传输数据 => 断开连接（四次握手），这里的三次握手和四次握手我们不具体讲解，我们重点还是看 HTTP 应用层协议。

HTTP 应用层协议

HTTP 是基于 TCP/IP 协议通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。

1.特点

1. 简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有 GET、HEAD、PUT、DELETE、POST 。每种方法规定了客户与服务器联系的类型不同。由于 HTTP 协议简单，使得 HTTP 服务器的程序规模小，因而通信速度很快。
2. 灵活：HTTP 允许传输任意类型的数据对象。
3. 无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
4. 无状态：HTTP 协议是无状态的，HTTP 协议自身不对请求和响应之间的通信状态进行保存,任何两次请求之间都没有依赖关系。

2.HTTP 报文

HTTP 报文包括请求报文和响应报文两大部分,其中报文结构为

起始行 + 头部 + 空行 + 实体
复制代码

3.起始行

请求行用来说明请求类型,要访问的资源以及所使用的 HTTP 版本:

POST  /chapter17/user.html HTTP/1.1
复制代码

响应行用来由http版本、状态码和原因三部分组成。

HTTP/1.1 200 OK
复制代码

4.头部

请求头

响应头

5.空行

用于区分 头部 和 实体，最后一个响应头部之后是一个空行，发送回车符和换行符，通知服务器以下不再有响应头部。

6.实体

是 HTTP 请求或响应的主要部分，也就是具体的数据，请求报文对应请求体，响应报文对应 响应体。

HTTP 请求流程的八个阶段

• 构建请求
• 查找缓存
• 准备 IP 和端口
• 等待 TCP 队列
• 建立 TCP 连接
• 发送 HTTP 请求
• 服务器处理请求流程
• 服务器返回请求和断开连接

1.构建请求

首先，浏览器构建请求行信息，构建好后，浏览器准备发起网络请求

GET /index.html HTTP1.1
复制代码

2.查找缓存

在真正发起网络请求前，浏览器会先访问本地缓存查询是否有要的文件，如果查询到本地缓存了该文件，会拦截请求并直接结束请求。

3.准备 IP 地址和端口

首先第一步浏览器会请求 DNS 返回一个 IP 地址，之后如果 URL 没有指定端口，那么 HTTP 协议默认 80 端口。

4.等待 TCP 队列

根据浏览器来规定， Chrome 有个机制同一个域名同时最多只能建立 6 个 TCP 连接，主要看同一域名下的请求数量，超出 6 个，多出来的要进入等待状态，如果当前请求数少于 6 个直接进入 TCP 连接。

5.建立 TCP 连接

排队结束就到了浏览器通过 TCP 与服务器连接。
一个完整的 TCP 连接生命周期包括：建立连接、传输数据、断开连接。

6.发送 HTTP 请求

浏览器向服务器发起请求生成请求行:请求方法、请求地址、协议及版本。

7.服务器端处理请求流程

服务器向客户端返回请求生成：响应行、响应头、响应体，并判断其状态码。

8.断开连接

断开连接。

面试题

在浏览器里，输入 URL 到页面展示，这中间发生了什么？

我们可以这样理解，将这个过程看成两部分，一部分叫做导航,也就是用户发出 URL 请求到页面开始解析的这个过程，另一部分叫做流程。

导航

首先我们知道现在普遍多进程浏览器，当用户从浏览器中输入请求信息，然后网络进程发起 URL 请求，服务器响应 URL 请求之后， 浏览器进程开始准备渲染进程，渲染进程准备好后，通知浏览器进程，我们把这个阶段称做 “提交文档” 阶段，浏览器进程接收到了渲染进程的通知文档后,便开始移除之前的旧文档，然后通知渲染进程 “文档已提交”，此时渲染进程便进入了 “解析页面” 阶段。

流程

当用户在浏览器中输入 URL 时，地址栏会判断输入的是关键字还是搜索内容，还是请求的 URL 。
接下来，便进入页面资源请求过程，浏览器进程通过 IPC 吧 URL 请求发送至网络进程，网络进程查找本地缓存是否换存了资源，如果没有查找到进入网络请求流程，进入 DNS 解析，获取请求域名的服务器地址，接下来利用得到 IP 地址和服务器建立 TCP 连接然后向服务器发送构建的请求信息。