浏览器打开一个网页的全流程

这篇具有很好参考价值的文章主要介绍了浏览器打开一个网页的全流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

浏览器打开一个网页的全流程

简介

互联网日常生活中最为常见的行为便是在浏览器输入一个网址, 然后浏览网页内容, 这样一个简单的行为背后有哪些技术细节呢, 本文将做一些介绍.

全流程可拆分为4个主要步骤

  1. 将域名解析为IP地址
  2. 与目标主机建立TCP连接 (三次握手)
  3. 发送与接受数据
  4. 与目标主机断开TCP连接 (四次挥手)

详细介绍

1. 将域名解析为IP地址

IP地址是什么?

IP地址类似于互联网世界中的门牌号, 公网IP地址全球唯一, 其作为互联网设备的标识符, 用来实现不同设备之间的通信.

IPv4和IPv6的区别

  • 主要区别: IPv4长度为32 bit, 而IPv6长度为128 bit (能够唯一标识设备的数量大大增加)
  • 此外在效率, 安全性和对移动设备的支持上IPv6也更优优势

域名是什么?

互联网中的任何一个设备都可以通过一个公网IP访问, IP地址是数字, 记忆起来很麻烦, 所以就用域名来记忆. 域名的格式类似于hi.test.com, 其从右往左阅读, 最右侧为顶级域名(如.com, .org, .net), 顶级域名由ICANN维护; 次右为二级域名, 表示其他信息, 这些信息还可以继续向左叠加.

为什么使用域名?

  • IP地址是一串数字, 不便于记忆, 使用域名易于记忆
  • 一个域名可以对应多个IP, 用户在访问时可以被分配到最近的服务器, 同时也可以做负载均衡和容灾

域名解析的简要流程

  1. 查询DNS缓存
    1. 浏览器缓存
    2. 操作系统缓存
    3. 路由器缓存
    4. 本地DNS服务器缓存 (例如企业, 学校的局域网DNS服务器)
    5. ISP服务器缓存 (例如中国移动, 中国电信)
  2. 查询外部DNS服务器 (由本地DNS服务器或者ISP迭代执行)
    1. 查询根DNS服务器, 获取顶级DNS服务器地址
    2. 查询顶级DNS服务器, 获取NameServer服务器地址
    3. 查询NameServer, 获取DNS解析结果

DNS解析过程中使用UDP协议

浏览器打开一个网页的全流程

浏览器DNS缓存

  • chrome: chrome://net-internals/#dns
  • edge: edge://net-internals/#dns

操作系统DNS缓存

  • Windows: C:\Windows\System32\drivers\etc\hosts
  • Linux: /etc/hosts

DNS服务器

操作系统中的DNS配置

  • Windows: 控制面板->网络与共享中心->更改适配器设置->属性->Internet协议版本4(TCP/IPv4)->DNS服务器地址
  • Linux: /etc/resolv.conf

递归查询和迭代查询

客户端和本地DNS服务器之间是递归, 本地DNS服务器和其他DNS服务器之间是迭代.

2. 与目标主机建立TCP连接 (三次握手)

用日常生活场景来比喻三次握手 (three-way handshake)

  1. 客户端->服务器: "我要和你通信"
  2. 服务器->客户端: "好的, 现在可以吗?"
  3. 客户端->服务器: "没问题, 开始吧"
浏览器打开一个网页的全流程 使用Wireshark抓包 浏览器打开一个网页的全流程
  1. 客户端->服务器: [SYN] Seq=0
  2. 服务器->客户端: [SYN, ACK] Seq=0 Ack=1
  3. 客户端->服务器: [ACK] Seq=1 Ack=1

为什么需要三次握手?

简单来说是为了避免网络拥塞导致的异常情况: 客户端发送连接请求, 该请求在某个节点长时间滞留, 已经失效, 但在服务端接收到后会误认为是新的连接请求, 服务端发出确认后连接就建立了, 但客户端此时并没有发出建立连接的请求, 所以就造成了服务端资源的浪费.

改为两次握手有可能发生死锁.

