浏览器输入url后执行的整个过程(详细解析)

这篇具有很好参考价值的文章主要介绍了浏览器输入url后执行的整个过程(详细解析)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

这个问题也是老生常谈了,更是经常被作为面试的压轴题出现。在此稍微全面一点记录下。

一、网页重定向(Redirect)

检查网页重定向

  • URL 重定向 (也称为 URL 转发 )是一种为页面、表单或者整个 Web 站点/应用提供多个 URL 地址的技术。
  • 当实际资源(如单个页面、表单或者整个 Web 应用)被迁移到新的 URL 下的时候,保持(原有)链接可用的技术。

使用情景

  • 站点维护或停机期间的临时重定向。
  • 永久重定向将在更改站点的 URL,上传文件时的进度页等之后保留现有的链接/书签。
  • 上传文件时的表示进度的页面。

二、获取本地缓存(AppCache)

  • 浏览器会先查找当前URL的DNS缓存记录(浏览器缓存、系统缓存、路由缓存)。如存在缓存,就直接显示。如果没有,接着下一步
  • 浏览器缓存:简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中。

三、域名解析(DNS)

DNS解析——解析域名,获取对应的ip地址(互联网协议地址)

什么是域名解析?过程是怎样的?

例如https://www.blog.csdn.net/的解析

查询缓存
  • 浏览器缓存:浏览器会按照一定的频率缓存DNS记录(如有直接获取)
  • 操作系统缓存:浏览器缓存中没有记录,再到本地操作系统缓存中查询,一般在hosts文件(如有直接获取)
  • 路由缓存:路由器也有DNS缓存(如有直接获取)
ISP的DNS服务器

-ISP的DNS服务器:ISP(Internet Service Provider),是互联网服务提供商的简称。ISP有专门的DNS服务器对应DNS查询请求。

根服务器

根服务器:如果ISP的DNS服务器没有找不到,ISP会代替用户向根服务器发起查询请求。根域名服务器会返回.net域名服务器的ip地址,然后访问.net域名服务器获取blog.csdn.net域名服务器的ip地址,最后在访问blog.csdn.net域名服务器获取www.blog.csdn.net的ip地址,最后DNS域名解析完成。
DNS递归查询(可能存在负载均衡导致每次IP不⼀样)

四、建立TCP连接(TCP三次握手)

什么是TCP?

  • TCP是传输控制协议,是一种面向连接的、可靠的、基于字节流的传输层通信协议。

网络七层模型

  • 应用层(ftp,http,smtp,pop3)
  • 表示层
  • 会话层
  • 传输层(TCP)
  • 网络层(IP)
  • 数据链路层
  • 物理层

TCP的三次握手

  • 客户端发送有待带有SYN=1Seq=x的syn包到服务器,并进入到SYN_SEND状态,等待服务器确认。(客户端–服务器。您好,您好漂亮呀,我想认识您!)
  • 服务器收到syn包后,必须确认客户的SYN(ack=x+1),同时发送一个自己的SYN(seq=k)包给客户端(即SYN+ACK包),同时服务器进入到SYN_RECV状态。(服务器–客户端。好的,很高兴认识您,当然您也是蛮帅的哦!)
  • 客户端收到服务器的SYN+ACK包后,向服务器发一个确认包ACK(k+1),这些包发送完毕后,客户端和服务器同时进入到ESTABLISHED状态,完成三次握手。(客户端–服务器。啊哈哈哈,我也很高兴认识您)

Tips:TCP在握手过程中不会携带任何数据,三次握手完成之后,才会进行数据的传递。(即三次握手之后,浏览器才发送Http请求)

为什么需要三次握手?
  • 引用《计算机网络》说的,“三次握手“的目的是“为了防止已经失效的连接请求报文突然又传送到了服务端,因而产生了错误”。
  • 即客户端与服务器的连接存在时效性,过了预定时间,就放弃等待,各自干别的事了。
那为什么不是四次而是三次呢?
  • 因为服务器的ACK和SYN包是可以一起发送的,并不会产生什么不好的影响,何乐而不为是吧?

五、浏览器发送http请求

建立TCP连接后,客户端就可以向服务端发送http请求报文了。

请求报文(包含三部分):

请求行

请求行包含

  • 请求方法
  • URL
  • 协议版本
    例:POST /demo/index.html HTTP/1.1

请求方法有哪些?

  • get
  • post
  • put
  • delete
  • patch
  • head
  • options
  • trace
请求头

请求头包含了请求的附加信息,一般以key:value的形式存在。比如关于客户端的信息,host(主机名)。

请求主体。

请求体包含了多个请求参数的数据,包含了回车符、换行符、请求数据(不是所有的请求都带有请求数据)。

六、服务器响应http请求

服务器会检查HTTP请求头是否包含缓存验证信息,如果验证缓存新鲜,返回304等对应状态码

服务器收到请求后处理请求,并返回响应报文数据。

