输入url到页面加载发生了什么?
创始人
2024-05-29 11:42:13
0
  • 1、DNS解析

  • 2、TCP连接

  • 3、发送HTTP请求

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

  • 5、浏览器解析渲染页面

  • 6、连接结束

一、DNS解析:

这个过程实际上是浏览器将输入的url发送到DNS服务器进行查询,DNS服务器会返回当前查询url的IP地址。实际上充当了一个翻译的角色,实现了网址到IP地址的转换,DNS解析是一个递归查询的过程,必须对DNS进行优化

DNS缓存:

DNS存在着多级缓存,从离浏览器距离排序的话有以下几种

  • 浏览器缓存
  • 系统缓存
  • 路由器缓存
  • IPS服务器缓存
  • 根域名服务器缓存
  • 顶级域名服务器缓存
  • 主域名服务器缓存

DNS负载均衡:

DNS可以返回一个合适的机器的IP给用户,例如可以根据每台机器的负载量,该机器距离用户地理位置的距离等待,这种过程就是DNS负载均衡,又叫DNS重定向。大家耳熟能详的CDN就是利用DNS的重定向技术,DNS服务器会返回一个跟用户最接近的点的IP地址给用户,CDN节点的服务器负责响应用户的请求,并提供所需的内容。

二、TCP连接

  • 第一次握手:客户端发送第一个包,其中SYN标志位为1, ACK=0,发送顺序号sequence=X(随机int)。客户端进入SYN发送状态,等待服务器确认
  • 第二次握手:服务器收到这个包后发送第二个包,其中包SYN、ACK标志位为1,发送顺序号seq=Y(随机int),接收顺序号ACK=X+1,此时服务器进入SYN接收状态。
  • 第三次握手:客户端收到服务器传来的包后,向服务器发送第三个包,SYN=0, ACK=1,接收顺序号ACK = Y+1,发送顺序号seq=X+1。此包发送完毕,客户端和服务器进入ESTABLISHED建立成功状态,完成三次握手。

理解:第一次握手,客户端发起,我要连接了;第二次握手,服务端收到了,给与回应,我收到了;第三次握手,客户端发起,我收到你的回复了。三次握手完毕后,正式通信。按照正常的理解,无须第三次握手,第三次握手是为了防止第一次握手时,由于网络延迟,一直没有收到服务端发回的响应,客户端就会再次发起握手请求,收到了吗,还没收到,我再发…,当网络变好后,客户端就会多次服务端的回应,如果没有第三次握手,资源都浪费了

三、HTTP请求

常用的方法有:GET、POST、PUT、DELETE、OPTIONS、HEAD

请求报头:请求报头允许客户端向服务器传递请求的附加信息和客户端⾃⾝的信息。常⻅ 的请求报头有: Accept , Accept-Charset , Accept-Encoding , Accept-Language , Content-Type , Authorization , Cookie , User-Agent 等。

Accept ⽤于指定客户端⽤于接受哪些类型的信息, Accept-Encoding 与 Accept 类似,它⽤于 指定接受的编码⽅式。 Connection 设置为 Keep-alive ⽤于告诉客户端本次 HTTP 请求结束 之后并不需要关闭 TCP 连接,这样可以使下次 HTTP 请求使⽤相同的 TCP 通道,节省 TCP 连接建⽴的时间。

请求正⽂: 当使⽤ POST, PUT 等⽅法时,通常需要客户端向服务器传递数据。这些数据 就储存在请求正⽂中。在请求包头中有⼀些与请求正⽂相关的信息,例如: 现在的 Web 应⽤通常采⽤ Rest 架构,请求的数据格式⼀般为 json。这时就需要设置 Content-Type: application/json 。

Content-Type:

  • application/x-www-form-urlencoded
  • multipart/form-data
  • application/json
  • application/xml 和 text/xml

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

三四两部涉及到缓存:

强缓存:

Expires:

值是一个HTTP日期,根据时间比较,判断是缓存失效,重新获取数据。Expires的优先级在三个Header属性中是最低的。

