推广 热搜: 行业  设备    参数  系统  经纪    教师  机械  中国 

从 URL 输入到页面展现的全过程

   日期:2024-11-18     作者:ajp5a    caijiyuan   评论:0    移动:http://3jjewl.riyuangf.com/news/1257.html
核心提示:解析用户输入内容查看是否命中强缓存DNS解析建立TCP连接(三次握手)发送HTTP请求(查看是否名字协商缓存

从 URL 输入到页面展现的全过程

  • 解析用户输入内容
  • 查看是否命中强缓存
  • DNS解析
  • 建立TCP连接(三次握手
  • 发送HTTP请求(查看是否名字协商缓存,有304,无200)并接受对应的响应报文
  • 关闭TCP连接(四次挥手
  • 提交文档阶段
  • 浏览器渲染

用户在地址栏输入内容之后,浏览器会首先判断用户输入的是合法的URL还是搜索内容,如果是搜索内容就合成URL,如果是合法的URL就开始进行加载。

1. 搜索关键字

  • 若搜索的内容为关键字,浏览器会对其中不安全字符编码进行转义,使用UTF-8编码,也不能有特殊符号如 等
  • URL对非安全字符转义时使用的是百分号编码,因为它使用百分号加上两位十六进制数表示,每一个中文会被转义成三个字符。
  • 和 都是用于对URL编码的,唯一区别是这类URI组成符号在 不会被编码,但在中统统会。

2. 合法的URL

如果输入的是合法的URL,说明我们希望通过URL查找到对应服务器上的资源,实质就是查找该域名对应的IP的一个映射关系。

在有效期内缓存的资源可以被直接使用。 或者 前者从内存取,后者从磁盘取。通常来说:刷新页面会使用内存缓存,关闭后重新打开会使用磁盘缓存。

  • 浏览器首次加载资源,服务器返回200,浏览器不仅会把资源下载下来,还会把responce中的header(date属性用于资源请求时间差)一并缓存下来。
  • 下次加载资源时,首先要经过强缓存的处理。强缓存是利用 http头 的 Expires 和 Cache-Control 两个字段来控制的。强缓存中,请求再次发出时,浏览器会根据其中的 Expires 和 Cache-Control 判断目标资源是否 “命中” 强缓存,是则直接从缓存中获取资源,不会再与服务器通信。其中 的优先级最高,如果 ,就直接进入到协商缓存的步骤了,如果 ,就会先比较当前时间和上一次返回 200 时的时间差,如果没有超过 max-age,命中强缓存,不发请求直接从本地缓存读取该文件(这里需要注意,如果没有 ,会取 的值,来对比是否过期,过期的话会进入下一个阶段,协商缓存。

DNS 解析目的是找到目标服务器的 IP 地址,才能进行后续的数据请求等操作

  1. 先找浏览器缓存
  2. 找操作系统hosts文件的缓存
  3. 以上两步都没找到就要进行网络请求,去本地DNS付服务器(local DNS)进行查找,如果本地 DNS 服务器的缓存中存在该映射关系那么就直接返回,否则继续后续步骤。
  4. 本地域名服务器作为代理服务器,向它上面的根域名服务器建立 UDP 连接后发出请求,根域名服务器返回(即 ,如: 这种顶级域名)。
  5. 本地域名服务器拿到后向 发请求, 是可以找到你想查找域名的 地址的,本地 DNS 服务器向 地址发送请求 ,拿到该域名对应的 IP 和 TTL(time to live,即 ,然后将结果显示自己做一个缓存(根据TTL设置映射存活时间,然后返回给浏览器,DNS解析结束。

Name Server 概念 服务商提供的服务器地址,比如你在阿里云注册的域名,那查找就是去阿里云的服务器查,因为你是去域名提供商的服务器发请求,那肯定是能拿到对应的ip地址的

1. 首先会等待 TCP 队列

chrome有个机制,同一域名最多支持建立六个 TCP 连接,如果超过这个数量的连接就必须进入排队等待状态。

知识巩固 对于多路复用,http 1.1 采取建立多个 TCP 连接,http 2.0 采用建立一个 TCP 连接并行发起多个请求

2. 开始建立 TCP 连接

通过 TCP 三次握手与服务器建立连接,进行数据传输。

A:我要跟你建立连接,你那边接受得到我的请求吗? B:接收到啦!没问题,但得向你确认下,证明这是你真实的要准备跟我建立的连接,而不是你很久之前发过的 A:对,没问题,这是我刚发给你的

先看是否命中协商缓存

  • 有则返回状态码 304 并更新资源标识符
  • 没有则返回状态码 200 和新资源

超过有效期的,则携带缓存的资源标识向服务端发起请求,校验是否能继续使用,如果服务端告诉我们,可以继续使用本地存储,则返回 304,并且不携带数据;如果服务端告诉我们需要用更新的资源,则返回 200,并且携带更新后的资源和资源标识缓存到本地,方便下一次使用。

然后接收对应响应报文

服务器首选返回相应行、包括协议版本和 状态码,然后会返回响应头包含返回的数据类型,服务器要在客户端保存的  等,一般来说是返回 、、、 文件。

对于是否命中协商缓存

  • 协商缓存阶段,则向服务器发送 header 带有 if-None-Match 和 if-Modified-Since 的请求,前者优先级大于第二个,服务器会优先比较 if-None-Match 和 Etag 字段,若相同,命中协商缓存,返回304;否则,返回新的资源文件带上新的 Etag 和 200。
  • 协商缓存第二个对应关系是 If-Modified-Since 和 Last-modified ,如果客户端发送的 If-Modified-Since 的值跟服务器获取文件最近改动,相同则命中协商缓存,返回304 ;不一致则返回新的 Last-Modified 和文件 并返回200

为什么协商缓存中 Etag 优先级大于 Last-modified

因为后者是标识着资源的最后修改时间(不准确,因为修改了文件并不代表文件内容发生改变,可能改变后又撤销了),前者可以理解为是一个资源唯一标识符,是服务器通过内置算法根据文件内容生成的 值,所以更准确,当然,因为计算所以性能消耗更大,不太推荐使用

数据传输完成后,通过四次挥手来断开连接。

A:我要断开连接啦 B:好的,你先断开,等我把我这边的数据传完给你我再断 过了一会儿,等B传完后 B:我传完啦,我也可以断开跟你的连接了,听到了吗 A:知道你也断开连接啦,你先断,我过 2MSL 再断,不然怕你听不见我跟你说的话

  1. 网络进程 将获取的数据进行解析,根据响应头的 Content-Type 来判断响应数据的类型,如果是字节流类型,就将该请求交给下载管理器去下载,如果是 text/html 类型,就通知浏览器进程获取到的是 HTML,准备渲染进程。
  2. 一般情况下浏览器一个 tab 页面对应一个渲染进程,如果从当前页面打开的新页面并且属于同一站点,这种情况会复用渲染进程,其他情况会默认创建新的渲染进程。
  3. 渲染进程准备好之后,浏览器会发出提交文档的消息给 ,渲染进程收到消息后会和 建立数据传输的管道(IPC,文档数据传输完成后,渲染进程会返回曲儿提交的消息给
  4. 浏览器收到确认提交的消息后,会更新浏览器的页面状态,包括安全状态,地址栏的URL,前进后退的历史状态,并

浏览器渲染过程,推荐观看:【干货】浏览器是如何运作的?_哔哩哔哩_bilibili

本文地址:http://oml01z.riyuangf.com/news/1257.html    迅易网 http://oml01z.riyuangf.com/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

 
标签: 全过程
 
更多>同类最新动态
0相关评论

文章列表
相关文章
最新动态
推荐图文
最新动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号