输入一个url全过程详解

文章目录 显示

? 优质资源分享 ?

学习路线指引（点击解锁）	知识定位	人群定位
? Python实战微信订餐小程序 ?	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
?Python量化交易实战?	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

2.浏览器接收到这个url之后，会根据这个url会先查看缓存，如果有缓存且没有过期的话直接提供给客户端，完成页面渲染。

3.否则浏览器就会通过DNS解析url ，获得协议名、主机名、端口号。

DNS解析详解：

输入域名时，操作系统会先检查自己本地host文件中是否有这个网址的映射关系，如果有，就调用这个IP地址映射，完成域名解析。
如果host没有这个域名的映射，则查找本地的DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。
如果本地解析器缓存没有的话，则查找本地DNS服务器，如果要查询的域名包含在本地配置资源中，则完成域名解析。
如果本地DNS服务器没有的话，就会请求根服务器，根服务器就会返回一个负责该区域的主服务器IP
本地域名服务器根据主服务器IP，链接到这个主域名服务器，如果有这个域名的话，就调用这个IP地址映射，完成域名解析。如果没有的话，则递归请求下一级域名服务器，直到找到对应的域名

TCP三次握手：

第一次握手：客户端向服务器发送一个 SYN=1 报文，并指定客户端的初始化序列号 seq=x。此时客户端处于SYN_Sent 状态
第二次握手：服务器接收到客户端的 SYN=1 报文后，同意连接的话，会发出一段确定报文。确定报文中应该ACK= 1，SYN= 1，确认号是ack=x+1,同时也要为自己初始化一个序列号seq=y.此时服务器处于 SYN-RCVD
第三次握手：客户端接收到 SYN 报文之后，还会向服务器发送确定。确定报文的 ACK=1，ack=y+1 ,自己的序列号变成 x+1。TCP 连接建立，客户端处于已连接状态。

TCP 连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。如果是 HTTPS，还需要进行 TSL 协商。服务器还会检查 HTTP 的请求头，看是否包含缓存信息。

TCP四次挥手：

第一次挥手：客户端向服务端发送一个FIN报文，报文中指定一个序列号。此时，客户端处于 FIN_WAIT-1状态
第二次挥手：服务端收到客户端发送的 FIN报文后，会将客户端的序列号+1 作为ACK报文的序列号值发送给客户端，表明收到了客户端的报文。然后服务器就会处于 CLOSE-WAIT-1状态
第三次挥手：服务端向客户端发送 FIN报文，且指定一个序列号。此时，服务端处于 LAST_ACK状态
第四次挥手：客户端收到服务端发送的FIN报文后，会将服务端的序列号+1 作为ACK报文的序列号值发送给服务端，此时客户端处于 TIME_WAIT 状态。需要等服务端确定收到自己的ACK报文后才会进入 CLOSED 状态
服务端接收到 ACK报文后，就关闭连接，处于 CLOSED 状态。

渲染的具体过程：

浏览器会通过 HTML Parser （HTML解析器）根据深度遍历的原则，将html解析成 DOM tree （DOM 树）。
浏览器会通过 CSS Parser （CSS解析器）将CSS 解析成 CSS Rule Tree（CSSOM 树）。
浏览器会将 javascript 通过 DOM API 或者 CSSOM API 将 JS代码进行解析并应用到布局中，且会呈现出响应式的结果。
根据 DOM 树与 CSSOM 树构建出响应的 render Tree。
接下来就是进行重排（reflow）与重绘（repaint）。当页面中任意一个节点的几何尺寸发生变化的时候，就会触发重排，就会重新计算页面中所有的节点的位置。当页面中任意元素的样式属性发生变化时（几何尺寸不发生变化），就会发生重绘，重新绘画发生变化的元素。重排一定会触发重绘，而重绘不一定会有重排。
paint：绘制。遍历render Tree，并调用硬件图形API 来绘制每个节点到页面上。