浏览器地址栏输入url,页面到底是怎么处理的呢

来跟我读:

  1. 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;
  2. 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);
  3. 浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTMLDOM);
  4. 载入解析到的资源文件,渲染页面,完成。

是不是背的嘎嘎熟了??说具体点呢

  1. 在浏览器地址栏输入URL
  2. . 浏览器查看缓存 ,如果请求资源在缓存中并且新鲜,跳转到转码步骤
    1. 如果资源未缓存,发起新请求
    2. 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。
    3. 检验新鲜通常有两个HTTP头进行控制ExpiresCache-Control: - HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期 - HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
  3. 浏览器解析URL获取协议,主机,端口,path
  4. 浏览器组装一个HTTP(GET)请求报文
  5. 浏览器获取主机ip地址 ,过程如下:(我理解他就是一层一层找ip,先从最内层一点一点往外找,跟js作用域链那个感觉应该差不多)
    1. 浏览器缓存
    2. 本机缓存
    3. hosts文件
    4. 路由器缓存
    5. ISP DNS缓存
    6. DNS递归查询(可能存在负载均衡导致每次IP不一样)
  6. 打开一个socket与目标IP地址,端口建立TCP链接 ,三次握手如下:
    1. 客户端发送一个TCP的SYN=1,Seq=X的包到服务器端口
    2. 服务器发回SYN=1, ACK=X+1, Seq=Y的响应包
    3. 客户端发送ACK=Y+1, Seq=Z
  7. TCP链接建立后发送HTTP请求
  8. 服务器接受请求并解析,将请求转发到服务程序,如虚拟主机使用HTTP Host头部判断请求的服务程序
  9. 服务器检查HTTP请求头是否包含缓存验证信息 如果验证缓存新鲜,返回304等对应状态码
  10. 处理程序读取完整请求并准备HTTP响应,可能需要查询数据库等操作
  11. 服务器将响应报文通过TCP连接发送回浏览器
  12. 浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重用,关闭TCP连接的四次握手如下
    1. 主动方发送Fin=1, Ack=Z, Seq= X报文
    2. 被动方发送ACK=X+1, Seq=Z报文
    3. 被动方发送Fin=1, ACK=X, Seq=Y报文
    4. 主动方发送ACK=Y, Seq=X报文
  13. 浏览器检查响应状态吗:是否为1XX,3XX, 4XX, 5XX,这些情况处理与2XX不同
  14. 如果资源可缓存,进行缓存
  15. 对响应进行解码(例如gzip压缩)
  16. 解析HTML文档,构件DOM树,下载资源,构造CSSOM树,执行js脚本
    • 解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树,然后layoutpainting渲染、复合图层的合成、GPU绘制、外链资源的处理、loadedDOMContentLoaded
    • CSS的可视化格式模型(元素的渲染规则,如包含块,控制框,BFCIFC等概念)
    • JS引擎解析过程(JS的解释阶段,预处理阶段,执行阶段生成执行上下文,VO,作用域链、回收机制等等)
    • 其它(可以拓展不同的知识模块,如跨域,web安全,hybrid模式等等内容)

三次握手 四次挥手

TCP(传输控制协议)是一种可靠的面向连接的协议,它使用三次握手和四次挥手来建立和终止连接。下面详细解释三次握手和四次挥手的过程:

我理解版:

三次握手(Three-Way Handshake)

  1. 第一次握手(SYN):客户端跟服务端发送一个请求,请求表示想要建立链接(就好像打电话,我跟朋友说"喂",可以聊天吗)
  2. 第二次握手(SYN + ACK):客户端响应服务端,表示同意建立链接(就好像,朋友也说"喂",然后他会给你返回一个口令,下次说这个口令我就跟你聊天)
  3. 第三次握手(ACK):客户端再次向服务端发送请求,他会带着服务端第二次握手同意建立链接返回的一个标志ACK进行发送,这样服务端就知道我已经同意跟他链接了,这样通讯就建立起来了

四次挥手(Four-Way Handshake)

  1. 第一次挥手(FIN):通讯结束了,客户端告诉服务端,我要关闭啦,但是这个时候她还是可以接受的一个状态,"关闭了一半"
  2. 第二次挥手(ACK):服务端响应客户端,说好的,那我也要关闭了
  3. 第三次挥手(FIN):客户端收到服务端的关闭响应,发送最后一条消息,然后并关闭聊天
  4. 第四次挥手(ACK):服务端收到客户端已经关闭的消息,关系通道

我理解的可能有偏颇,要是不对请看官方版

官方版:

三次握手(Three-Way Handshake)

三次握手是用于建立TCP连接的过程,确保客户端和服务器都准备好进行通信。它包括以下步骤:

  1. 第一次握手(SYN)

    • 客户端发送一个TCP报文,其中包含一个SYN(同步)标志位,以请求建立连接。
    • 客户端选择一个初始的序列号(sequence number)并发送给服务器。
  2. 第二次握手(SYN + ACK)

    • 服务器收到客户端的SYN报文,并返回一个带有SYN和ACK(确认)标志位的报文,表示接受连接请求。
    • 服务器也选择一个初始的序列号,并将确认号设置为客户端的序列号加1,以确认接收到的数据。
  3. 第三次握手(ACK)

    • 客户端收到服务器的响应后,发送一个带有ACK标志位的报文,表示确认服务器的确认。
    • 客户端将确认号设置为服务器的序列号加1。