响应报文包含三部分

  • 响应行:包含协议版本,状态码,状态码描述
  • 响应头:包含一些附加的响应信息
  • 响应主题:包含回车符、换行符和响应返回的数据(不是所有的响应都有响应数据)

七、断开TCP连接(TCP四次挥手)

浏览器接收HTTP响应后,根据实际情况选择关闭TCP连接或者保留重⽤,关闭TCP连接的四次握⼿如下:

  • 浏览器向服务器发送报文(Fin=1,Ack=z,Seq=x),表示客户端请求报文已经发送完了,准备关闭了。并进入到FIN_WAIT_1状态。,即断开连接的请求(太阳下山了,我该回家干饭了)到服务器
  • 服务器收到客户端的断开请求后,发送确认报文(Ack=x+1,Seq=z),表示统一关闭。此时主机进入FIN_WAIT_2状态。,即服务器接到请求后发送确认收到请求的信号(哦,我知道了)
  • 服务器在发送完数据以后,也会向客户端发送断开连接的报文(Fin=1,Ack=x,Seq=y),表示我没有响应数据要传了,准备关闭了。此时进入到LAST_ACK状态,即服务器向浏览器发送断开通知(你走吧,我也该回家抱娃了);
  • 客户端收到服务器的关闭请求后,会发送一个确认报文(Ack=y+1,Seq=x),表示同意关闭。服务器收到客户单的确认报文后关闭连接。而浏览器在等待一段时间后未收到回复,则正常关闭。,即客户端接到断开通知后断开连接并反馈一个确认信号(嗯,走咯),服务器收到确认信号后也断开连接;

Tips:为什么不能三次挥手?有可能数据还未传输完成,所以服务器要先确认后再发起断开消息

八、浏览器解析http请求返回的数据并渲染页面

浏览器解析htm代码,并请求html代码中的资源(如js、css、图片等)

浏览器接收到 HTTP 数据包后的解析流程(解析 html、 词法分析然后解析成 dom 树、解析 css ⽣成 css 规则树、合并成render 树,然后layoutpainting 渲染、复合图层的合成、 GPU 绘制、外链资源的处理、 loadedDOMContentLoaded 等)

回流:当某个元素的尺寸大小或是位置信息发生改变的时候,会触发回流,对元素的大小和位置进行重新计算。
重绘:当某个元素的背景颜色,文字颜色或是其他不影响周围或内部布局的属性发生改变时会触发重绘。

注:回流一定会包含着重绘,而重绘不一定会包含回流。

解析HTML⽂档

浏览器在接收到服务器返回的HTML文件后,会对其进行HTML解析。

构件DOM树

浏览器的HTML解析器把HTML解析成DOM 树(根据HTML文件的结构从上到下解析HTML,HTML元素以深度优先的方式进行解析)

  • Tokenizing:根据HTML规范将字符流解析为标记
  • Lexing:词法分析将标记转换为对象并定义属性和规则
  • DOM construction:根据HTML标记关系将对象组成DOM树

下载资源

解析HTML过程中遇到图⽚、样式表、js⽂件,会启动下载

构造CSSOM树

  • Tokenizing:字符流转换为标记流
  • Node:根据标记创建节点
  • CSSOM:节点创建CSSOM树

根据DOM树和CSSOM树构建渲染树

  • 从DOM树的根节点遍历所有可⻅节点(不可见的有script , meta 的标签。css隐藏的节点,如 display: none等)
  • 给每⼀个可⻅节点,找到对应的CSSOM规则并应⽤
  • 发布可视节点的内容和计算样式

执⾏js脚本

JS 引擎解析过程( JS 的解释阶段,预处理阶段,执⾏阶段⽣成执⾏上下⽂, VO ,作 ⽤域链、回收机制等等)

  • script、link、style等标签会在解析过程产生阻塞
  • 外部样式会阻塞内部脚本的执行
    外部样式和外部脚本可以并行加载,但是外部样式会阻塞外部脚本执行
    如果外部脚本带有async属性,则外部脚本的加载与执行不受外部样式影响
    如果link标签是动态创建生成,不管有无async属性,都不会阻塞外部脚本的加载和执行。
  • 浏览器在Document对象上触发DOMContentLoaded事件
  • 此时⽂档完全解析完成,浏览器可能还在等待如图⽚等内容加载,等这些内容完成载⼊ 并且所有异步脚本完成载⼊和执⾏,document.readState变为complete,window触发 load事件

九、页面加载完成

  • HTML解析过程中会逐步显示⻚⾯(如果未做特殊处理,例如添加全局Loading)
  • 页面完成加载

总结

结合上述,浏览器输入url后执行的整个过程大致步骤如下表文章来源地址https://www.toymoban.com/news/detail-768618.html

步骤 描述 属性值
检查网页重定向 Redirect
检查本地缓存 AppCache
DNS解析,查询对应的ip地址 DNS
建立TCP连接(TCP三次握手) TCP
浏览器发送http请求 Content Download
浏览器解析htm代码,并请求html代码中的资源(如js、css、图片等)
服务器响应http请求
断开TCP连接(TCP四次挥手) Disconnect TCP
Dom加载 DOMContentLoaded
页面加载完成(页面load) Loaded

