网页从输入url到渲染的过程详解及答疑

参考一 https://juejin.im/post/5bf23afa6fb9a049be5d1494
参考二 https://github.com/sunyongjian/blog/issues/34
参考三 https://blog.csdn.net/weixin_44460333/article/details/89369316
参考四 https://www.cnblogs.com/Andya/p/7272462.html
参考五 https://juejin.im/post/5bbaa549e51d450e827b6b13
参考六 https://xianyulaodi.github.io/2017/03/22/老生常谈-从输入url到页面展示到底发生了什么

网页从输入url到渲染的过程

• 1.在浏览器中输入一个URL
• 2.通过DNS将域名解析成IP地址。域名只是与IP地址的一个映射。域名解析的过程实际是将域名还原为IP地址的过程(如果输入的是IP地址，此步骤省略)
• 3.根据解析到的IP地址加端口 ，浏览器发起http请求
• 4.浏览器建立一条与服务器的tcp连接（建立过程：三次握手）
• 5.浏览器通过tcp的三次握手建立好连接后，便向服务器发送HTTP请求，请求数据包
• 6.服务器收到并处理HTTP请求，根据请求信息去查找资源，返回响应信息
• 7.浏览器接收HTTP响应
• 8.如果报文中的状态码表示请求成功，则接受返回的资源（如HTML文件），至此浏览器已经拿到了一个HTML文档，并为了呈现文档而开始解析。
• 11.至此浏览器已经拿到了一个HTML文档，并为了呈现文档而开始解析。
• 12.页面全部渲染结束。
• 13.四次挥手关掉TCP连接。

知识点补充

DNS 域名解析

因为http 是基于tcp连接的，而tcp则是通过ip 地址去识别访问的。DNS 解析就是域名转化成ip 地址的过程。如果url里不包含端口号，则会使用该协议的默认端口号。HTTP协议默认80端口，HTTPS协议默认443端口。

HTTP 请求和TCP 连接

目前大部分的应用层连接都是 HTTP 协议，而 HTTP 是 TCP/IP 承载的，所以这一步先假定是建立的TCP 连接。

TCP 请求过程中的标识符：SYN，ACK，FIN

SYN
同步标识，通常用来建立连接。在“三次握手”的前两次出现。

ACK
确认标识，接收端确认接收到数据。

FIN
结束标识。表示双方数据发送完成，跟 SYN 类似，属于行为标识。

TCP 连接过程中各状态的含义

• LISTEN - 侦听来自远方TCP端口的连接请求；
• SYN-SENT -在发送连接请求后等待匹配的连接请求；
• SYN-RECEIVED - 在收到和发送一个连接请求后等待对连接请求的确认；
• ESTABLISHED- 代表一个打开的连接，数据可以传送给用户；
• FIN-WAIT-1 - 等待远程TCP的连接中断请求，或先前的连接中断请求的确认；
• FIN-WAIT-2 - 从远程TCP等待连接中断请求；
• CLOSE-WAIT - 等待从本地用户发来的连接中断请求；
• CLOSING -等待远程TCP对连接中断的确认；
• LAST-ACK - 等待原来发向远程TCP的连接中断请求的确认；
• TIME-WAIT -等待足够的时间以确保远程TCP接收到连接中断请求的确认；
• CLOSED - 没有