浏览器页面渲染——经典题目：输入URL后发生了什么？

导航

用户通过点击超链接、按钮或者浏览器地址栏部分的按钮，进行页面跳转，此时会出发浏览器地址栏页面地址的更新；

DNS查询

浏览器根据域名（Domain）向DNS服务器查询该domain对应的IP地址；

TCP三次握手

在获取到IP地址找到对应的服务器后，建立网络连接，确切的说是TCP连接。这是一种可靠的网络连接协议。建立TCP连接需要经过三次握手。 这三次握手可以这样描述：

在一个伸手不见五指的黑夜里，有两个人C和S。他们之间需要通过声音（网络）建立一个可靠的联系通道。那么就要先进行确认。

C先说：你能听到我说话吗？（SYN） S听到后，会说：我能听到你讲话，你能听到我讲话吗？（SYN- ACK） C听到后，就会说：我能听到。（ACK）

至此，C和S双方才能确认彼此是可以听到对方说话的。

image

TLS协商（假如是HTTPS协议类型）

TLS 协商是在TCP三次握手的基础上增加双方身份认证和协商加密方式的过程。 说个历史，TLS协商（握手）也叫“SSL握手”，SSL是为HTTP开发的安全协议。不过，SSL 目前已被 TLS 所取代。SSL 握手现在称为 TLS 握手，尽管“SSL”这个名称仍在广泛使用。 延续上面TCP三次握手的例子

当C和S的三次TCP握手完成后，

C会对S发送一条“问候语”，里面包括C支持的TLS版本，加密算法以及被称为“客户端随机数”的随机字节； S在收到C发送来的消息后，会回复一条“问候语”；里面信息包括服务器的SSL证书、服务器选择的加密算法（从C发送来的加密方式里）以及“服务器随机数” C 在收到S发送来的信息后，会去证书验证机构那里验证S发来的证书的真伪性，以确定S的身份是否为冒充。如果验证通过，C会再发送一次随机字节“premaster secret”，这密钥是由公钥🔑加密🔐，且只能由私钥解密。那么公钥是哪里来的呢？答：从S发送给C的SSL证书中获取。 S利用自己手里的私钥对C发来的“premaster secret”进行解密。在此期间，C和S双方会使用客户端随机数、服务器随机数和premaster secret 生成会话密钥，双方应得到相同的结果。 C向S发送一条用会话密钥加密的“已完成”信息 S 向C发送一条用会话密钥加密的“已完成”信息

然后TLS协商完成，如果中间有证书验证不通过或者加密方式不支持等异常，此次会话连接过程都会被中断。 在协商完成之后，后续的通信数据都是用会话密钥加密后传输的，由于只有S和C拥有会话密钥，所以即使在通信过程中，被别人窃取了数据，也无法进行解密。

截屏2024-03-20 21 07 07

在HTTPS中，证书的作用就是交由一个比较权威的第三方对证书真伪进行校验，从而避免中间人攻击。什么是中间人攻击，就是在C和S之间出现了传话者，这个传话者在面对真实的S和C时，分别冒充另一方。因为在漆黑的夜晚，看不清对方的样貌，那如何才能知道对方是真的S和C呢？这时候就有了另外一个人，他会保存S的身份信息，然后C拿着证书去向他进行验证。验证为真则为真，否则为假。 那兴许有人就要问了，证书不可以伪造吗？答：不可以。因为进行认证的信息是事先存在本地客户端的。

数据Response

TCP慢启动，在开始传输数据时，服务端会逐步增加每次的数据发送量，已确定当前网络带宽最大可利用空间，从而进行最大效率的数据传输；否则，过小的单次数据传输量，会导致客户端发送较多的ACK响应，从而挤占网络带宽。

慢启动（Slow Start）：

慢启动是TCP连接刚开始发送数据时的一种策略。它的目标是在网络负载较轻的情况下，迅速找到合适的网络传输速率。具体流程如下：

  1. TCP连接刚建立时，发送方将拥塞窗口（congestion window）设置为一个较小的值；
  2. 每当收到一个确认（ACK）时，拥塞窗口就会加倍，即指数增长；
  3. 发送方继续以这种方式增大拥塞窗口，直到达到一个阈值，称为慢启动门限（slow start threshold）；

慢启动的目的是避免在网络负载较重时引发拥塞。通过逐渐增加发送速率，慢启动可以让发送方逐步感知网络的可用带宽，从而避免发送过多的数据导致网络拥塞。

拥塞避免（Congestion Avoidance）

拥塞避免是在慢启动阶段后和达到慢启动门限后的一种传输状态。它的目标是在网络拥塞的情况下，尽量减少数据包的丢失，从而避免进一步加剧网络拥塞。具体流程如下：

  1. 一旦达到慢启动门限，发送方将进入拥塞避免状态；
  2. 拥塞避免状态下，发送方的拥塞窗口按线性增长，在每一个传输轮次中只增加一个拥塞窗口大小的数据；
  3. 如果检测到数据包丢失，则表示网络可能已经发生了拥塞。此时，发送方会将慢启动门限设置为当前拥塞窗口的一半，并重新开始慢启动过程；

拥塞避免通过逐渐增加发送速率，但速度较慢，以防止过多的数据包在网络中积聚，从而减少网络拥塞的可能性。

慢启动和拥塞避免机制共同作用，可以使TCP连接根据网络的状况自适应地调整传输速率，避免网络拥塞并提高传输效率。

数据解析

在获取到服务端返回到数据后，浏览器开始对获取的数据进行解析。这个过程中会包括以下几种操作

  1. 构建DOM树；
  2. 构建CSSOM树（样式树）；
  3. JS编译解析；
  4. 预加载扫描器扫描预加载资源；

渲染

  1. 将DOM树与CSSOM树组合成渲染树
  2. 布局
  3. 绘制；
  4. 合成