TCP简介

  • TCP是一个传输层协议 (传输层是什么可以参考TCP/IP协议栈)
  • TCP是面向连接的, 必须先建立连接, 再传输数据, 最后释放连接
  • TCP提供可靠交付的服务, 数据传输无差错, 不丢失, 无重复, 且按序到达
  • TCP提供全双工通信, 通信双方可以同时收发数据
  • TCP面向字节流, 其将应用层的数据视为无结构的字节流, 并不知道含义

TCP的标志位和序号

TCP的标志位用来确定TCP的目的, 常见的标志位包括

  • SYN: 同步, 用于建立连接和同步序列号
  • ACK: 确认, 对已接受的数据包确认
  • FIN: 完成, 表示数据已发送完毕, 即将关闭连接
  • PSH: 推送, 表示该数据包被接收后应立即交给上层应用, 不在缓存区排队
  • RST: 重置, 用于连接复位, 拒绝错误和非法的数据包
  • URG: 紧急, 表示数据包应被加急处理

此外还有2个序号:

  • seq: 顺序号, 数据包中第一个字节的序号
  • ack: 确认号, 响应前面的seq, 值为seq+1, 可以理解为预期下次发送的序列号

KeepAlive机制

  • TCP的KeepAlive目的在于保持连接, 检测连接状态
  • HTTP协议的Keep-Alive目的是连接复用

3. 发送与接受数据

发送和接受数据使用http协议进行.

HTTP协议简介

  • HTTP是基于TCP的应用层通信协议
  • HTTP是无状态协议, 其不会对历史请求和通信状态持久化存储, 目的是为了保持简单高效

HTTP的发挥的作用如下图:

浏览器打开一个网页的全流程

HTTP请求

基本结构包括三部分: 请求行, 消息头, 正文

  • 请求行包括: 方法, URI, 协议版本
  • 消息头包括相关参数, 常见的有 内容格式, 语言, 内容长度等等
  • 正文内容由客户端确定
浏览器打开一个网页的全流程

常见请求方法:

  • GET: 获取资源 (最常用方法)
  • HEAD: 获取资源的元信息, 只传回响应头, 轻量版的GET
  • POST: 写入或上传数据, 通常表示新建 (第二常用方法)
  • PUT: 类似POST, 含义有细微区别, 通常表示更新, 但用的比较少
  • DELETE: 删除资源, 比较危险的操作
  • TRACE: 追踪请求响应的传输路径, 多用于链路的测试和诊断
  • CONNECT: 和另一个服务器建立特殊的连接隧道, Web服务器作为中间代理
  • OPTIONS: 列举可对资源实行的方法

HTTP响应

基本结构包括三部分: 状态行, 消息头, 正文

  • 状态行包括: 协议版本, 状态码, 状态码描述
  • 消息头包含一些参数, 例如日期, 内容格式, 内容长度
  • 正文内容由服务端确定
浏览器打开一个网页的全流程

状态码分类

  • 1xx: 指示信息, 表示请求已接收, 继续处理
  • 2xx: 成功, 表示请求已被成功接收, 理解, 接受
  • 3xx: 重定向, 要完成请求必须进行更进一步的操作
  • 4xx: 客户端错误, 请求有语法错误或请求无法实现
  • 5xx: 服务器端错误, 服务器未能实现合法的请求

常见状态代码

  • 200: OK, 客户端请求成功
  • 400: Bad Request, 客户端请求语法错误, 无法被服务器理解
  • 404 : Not Found, 请求的资源不存在
  • 500: Internal Server Error, 服务器发生内部错误
  • 503: Server Unavailable, 服务器当前无法处理客户端请求, 一段时间后可能恢复正常

HTTP与HTTPS

HTTP协议存在一些缺点

  • 通信中使用不加密的明文, 会被窃听
  • 通信中不验证通信方的身份, 可能存在攻击者伪装
  • 无法验证数据的完整性和是否被篡改

为了解决上述缺点, 就有了HTTPS, 其可以简单理解为

HTTPS=HTTP+加密+认证+完整性保护