Cache-Control:

  • private:客户端可以缓存
  • public:客户端和代理服务器均可缓存;
  • max-age=xxx:缓存的资源将在 xxx 秒后过期;
  • no-cache:需要使用协商缓存来验证是否过期;
  • no-store:不可缓存
  • must-revalidate:使用 must-revalidate 指令,代理会向源服务器再次验证即将返回的响应缓存目前是否仍有效。另外,使用 must-revalidate 指令会忽略请求的 max-stale 指令。
  • proxy-revalidate:指令要求所有的缓存服务器在接收到客户端带有该指令的请求返回响应之前,必须再次验证缓存的有效性
  • s-maxage:缓存的生存时间可以使用新的“s-maxage”(s 是 share 的意思,注意 maxage 中间没有“-”),只限定在代理上能够存多久,而客户端仍然使用“max-age”。
  • no-transform:代理有时候会对缓存下来的数据做一些优化,比如把图片生成 png、webp 等几种格式,方便今后的请求处理,而“no-transform”就会禁止这样做,不许“偷偷摸摸搞小动作”。

Pragma:

  • Pragma 只有一个属性。就是no-cache,效果和cache-control中的no-cache一致,不使用强缓存,需要与服务器端来验证缓存是否新鲜,在3个头部属性中优先级最高

协商缓存:

协商缓存是由服务器来确定缓存资源是否可用。 主要涉及到两对属性字段,都是成对出现的,即第一次请求的响应头带上某个字, Last-Modified 或者 Etag,则后续请求则会带上对应的请求字段 If-Modified-Since或者 If-None-Match,若响应头没有 Last-Modified 或者 Etag 字段,则请求头也不会有对应的字段。

Last-Modified/If-Modified-Since 二者的值都是GMT格式的时间字符串, Last-Modified 标记最后文件修改时间, 下一次请求时,请求头中会带上 If-Modified-Since 值就是 Last-Modified 告诉服务器我本地缓存的文件最后修改的时间,在服务器上根据文件的最后修改时间判断资源是否有变化, 如果文件没有变更则返回 304 Not Modified ,请求不会返回资源内容,浏览器直接使用本地缓存。当服务器返回 304 Not Modified 的响应时,response header 中不会再添加的 Last-Modified 去试图更新本地缓存的 Last-Modified, 因为既然资源没有变化,那么 Last-Modified 也就不会改变;如果资源有变化,就正常返回返回资源内容,新的 Last-Modified 会在 response header 返回,并在下次请求之前更新本地缓存的 Last-Modified,下次请求时,If-Modified-Since会启用更新后的 Last-Modified。

Etag/If-None-Match, 值都是由服务器为每一个资源生成的唯一标识串,只要资源有变化就这个值就会改变。服务器根据文件本身算出一个哈希值并通过 ETag字段返回给浏览器,接收到 If-None-Match 字段以后,服务器通过比较两者是否一致来判定文件内容是否被改变。与 Last-Modified 不一样的是,当服务器返回 304 Not Modified 的响应时,由于在服务器上ETag 重新计算过,response header中还会把这个 ETag 返回,即使这个 ETag 跟之前的没有变化。
 

五、浏览器解析渲染页面

首先浏览器解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到页面上,这个过程涉及到重制(回流)、重绘

reflow回流 : DOM 节点中的各个元素都是以盒模型的形式存在,这些都需要浏览器去计 算其位置和⼤⼩等,这个过程称为 reflow

repain重绘: 当盒模型的位置, ⼤⼩以及其他属性,如颜⾊, 字体, 等确定下来之后,浏览器 便开始绘制内容,这个过程称为 repain

JS解析是由浏览器的JS解析引擎完成的。JS是单线程,也就是说,在同一个时间内只做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始。但是又存在某些任务比较耗时,如IO读写等,所有需要一种机制可以先执行排在后面的任务 ,这就是:同步任务、异步任务

JS的执行机制就可以看做是一个主线程加上一个任务队列。同步任务就是放在主线程上执行的任务,异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件;脚本运行时会先依次运行执行栈,然后从任务队列里提取事件,运行任务队列中的任务,这个过程是不断重复的,所以又叫事件循环Event loop

六、连接结束 

四次挥手

为什么两次握手不行?  
因为第二次握手,主机B还不能确认主机A已经收到确认请求,也是说B认为建立好连接,开始发数据了,结果发出去的包一直A都没收到,那攻击B就很容易了,我专门发包不接收,服务器很容易就挂了

