从输入网站URL到一个界面完全呈现会经历哪些过程？

前言：

        在 HTTP/1 协议中，TCP 四次挥手是用于断开连接的过程，而页面的渲染是在 HTTP 协议完成后进行的。

        在HTTP/2协议中，TCP的四次挥手和页面的渲染是两个不同的过程，它们之间是并行进行的。当一个HTTP/2连接不再需要时，四次挥手过程开始关闭TCP连接。同时，页面的渲染过程也在继续进行。

        在HTTP/2中，可以通过单个TCP连接传输多个请求和响应，因此一个TCP连接可能会持续较长时间，而页面渲染则可能在此期间进行多次。因此，TCP的四次挥手和页面的渲染可以看作是同时进行的独立的过程。

        在HTTP/3协议中， 使用的是基于 UDP 协议的 QUIC 协议。

        本次我们主要讨论HTTP/2协议的过程。

过程：

一、域名解析（DNS），找到IP服务器 

1.域名

 2.DNS
    DNS( Domain Name System)是“域名系统”的英文缩写，是一种组织成域层次结构的计算机和网络服务命名系统，它用于TCP/IP网络，它所提供的服务是用来将主机名和域名转换为IP地址的工作。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。
    简而言之，DNS就是将打在地址栏的域名转化为IP地址的东西（如果IP直接访问则此过程省略）

 

3.域名解析过程

---

分析图中过程：
                递归查询：可以看到每一次向下一个查询的服务器都变了，不是主机一个个去问，而是服务器自己一个个问下去。
            主机先是向本地域名服务器发送请求，如果查不到的话，
            本地域名服务器向根域名服务器发送请求（找别人），如果还是查不到的话，
            根域名域名服务器向顶级域名服务器发送请求（找别人），如果还是查不到的话，
            顶级域名服务器向权限域名服务器发送请求（找别人）。

            迭代查询：可以看到这里是主机一个个挨个问的地址。
            主机先是想本地域名服务器发送请求，如果查不到的话，
            本地域名服务器就让主机去向根域名服务器发送请求（主机去找，本地域名给目标根域名服务器的IP地址），如果还是查不到的话，
            根域名域名服务器让主机去向对应的顶级域名服务器发送请求（主机去找，根域名给目标顶级域名服务器的IP地址），如果还是查不到的话，
            顶级域名服务器让主机去向权限域名服务器发送请求（主机去找，顶级域名给目标权限域名服务器的IP地址）。

为什么第二种方式应用更广泛？
            它能够兼顾减少网络流量和提高用户体验两个方面。
            递归查询可以将多个 DNS 查询合并成一个，从而减少了 DNS 查询的次数，降低了网络流量；迭代查询通过缓存等技术，使得查询效率更高，可以更快地为用户提供结果，提高了用户体验； 递归查询是一种较为可靠的查询方式，因为它可以确保获得最终的回答。在一些网络不稳定的情况下，使用递归查询能够保证 DNS 查询的准确性和可靠性，提高了用户的满意度。

---

 

DNS 记录中包含一个 Time-To-Live（TTL）值，用于指定域名解析结果在缓存中的有效期限。设置合适的 TTL 值可以在保证缓存数据更新的同时减少不必要的 DNS 查询，从而减少网络流量和提高用户体验。

    （1）浏览器缓存
        浏览器会检查缓存中有没有域名对应的ip地址，这个缓存是有过期时长的，一般是几分钟到几小时不等。
     （2）系统缓存 
        如果浏览器自身的缓存里面没有找到对应的条目，就搜索操作系统自身的DNS缓存,   如果找到且没有过期可以在命令行下使用 ipconfig /displaydns 来进行查看 ）
     （3）hosts文件 
        如果在Windows系统的DNS缓存也没有找到，那么尝试读取hosts文件（位于C:\Windows\System32\drivers\etc）
    （4）本地域名服务器 
        如果本地也没有配置那么就会根据向本机配置的本地区DNS域名服务器（LDNS）发起请求
            如果LDNS也不能解析，那么就直接到根域名服务器请求解析。
    （5）根域名服务器查询、TLD 域名服务器查询、权限域名服务器
        
    （6）返回 IP 地址

二、客户端与服务端进行TCP三次握手连接

1.为啥需要三次握手？
    谢希仁著《计算机网络》中讲“三次握手”的目的是**“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”**。

2.注意一下，TCP是双向的，所以不存在绝对不变的发送方接收方，这里的两台主机都同时是发送方和接收方