在协议栈上HTTPS多了SSL (Secure Socket Layer) 或TLS (Transport Layer Security)

浏览器打开一个网页的全流程

4. 与目标主机断开TCP连接 (四次挥手)

用日常生活场景来比喻四次挥手

  1. 客户端->服务器: "我不聊了"
  2. 服务器->客户端: "我也不聊了"
  3. 服务器->客户端: "拜拜"
  4. 客户端->服务器: "拜拜"

具体的交互细节

浏览器打开一个网页的全流程

使用Wireshark抓包

浏览器打开一个网页的全流程

  1. 客户端->服务器: [FIN]
  2. 服务器->客户端: [ACK]
  3. 服务器->客户端: [FIN]
  4. 客户端->服务器: [ACK]

为什么建立连接是三次握手, 而关闭时需要四次挥手?

建立连接时: 服务端接收到客户端的SYN后, 直接发送 SYN+ACK 同时完成应答(ACK)和同步(SYN), 因此只需要三次.

TCP是全双工的通信协议, 客户端发送FIN表示自己的数据发送完毕, 但此时服务端依然可以发送数据到客户端, 需要等待服务端发送完毕数据后再发送FIN表示服务端也完毕.

参考

【总结】访问一个网页的全过程_网页访问全过程_toumingren527的博客-CSDN博客

访问一个网页的全过程(超详细版)_web访问的过程_小包同学666的博客-CSDN博客

一个域名可以对应多个IP吗?如何通过DNS实现? - 知乎 (zhihu.com)

DNS域名详细解析过程(最全面,看这一篇就够)_dns解析_bangshao1989的博客-CSDN博客

浏览器输入网址,到显示网页全过程 - 知乎 (zhihu.com)

访问一个网页的全过程(超详细版)_web访问的过程_小包同学666的博客-CSDN博客

使用 WireShark 分析 TCP/IP 三次握手 和 四次挥手 - bylijian - 博客园 (cnblogs.com)

http、https、tcp三次握手,四次挥手学习笔记 - 知乎 (zhihu.com)

聊聊 TCP 中的 KeepAlive 机制 - 知乎 (zhihu.com)

一次完整的HTTP请求过程是怎么样的呢?【图文详解】 - 知乎 (zhihu.com)

一文彻底搞懂 TCP三次握手、四次挥手过程及原理 - 知乎 (zhihu.com)

http://www.tcpipguide.com/free/t_TCPConnectionTermination-2.htm

TCP/IP协议栈详解_mayifan_blog的博客-CSDN博客

深入理解HTTP协议 - 知乎 (zhihu.com)

https://www.geeksforgeeks.org/state-the-core-components-of-an-http-response/

https://zhuanlan.zhihu.com/p/359141330

后文

有些地方写的有问题或者不够明确, 欢迎看到这里的朋友们纠正和补充

内容比较多, 后续还会继续更新完善文章来源地址https://www.toymoban.com/news/detail-478329.html

