面经——浏览器工作原理

浏览器（也称为网络浏览器或互联网浏览器）是安装在我们设备上的软件应用程序，使我们能够访问万维网。在阅读这篇文字时，你实际上正在使用一个浏览器。

那浏览器具体是怎么工作的呢？ 当我们在浏览器的搜索地址栏中键入一个网络地址->按下回车键->试图访问的页面出现在屏幕上这个过程中到底发生了什么呢？

极其简单的回答可能是： 浏览器向服务器发生请求，服务器响应，浏览器对返回的数据进行渲染！！

哈哈哈，是这样的没错！ 但其实这个看似超级简单的过程中涉及到了很多内容！！大致如下：

• 导航并建立连接 （DNS、TCP 、TLS协商）
• 获取数据 （HTTP请求and响应）
• HTML解析 （词法分析、创建DOM、预加载器工作）
• CSS解析 （词法分析、创建CSSOM）
• JS执行
• 创建可访问树
• 渲染树 （结合 DOM和CSSOM 、布局、绘画、分层合成）

1. 导航并建立连接 （DNS、TCP 、TLS协商）

1.1 DNS【域名解析系统】 查询

域名(Domain Name)，用来与IP地址一一映射，使人们可以更方便地访问互联网！！！

域名系统（英文：Domain Name System，缩写：DNS），使用应用层协议，是互联网的一项服务。 它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。

简单来说就是：把域名转换成网络可以识别的ip地址，再通过IP地址访问主机。

1.2 TCP建立连接 （握手）

传输层提供进程和进程之间的逻辑通信。

TCP 是传输控制协议的缩写，是一种通信标准，用于传输层。 使应用程序和计算设备能够在网络上交换信息。它被设计用来在互联网上发送数据包，并确保数据和信息在网络上成功传递。

• CP提供可靠交付的服务【有ack进行传输数据的确认！！】，无差错、不丢失、不重复、按序到达。可靠有序，不丢不重
• TCP提供全双工通信

TCP连接的建立需要进行三次握手！！

• 第一次（客户-->服务器进行连接请求）：SYN = 1
• 第二次（服务器-->客户进行连接响应确认）：SYN = 1 ACK = 1
• 第三次（客户-->服务器进行确认的确认and可以携带数据内容）：ACK = 1

1.3 TSL 协商 （http VS https）

1.3.1 HTTP 协议

HTTP 超文本传输协议 ，应用层协议。主要用于 Web 上传输超媒体文本的底层协议，经常在浏览器和服务器之间传递数据。通信就是以纯文本的形式进行。HTTP协议是构建在TCP/IP协议之上的，是TCP/IP协议的一个子集。

• HTTP 是无状态的。

  • 无状态是 HTTP 协议对客户端请求状态没有进行存储，比如每次请求都需要重新登录

• HTTP 是无连接的。

  • 无连接主要是限制每次连接只处理一个请求。每次请求都是客户发起请求，服务端响应请求，然后就断开连接。这期间就是通过三次握手（基于TCP协议的三次握手） 建立连接，四次挥手断开连接。每次请求即便是多次请求并请求同一个资源，服务端都无法判断是否是相同请求，都需要重新响应请求。

所以，为了解决客户端和服务端保持会话连接，通过 cookie 和 session 来记录 http 状态。

1.3.2 HTTPS 协议

HTTPS是以安全为目标的HTTP通道 ，简单讲是HTTP的安全版，HTTP下加入SSL层(SSL协议)，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 https协议的主要作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

两者区别：

• 加密 ： HTTPS 是 HTTP 协议的更加安全的版本，通过使用SSL/TLS进行加密传输的数据；

  - 使用 HTTP 可能看到传输数据是： “这是明文信息”
  - 使用 HTTPS 可能看到： “283hd9saj9cdsncihquhs99ndso”
  

• 连接方式 ： HTTP（三次握手）和 HTTPS （三次握手+数字证书）连接方式不一样；

• 端口 ： HTTP 默认的端口是 80和 HTTPS 默认端口是 443

1.3.3 TLS 握手流程 （发生在 TCP 握手之后）

• 客户端 hello。浏览器向服务器发送一条信息，其中包括它所支持的TLS版本和密码套件，以及一串随机字节，称为 客户端随机数。

• 服务器 hello 和证书。服务器发回一条信息，其中包括服务器的SSL证书、服务器选择的密码套件和服务器随机数，这是服务器生成的另一个随机字节串。

• 认证。浏览器会向颁发证书的机构核实服务器的 SSL 证书。这样，浏览器就可以确定服务器就是它所说的那个人。

• 预主密码。浏览器会再发送一串随机的字节，称为主密钥，用浏览器从服务器的 SSL 证书上获取的公钥进行加密。主密码只能由服务器用私钥解密。

• 使用私钥。服务器解密预主密码。

• 创建会话密钥。浏览器和服务器从客户端随机数、服务器随机数和预主密码中生成会话密钥。

• 客户端完成。浏览器向服务器发送一个消息，说它已经完成。

• 服务器完成。服务器向浏览器发送一个消息，表示它也完成了。

• 安全对称加密实现。握手完成，通信可以继续使用会话密钥。

2. 获取数据（http请求and响应）

在我们与服务器建立安全连接后，浏览器将发送一个初始的 HTTP GET 请求。首先，浏览器将请求页面的 HTML 文件。它将使用 HTTP 协议来做这件事。

一旦服务器收到请求，它将对其进行处理并回复一个 HTTP 响应。在响应的正文中，我们可以找到所有相关的响应头和我们请求的HTML文档的内容

3. HTML 解析 （浏览器引擎进行解析）

...

(3~6 详见文章 浏览器工作原理)

7.渲染树

• 结合 DOM 和 CSSOM 得到一个包含所有可见节点、内容和样式的渲染树！！

  • 渲染树包含有关显示哪些节点及其计算样式的信息，但不包含每个节点的尺寸或位置。

• 布局（回流）阶段：

  • 接下来需要做的是计算这些节点在设备视口（浏览器窗口内）内的确切位置及其大小。浏览器在渲染树的根部开始这个过程并遍历它。

    以下操作都会触发回流：
    -   在 DOM 中添加或删除元素
    -   调整浏览器窗口大小
    -   更改元素的宽度、位置或使其浮动
    

• 绘画（重绘）阶段：

  • 在浏览器决定哪些节点需要可见并计算出它们在视口中的位置后，就可以在屏幕上绘制它们（渲染像素）了。 这个阶段也被称为光栅化阶段，浏览器将在布局阶段计算的每个盒子转换为屏幕上的实际像素。

    以下操作都会触发回流：
    -   改变元素的轮廓
    -   改变背景颜色
    -   改变不透明度或可见性
    

• 分层和合成： 确定不同图层