3.过程，简而言之，即客户端先向服务器发送一个 SYN 包，服务器收到后回应一个SYN+ACK 包，客户端再回应一个 ACK 包，完成连接建立。

    (1)客户端发送一个带 SYN=1，Seq=x 的数据包到服务器端口（第一次握手，由浏览器发起，告诉服务器我要发送请求了）

        
        SYN=1：(A)要建立连接了！
        seq=x（随机）：因为还没有数据，所以写什么都无所谓
    (2)服务器发回一个带 SYN=1， ACK=1， Seq=y, ack=x+1的响应包以示传达确认信息（第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧）

        
        SYN=1：我(B)同意你(A)建立连接！
        ACK=1：连接建立了，之后的ACK必须都置为1
        seq=y（随机）：因为还没有数据，所以写什么都无所谓
        ack=x+1：之前发送方(A)说发送的是第x位数据（虽然发送方是瞎说的），所以我(B)要的是x+1位数据
    (3)客户端再回传一个带 ack=y+1， Seq=Zx+1,ACK=1的数据包，代表“握手结束”（第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧）
        SYN=0：SYN只有在建立连接时才为1，其他时候均设为0
        ACK=1：连接建立了，之后的ACK必须都置为1
        seq=x+1：我(A)发送的报文段的第一个字节就是x+1
        ack=y+1：之前接收方(B)说发送的是第y位数据（虽然接收方是瞎说的），所以我(A)要的是y+1位数据

4.扩展

        SYN洪泛攻击发生在OSI第四层，这种方式利用TCP协议的特性，就是三次握手。攻击者在短时间内伪造大量不存在的 IP 地址，并向服务端不断地发送 SYN 包，服务端则回复确认包，并等待 攻击者确认，攻击者不对其进行再确认，那这个TCP连接就处于挂起状态，也就是所谓的半连接状态，由于源地址不存在，服务器收不到再确认，还会重复发送ACK给攻击者。

        这些伪造的 SYN 包将长时间占用半连接队列，导致正常的 SYN 请求因为队列满而被丢弃，从而引起网络拥塞甚至系统瘫痪。由于每一个都没法完成三次握手，所以在服务器上，这些TCP连接会因为挂起状态而消耗CPU和内存，最后服务器可能死机，就无法为正常用户提供服务了。

        那么如何应对呢？可以参考以下回答哦~

TCP SYN泛洪攻击和常见缓解措施 - 知乎

三、客户端向服务器发送HTTP请求

1.TCP三次握手完成之后，浏览器与服务器之间就会建立起一个可靠的虚拟通道，于是浏览器就可以发送自己的HTTP请求了。

2.HTTP 请求报文或者响应报文在 TCP 连接通道上进行传输的时候，由于这些报文比较大，为了更容易和准确可靠的传输，TCP 会将 HTTP 报文按序号分割成若干报文段并加上 TCP 首部，分别进行传输。接收方在收到这些报文段后，按照序号以原来的顺序重组 HTTP 报文。

3.请求报文
    客户端（浏览器）向服务器发送的请求报文。报文的所有字段都是ASCII码。
    一个完整的 HTTP 请求报文通常包括四个部分：
        请求行：包括请求方法，请求的资源路径URL和 HTTP 协议版本信息；
        请求头：包含一些请求的元数据，比如请求的主机名、用户代理、接受的数据类型等；
        空行：请求头和请求体之间需要有一个空行；
        请求体（可选）：如果请求方法需要向服务器提交数据，则请求体中会包含所提交的数据。        例如，当使用 POST 方法向服务器提交表单数据时，表单数据就存储在请求体中，而GET请求没有请求体。

4.请求方法

四、服务器处理请求并返回HTTP报文

1.服务器根据请求报文中的信息，执行相应的操作，如获取所请求的资源等。

2.服务器将处理结果封装成 HTTP 响应报文，并通过 TCP 连接返回给客户端。

3.一个完整的 HTTP 响应报文通常包括三个部分
    状态行：它包含了HTTP协议版本、状态码和状态消息。
    响应头：响应头用来描述服务器的信息和响应报文的附加信息，通常包括内容类型、内容长度、日期时间等。
    响应体：包含了服务器返回的实际数据，它可以是HTML、XML、JSON、文本等格式的数据。

4.状态码

五、浏览器解析渲染页面

    1.拿到数据后，网络进程会通过content-type进行文件类型，如果是字节流类型，则会交给浏览器下载，不会进行渲染。如果是html类型，浏览器进程会通知渲染进程进行渲染。所以说渲染流程不是一定进行的。

      

   2.浏览器渲染主要有以下步骤:

        （1）解析收到的文档，根据文档定义构建一棵DOM树， DOM 树是由 DOM 元素及属性节点组成的。

        （2）对CSS 进行解析，生成 CSSOM 规则树。

        （3）根据DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含 有颜色和大 小等属性的矩形，渲染对象和DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些DOM 元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。

        （4）当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局(也可以叫做回流 ) 。这一 阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“ 自动重排 ” 。

        （5）布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的paint 方法将它们的内容显示在屏幕上，绘制使用UI基础组件。

注意：这个过程是逐步完成的，为了更好的用户体验，渲染引擎会尽可能早的把内容呈现到屏幕上，并不会等到所有的html 都解析完成知乎再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其他内容。

回流一定会触发重绘，而重绘不一定会回流

六、TCP四次挥手关闭客户端和服务器的连接