到了这里,关于浏览器打开一个网页的全流程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 电脑正常登录QQ微信,但浏览器无法打开网页,这个你一定要学会!

    电脑能正常登录微信/QQ,但是浏览器无法打开网页的情况时有发生。掌握这三个方法,就能轻松解决问题! 首先 按Win+R , 输入CMD , 回车 输入ping baidu.com , 回车 ▲ 网络正常情况有回复 有【来自xxx的回复:字节=xx……】就说明网络是正常的 ▲ 网络异常情况 如果不通,就

    2024年02月04日
    浏览(89)
  • 帝国CMS手机站限制网页只能在微信浏览器打开的方法

    !DOCTYPE html 有时候我们需要帝国CMS做的网站只能在手机端微信浏览器打开,那么就需要以下步骤了,包括了一个判断方法(前台JS静态判断客户端)! 代码如下: 把以下js代码加到模板里头部 然后在后台栏目-自定义页面-新建个自定义页面-命名为wxError.html 代码以下: 请在微信

    2024年02月03日
    浏览(49)
  • 海康威视网络摄像头通过浏览器网页的配置流程

    一、登录 输入网络摄像机IP地址,显示登录窗口,输入用户名和密码后,点击登录。如果是新设备,需要先激活设备,设置登录密码。(Edge浏览器如何访问海康设备?) 二、界面介绍 登入界面后,会显示预览,回放,图片,配置。登陆后界面右上角会显示用户名和注销标签

    2024年02月08日
    浏览(59)
  • 【Python小技巧】Python操控Chrome浏览器实现网页打开、切换、关闭(送独家Chrome操作打包类源码、Chrome浏览器Cookie在哪里?)

    本文将为您展示如何通过Python控制浏览器实现网页的打开、页面的切换和关闭的基本操作,另外对于高阶用户,知道Chrome浏览器Cookie在哪里?可以方便方位Cookie从而实现带登录的更多操作。当然,利用本文方法,你也可以提前登录好,这样就可以直接操作,而免去繁琐的登录

    2024年02月16日
    浏览(61)
  • 详解静态网页数据获取以及浏览器数据和网络数据交互流程-Python

    目录 前言 一、静态网页数据 二、网址通讯流程 1.DNS查询 2.建立连接 3.发送HTTP请求 4.服务器处理请求 5.服务器响应 6.渲染页面 7.页面交互 三、URL/POST/GET 1.URL 2.GET  形式 3.POST 形式 四.获取静态网页数据 1.requests库 点关注,防走丢,如有纰漏之处,请留言指教,非常感谢 在网站

    2024年02月03日
    浏览(89)
  • 详解动态网页数据获取以及浏览器数据和网络数据交互流程-Python

    动态网页是一种在用户浏览时实时生成或变化的网页。与静态网页不同,后者通常是预先编写好的HTML文件,直接由服务器传送给浏览器,内容在服务端生成且固定不变,获取静态数据的文章课查阅博主上一篇文章:详解静态网页数据获取以及浏览器数据和网络数据交互流程

    2024年01月23日
    浏览(53)
  • HDFS集群部署成功但网页无法打开如何解决(显示配置通过浏览器访问hdfs的端口)

    在学习黑马2023大数据教程过程中,首先依照视频完成了如下配置:【必须】 【黑马2023大数据实战教程】大数据集群环境准备过程记录(3台虚拟机) 黑马2023大数据实战教程】VMWare虚拟机部署HDFS集群详细过程 最后node1的hadoop用户下输入 start-dfs.sh 一键启动hdfs集群成功,三台虚

    2024年02月09日
    浏览(62)
  • Microsoft Edge浏览器主页被篡改的解决办法(Microsoft Edge浏览器每次打开都是同一个页面)

    Microsoft Edge每次打开都是同一个页面,在设置- - 处修改也没用,这种情况一般是Microsoft Edge浏览器主页被篡改,解决办法如下: 1.桌面右键单击 Microsoft Edge ,选择 属性 ,然后选择 快捷方式, 把 目标 后打开Microsoft Edge后每次出现的页面的网址删除,把这个网址删除并保存即

    2024年02月11日
    浏览(79)
  • 在访问一个网页时弹出的浏览器窗口,如何用selenium 网页自动化解决?

    相信大家在使用selenium做网页自动化时,会遇到如下这样的一个场景: 在你使用get访问某一个网址时,会在页面中弹出如上图所示的弹出框。 首先想到是利用Alert类来处理它。 然而,很不幸,Alert类处理的结果就是没有结果,并不能够将这个弹出框关闭掉。 无法用处理alert的

    2024年02月10日
    浏览(50)
  • selenium 网页自动化-在访问一个网页时弹出的浏览器窗口,我该如何处理?

    相信大家在使用selenium做网页自动化时,会遇到如下这样的一个场景: 在你使用get访问某一个网址时,会在页面中弹出如上图所示的弹出框。 首先想到是利用Alert类来处理它。 然而,很不幸,Alert类处理的结果就是没有结果,并不能够将这个弹出框关闭掉。 无法用处理alert的

    2024年02月07日
    浏览(49)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包