为什么建立连接协议是三次握手,而关闭连接却是四次握手呢?
建立连接时,ACK和SYN可以放在一个报文里来发送。而关闭连接时,被动关闭方可能还需要发送一些数据后,再发送FIN报文表示同意现在可以关闭连接了,所以它这里的ACK报文和FIN报文多数情况下都是分开发送的。
 







 

相关内容

热门资讯

系统如何与安卓互通,技术融合与... 你有没有想过,你的手机系统竟然能和安卓系统这么默契地互通有无?这就像是一场跨越科技界的友谊赛,让我们...
安卓系统 扫码枪,安卓系统下扫... 你有没有想过,在繁忙的超市收银台,那些快速流畅的扫码操作,背后其实隐藏着一个小小的英雄——安卓系统扫...
平板插卡推荐安卓系统,安卓系统... 你有没有想过,你的平板电脑是不是也能像智能手机一样,随时随地扩充存储空间呢?没错,这就是今天我要跟你...
安卓系统固件安装失败,原因排查... 最近是不是你也遇到了安卓系统固件安装失败的问题?别急,让我来给你详细说说这个让人头疼的小麻烦,让你一...
ios系统和安卓区别,系统差异... 你有没有发现,现在手机市场上,iOS系统和安卓系统就像是一对双胞胎,长得差不多,但性格却截然不同。今...
安卓系统2.3优酷,优酷的崛起... 你有没有发现,安卓系统2.3时代的那股怀旧风?那时候,优酷可是视频界的巨头,多少人都是看着优酷长大的...
安卓导航系统密封,安卓导航系统... 你有没有发现,现在手机导航系统越来越智能了?尤其是安卓系统的导航,简直就像一个贴心的导航小助手,带你...
a版安卓11系统,a版深度解析... 你知道吗?最近手机界可是炸开了锅,各大品牌纷纷发布了搭载a版安卓11系统的手机。这可不是什么小打小闹...
安卓系统的模拟吉他,随时随地弹... 你有没有想过,在手机上也能弹奏吉他呢?没错,就是那种模拟吉他的安卓系统应用,让你随时随地都能享受音乐...
王者适配的安卓系统,深度解析适... 你有没有发现,最近玩《王者荣耀》的小伙伴们都在议论纷纷,说新出的安卓系统简直是为王者量身定做的!没错...
安卓系统自动定位关闭,隐私保护... 你有没有发现,手机里的安卓系统有时候会自动定位,这可真是让人又爱又恨啊!有时候,我们并不想让别人知道...
安卓系统电量耗尽测试,全面解析... 手机电量耗尽,这可是每个手机用户都头疼的问题。你有没有想过,你的安卓手机在电量耗尽前,到底经历了哪些...
如何升级车载安卓系统,车载安卓... 亲爱的车主朋友们,你是不是也和我一样,对车载安卓系统升级这件事充满了好奇和期待呢?想象当你驾驶着爱车...
安卓办公哪个系统好,深度解析哪... 你有没有想过,在安卓办公的世界里,哪个系统才是你的最佳拍档呢?在这个信息爆炸的时代,选择一个既强大又...
安卓系统差劲怎么解决,重拾流畅... 你有没有发现,安卓系统有时候真的让人头疼得要命?手机卡顿、应用崩溃、电池续航短,这些问题是不是让你抓...
喜欢安卓系统的原因,探索用户偏... 你有没有发现,身边的朋友、同事,甚至家人,越来越多的人开始使用安卓手机了呢?这可不是简单的潮流,而是...
安卓系统金立手机,品质生活新选... 你有没有发现,最近安卓系统下的金立手机突然火了起来?没错,就是那个曾经陪伴我们走过无数时光的金立手机...
无安卓系统的电视,新型无系统电... 亲爱的读者们,你是否厌倦了那些充斥着安卓系统的电视?想要尝试一些新鲜玩意儿?那就跟我一起探索一下无安...
麒麟系统能刷安卓系统吗,轻松刷... 你有没有想过,你的麒麟手机能不能装上安卓系统呢?这可是个让人好奇不已的问题。现在,就让我来带你一探究...
手机公司安卓系统吗,手机公司引... 你有没有想过,为什么你的手机里装的是安卓系统而不是苹果的iOS呢?这背后可是有着不少故事和门道的哦!...