1.过程

    (1)发起方向被动方发送报文，FIN（finish）=1、seq=u，表示已经没有数据传输了。(第一次挥手：由浏览器发起的，发送给服务器，我请求报文发送完了，你准备关闭吧)
        FIN=1：(A)要释放连接了！
        seq=u：发了好多数据，这里只是用u指代一下，这里u是有确定值的
    (2)被动方发送报文，ACK（acknowledge）=1、seq=v、ack=u+1，表示同意关闭请求。(第二次挥手：由服务器发起的，告诉浏览器，我请求报文接受完了，我准备关闭了，你也准备吧)
        ACK=1：连接建立了，之后的ACK必须都置为1
        seq=v：发了好多数据，这里只是用v指代一下，这里v是有确定值的
        ack=u+1：之前发送方(A)说发送的是第u位数据，所以我(B)要的是u+1位数据（尽管此时A已经决定释放连接了）
    (3)被动方向发起方发送报文段，FIN=1、ACK=1、ack=u+1，请求关闭连接。(第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧)
        FIN=1：(B)要释放连接了！
        ACK=1：连接建立了，之后的ACK必须都置为1
        seq=w：发了好多数据，这里只是用w指代一下，这里w是有确定值的
        ack=u+1：之前发送方(A)说发送的是第u位数据，所以我(B)要的是u+1位数据（因为A直接不发数据了，所以第二段第三段的ack都是u+1）
    (4)发起方向被动方发送报文段，ACK=1、seq=u+1、ack=w+1。然后进入等待 TIME_WAIT 状态。被动方收到发起方的报文段以后关闭连接。发起方等待一定时间未收到回复，则正常关闭。(第四次挥手：由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧)
        ACK=1：连接建立了，之后的ACK必须都置为1
        seq=u+1：之前发的数据时第u位数据，B也要第u+1位数据，所以我发第u+1位数据
        ack=w+1：之前发送方(B)说发送的是第w位数据，所以我(A)要的是w+1位数据

2.为什么需要四次挥手
    其实是客户端和服务端的两次挥手，也就是客户端和服务端分别释放连接的过程。

    之所以第二次和第三次请求都是由服务端发送，有两个原因。

    首先，客户端发送关闭TCP连接请求后，服务端需要及时回应，避免客户端以为数据丢失而重复发送请求。

    其次，服务端不可能在服务端请求后马上就关闭进程，可能有大量数据还待处理和返回，所以需要一定时间来处理。

3.可以看到，客户端在发送完最后一次确认之后，还要等待2MSL的时间，为什么？
        (1)让B能够按照正常步骤进入CLOSED状态。
            由于客户端最后一个ACK可能会丢失，这样B就无法正常进入CLOSED状态。于是B会重传请求释放的报文，而此时A如果已经关闭了，那就收不到B的重传请求，就会导致B不能正常释放。而如果A还在等待时间内，就会收到B的重传，然后进行应答，这样B就可以进入CLOSED状态了。
        (2)防止已经失效的请求连接报文出现在下次连接中。
            在这2MSL等待时间里面，本次连接的所有的报文都已经从网络中消失，从而不会出现在下次连接中。

*扩展的计网内容

 

 

 

1.运输层：负责向两台主机中进程之间的通信提供通用的数据传输服务，主要使用以下两种协议：
    （1）传输控制协议TCP：提供面向连接的、可靠的数据传输服务，数据传输单位为报文段。
        TCP必须要建立连接之后才可以进行数据交换，所以TCP是面向连接的。
    （2）用户数据报协议UDP：无连接协议，也称透明协议，提供无连接的尽最大努力的数据传输服务（不保证数据传输的可靠性），数据传输单位是用户数据报。
        UDP是无连接的，减少开销和发送数据之前的时延；UDP是面向报文的，适合一次性传输少量数据的网络应用。

2.tcp和udp的主要区别：
        tcp传输数据稳定可靠，适用于对网络通讯质量要求较高的场景，需要 准确无误的传输给对方。比如，传输文件，发送邮件，浏览网页等等，udp的优点是速度快，但是可能产生丢包，所以适用于对实时性要求较高但是对少量丢包并没有太大要求的场景。比如：域名查询，语音通话，视频直播等。

3.HTTP/3 使用的是基于 UDP 协议的 QUIC 协议。

    与传统的 HTTP/1.x 和 HTTP/2 协议不同，HTTP/3 不使用 TCP 作为传输层协议，而是使用 QUIC。QUIC 是一种基于 UDP 的传输协议，它结合了 TCP 和 TLS 的功能，提供了更快的连接建立和数据传输速度，以及更好的安全性和可靠性。
    HTTP/3 采用了 QUIC 的传输机制和流量控制机制，从而可以更好地应对网络拥塞和延迟问题，提高网络通信的性能和效率。同时，HTTP/3 还利用 QUIC 的加密机制，提供更好的安全性，使数据传输更加安全可靠。

侵权必删~