此时,TCP连接已经建立,双方都可以开始发送数据。

四次挥手(Four-Way Handshake)

四次挥手是用于终止TCP连接的过程,确保双方都安全地关闭连接。它包括以下步骤:

  1. 第一次挥手(FIN)

    • 客户端发送一个带有FIN(结束)标志位的报文,表示它已经完成了数据的发送,但仍可以接收数据。
    • 客户端进入"半关闭"状态,不再发送数据,但仍能接收来自服务器的数据。
  2. 第二次挥手(ACK)

    • 服务器收到客户端的FIN报文后,发送一个带有ACK标志位的报文,表示已收到并确认客户端的FIN。
    • 服务器继续发送可能还未传输完的数据。
  3. 第三次挥手(FIN)

    • 服务器完成数据传输后,发送一个带有FIN标志位的报文,表示它也已经完成了数据的发送。
    • 服务器进入"半关闭"状态,不再发送数据,但仍能接收来自客户端的数据。
  4. 第四次挥手(ACK)

    • 客户端收到服务器的FIN报文后,发送一个带有ACK标志位的报文,表示已收到并确认服务器的FIN。
    • 此时,TCP连接彻底关闭,双方都无法再发送数据。

需要注意的是,TCP连接是全双工的,因此在终止连接时,客户端和服务器可以分别单独关闭发送通道,而仍然保持接收通道打开,以确保双方能够接收到所有的数据。这就是为什么在挥手过程中会出现"半关闭"状态。

缓存

什么是缓存?为了减少资源请求次数,加快资源访问速度,浏览器对资源文件如图片、css文件、js文件等有一个缓存功能,而浏览器缓存策略又分为强缓存和协商缓存,什么是强缓存?什么是协商缓存?两者之间的区别又是什么?

强缓存

所谓强缓存,可以理解为强制缓存的意思,即浏览器在访问某个资源时会判断是否使用本地缓存里已经存在的资源文件,使用本地缓存的话则不会发送请求到服务器,从而达到减轻服务器访问压力的作用,且由于直接从本地缓存读取资源文件,大大提高了加载速度。

我理解强缓存就是根据HTTP1.0提供Expires、TTP1.1增加了Cache-Control: max-age=,进行判断是否使用缓存,过期了就请求,没过期就用

Cache-Control除了max-age外,还可以设置其它属性值: - no-cache: 不使用强缓存(但仍会使用协商缓存)。 - no-store: 不使用缓存(不使用强缓存也不使用协商缓存),每次都向服务器发送资源请求。 - private: 只允许客户端使用缓存,不允许其他代理服务器进行缓存。 - public: 客户端和代理服务器都可缓存。 - s-maxage: 与max-age类似,区别是s-maxage是设定代理服务器的缓存时间。

协商缓存

在强缓存里,是否使用缓存是由浏览器来确定的,而协商缓存则是由服务器来告诉浏览器是否使用缓存资源,也就是浏览器每一次都要发送请求到服务器询问是否使用缓存,协商缓存的具体流程如下:

  1. 浏览器初次请求资源,服务器返回资源,同时生成一个Etag值携带在响应头里返回给浏览器,当浏览器再次请求资源时会在请求头里携带If-None-Match,值是之前服务器返回的Etag的值,服务器收到之后拿该值与资源文件最新的Etag值做对比。
    • 如果没有变化则返回304,告诉浏览器继续使用缓存(不返回资源文件)。
    • 如果发生变化,则返回200和最新的资源文件给浏览器使用。

强缓存设置的过期时间来判断是否使用缓存,未过期则从本地缓存里拿资源,已过期则重新请求服务器获取最新资源。

缓存则是浏览器本地每次都向服务器发起请求,由服务器来告诉浏览器是从缓存里拿资源还是返回最新资源给浏览器使用。

这个家伙帖子带图片,比较好理解,感兴趣可以看一下juejin.cn/post/725929...


妈呀这玩意,摊开跟树叶子是的,一枝一大摊,日后再议日后再议

相关推荐
运维Z叔1 小时前
云安全 | AWS S3存储桶安全设计缺陷分析
android·网络·网络协议·tcp/ip·安全·云计算·aws
掘根14 小时前
【网络】高级IO——poll版本TCP服务器
网络·数据库·sql·网络协议·tcp/ip·mysql·网络安全
友友马15 小时前
『 Linux 』HTTP(一)
linux·运维·服务器·网络·c++·tcp/ip·http
许野平19 小时前
Rust: Warp RESTful API 如何得到客户端IP?
tcp/ip·rust·restful·ip地址
不烦下雨c19 小时前
【网络】传输层协议TCP
网络·网络协议·tcp/ip
KookeeyLena520 小时前
IP池对数据爬取工作的帮助
网络·网络协议·tcp/ip
宇宙第一小趴菜1 天前
探索网络世界:TCP/IP协议、Python Socket编程及日常生活比喻
网络·python·tcp/ip
新手嵌入式学习1 天前
Modbus_tcp
网络·网络协议·tcp/ip
只对您心动2 天前
【QT】实现TCP服务器,客户端之间的通信
linux·服务器·c语言·开发语言·c++·qt·tcp/ip
2401_872514972 天前
代理IP设置后IP不变?可能的原因及解决方法
网络·网络协议·tcp/ip