到了这里,关于浏览器输入url后执行的整个过程(详细解析)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 浏览器输入一个URL之后发生了什么?

    URL解析 DNS解析 TCP连接 TSL连接 HTTP请求 TCP挥手 接收并解析响应 主要分为: 协议,eg http,https 域名或者ip地址,eg www.baidu.com 域名相对于ip地址来说,更方便人们记忆,但是实际的网络传输中使用的是ip地址 端口号,不同的协议对应不同的端口号,一般可以不写,eg http是80,h

    2024年02月11日
    浏览(72)
  • 在浏览器输入URL后发生了什么?

    在浏览器输入URL并获取响应的过程,其实就是浏览器和该url对应的服务器的网络通信过程。 从封装的角度来讲,浏览器和web服务器执行以下动作:(简单流程) 1、浏览器先分析超链接中的URL:分析域名是否规范 2、浏览器向DNS请求解析请求解析http://www.sxtyu.com/index.html中的ip地

    2024年02月09日
    浏览(53)
  • 浏览器地址栏输入url以后发生了什么

    1.DNS对域名进行解析; 2.建立TCP连接(三次握手); 3.发送HTTP请求; 4.服务器处理请求; 5.返回响应结果; 6.关闭TCP连接(四次挥手); 7.浏览器解析HTML; 8.浏览器布局渲染; 1.浏览器对输入的地址补全,然后DNS域名解析  如果你搜索的是baidu.com的时候,实际访问的还是h

    2024年02月13日
    浏览(52)
  • 在浏览器中输入URL后都会发生什么

    浏览器补全地址和DNS对域名进行解析; 1当搜索baidu.com,实际访问的是http://www.baidu.com,浏览器会补全地址。 因为一个URL由协议、主机名、路径、搜索内容、哈希组成。 2DNS解析过程:客户机先插本地缓存,找不到再将域名发到DNS服务器,它先查它管理的区域,如果就查本地缓

    2024年02月16日
    浏览(40)
  • 面试:浏览器从输入url到渲染页面,发生了什么

    用户输入阶段 合成 URL :浏览区会判断用户输入是合法 URL,比如用户输入的是搜索的,默认的搜索引擎会合成新的,如果符合url规则会根据url协议,在这段内容加上协议合成合法的url      查找缓存 网络进程获取到 URL,先去本地缓存中查找是否有缓存资源,如果有则

    2024年02月06日
    浏览(51)
  • 程序部署到tomcat之后,在浏览器上输入URL报错404,该如何定位?

    目录 1.首先检查url是否正确 2.检查war包,查看部署之后的目录结构 3.查看tomcat日志 4.通过postman发请求 spring项目打包成war包再部署到tomcat上时,项目的路径要加上war包的名称,通过更改war包的名称,就可以更改访问路径。 格式为:协议://ip:端口号/war包名称/请求路径       

    2024年01月18日
    浏览(45)
  • 从浏览器输入url到页面加载(五)请求数据在网线中的故事

    前言 上一章我们说到了,为了确保连接通道已建立完成,进行 三次握手 的确认。但无论是请求页面,还是发送一个ajax请求,数据都是要达到服务器的,包括header头,body信息这些。一旦离开了客户端浏览器,再离开了客户端操作系统,就要开始 漫长的网线旅程 了。 目录 前

    2024年02月10日
    浏览(39)
  • 谷歌浏览器输入url地址后http自动转https问题解决方法

    谷歌浏览器输入“http + 域名”后自动变成 “https + 域名” 格式原因 安装配置了 SSL证书后,浏览器开启了 HSTS(HTTP Strict Transport Security)功能,它会告诉浏览器只能通过 https 访问,绝对禁止 http 方式,所以浏览器中输入http 后自动转成了 https 解决方法: 1、进入“chrome://net

    2024年02月11日
    浏览(61)
  • 从浏览器输入url到页面加载(六)前端必须了解的路由器和光纤小知识

    前言 上一章我们说到了 数据包 在网线中的故事,说到了 双绞线 ,还说到了 麻花 。这一章继续沿着这条线路往下走,说一些和cdn以及路由器相关,运营商以及光纤相关的小知识,前端同学应该了解一下的   目录 前言 1.  CDN和路由器有关系吗? 2. 你的电脑能直接上网吗?

    2024年02月09日
    浏览(57)
  • 在浏览器中输入地址之后发生了什么过程?

    当我们在浏览器地址栏中输入某个网址之后,虽然页面内容几乎瞬间就显示出来,但其中经历了很多个步骤。 1.域名解析 网络上各个计算机之间相互通信均是以其IP地址来识别的,而我们输入的网址仅仅是方便我们记忆而取的别名,计算机不能直接识别,所以就需要将输入的

    2024年02月12日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包