URL到页面: 探索网页加载的神秘过程

当我们从浏览器的地址栏输入 URL, 按下回车,

img

再到最后出现需要的网页界面,

img

这中间究竟发生了什么, 接下来就一步步进行解析.

主要是如下过程:

  1. 输入网址
  2. DNS 解析
  3. 客户端发送 HTTP 请求
  4. 建立 TCP 连接
  5. 服务器处理请求, 计算响应, 返回响应
  6. 浏览器渲染页面
  7. 关闭连接

本篇中只是概述整个过程, 主要是说明从输入 URL 到展示出页面这个过程中做了什么, 但不会对这中间的每个子过程进行详细的介绍, 这些内容在我前面的博客都有总结过, 不清楚的话可以参考看一看, 具体如下.

计网之初识网络(理解网络传输的基本流程)

计网传输层协议:UDP和TCP

计网之IP协议和以太网, DNS

计网之HTTP协议

1. 输入网址

当在浏览器中输入 URL 后敲下回车, 浏览器会对输入的信息进行以下判断:

  1. 检查输入的内容是不是一个合法的 URL 链接还是一个待搜素的关键词.
  2. 如果是合法的URL链接, 判断输入的URL是不是一个完整的URL, 如果不是, 浏览器就会自己猜测, 然后补全这个URL.
  3. 如果是一个待搜索的关键词, 浏览器就会结合用户设置的默认搜索引擎的 URL 来进行搜索.

2. 进行DNS域名解析

DNS 是由解析器和域名服务器组成的, 作用是将域名转化成 IP 地址.

我们平时在浏览器中输入的网址, 其实就是域名, 当我们输入网址按下回车时, 就发起了一个 GET 请求, 此时浏览器的 DNS 系统首先要做的事情就是解析这个域名, 将域名转化成 IP 地址.

通俗的讲, 我们更习惯于记住一个网站的名字, 比如 www.baidu.com, 而不是记住它的 IP 地址, 比如: 167.23.10.2; 而计算机更擅长记住网站的 IP 地址, 而不是像 www.baidu.com 等链接; 类比一下, 其实 DNS 就相当于一个电话本, 你要找 www.baidu.com 这个域名, 那就去翻一翻电话本, 就能知道它的电话 (IP) 是 167.23.10.2.

3. 进行封装

浏览器拿到域名对应的 IP 地址之后, 就可以构造出 HTTP 数据报, 将其交给传输层, 会以一个随机端口 (1024~65535) 向服务器的 Web 程序的 80 端口 (是服务器侦听网页客户端请求的默认端口) 发起 TCP 的连接请求 (三次握手) , 接着将数据交给了网络层, IP协议将其封装成立IP数据报, 然后交给数据链路层, 转换成二进制形式的比特 (bit) 流, 从网卡发送出去, 再把比特转换成电子, 光学或微波信号在网络中传输最终通过网卡传输出去.

4. 进行传输

传输的过程中, 经过一些网络设备, 交换机和路由器等;

  • 交换机把数据分用到数据链路, 再重新封装, 继续转发.
  • 路由器会把数据分用到网络层, 重新封装, 接着路由器会根据数据报中的目的 IP 在路由表中匹配, 找个合适的方向发出去, 每次转发 TTL 都会减1 (TTL 是一个 IP 协议的值, 它告诉网络, 数据包在网络中的时间是否太长而应被丢弃).

5. 服务器接收请求, 根据请求计算响应, 重新封装, 返回响应

服务器通过监听端口来获取到客户端的 HTTP 请求, 与客户端建立 TCP 连接后, 服务器开始接收客户端发来的数据, 首先进入到网卡, 然后是进入到内核的 TCP/IP 协议栈分用数据 (用于识别该连接请求, 解封包, 一层一层的剥开), 终通过 HTTP 解码, 从接收到的数据中进行解析, 找到你想要访问的那个资源, 将资源构造成 HTTP 响应, 再将响应层层封装发送给客户端浏览器.

这样一个 HTTP 通信就完成了, 服务器会根据 HTTP 请求中的 Connection 字段, 决定是否关闭 TCP 连接通道, Connection 字段值为 keep-alive 时, 服务器不会立刻关闭连接, 保证通信的完成.

6. 浏览器接收响应, 进行渲染页面, 最终呈现一个完整的页面

浏览器接收到响应内容之后, 还是先对数据进行分用, 最后浏览器会解析 HTML 文件生成主页框架(构建 dom 树), JS 的解析是由浏览器中的 JS 解析引擎完成的, 比如谷歌的是 V8.

在解析过程中, 如果同时遇到请求外部资源时, 如图片, 外链的 CSS 等静态资源的引用, 会向服务器继续发送请求, 请求的内容就是主页里的一些资源, 例如图片, 视频, JS文件等…

这些请求过程是异步的, 并不会影响 HTML 页面进行加载.

7. 断开连接

此时整个过程结束, 最后通过四次挥手, 浏览器和客户端的连接.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/32357.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker 操作手册

名词解释 images:封装了应用程序的镜像 tag:镜像的标记,一个镜像可以创建多个标记 container:装载镜像并运行 常用命令 查看容器 docker ps -a //查看全部镜像 启动容器 docker start mysql //启动mysql容器 停止容器 doc…

Maven(三):Maven的组成详解

文章目录 坐标和依赖坐标详解依赖配置依赖范围传递性依赖依赖调节可选依赖优化排除依赖归类依赖优化依赖 仓库本地仓库远程仓库仓库镜像常用搜索地址 生命周期与插件三套生命周期clean生命周期default生命周期site生命周期 插件 聚合与继承更加灵活的构建常见问题使用jdk来运行…

TuyaOS 开发固件OTA上传固件指南

文章目录 一、产品创建二、TuyaOS设备开发三、固件上传 通过TuyaOS接入涂鸦云的产品全部默认支持固件OTA功能,TuyaOS设备实现固件OTA需要: 自定义产品创建TuyaOS嵌入式开发固件上传固件OTA配置与发布 等步骤实现产品OTA。本文重点讲述TuyaOS开发模式下&…

基于数据驱动 U-Net 模型的大气污染物扩散快速预测,提升计算速度近6000倍

项目背景 当前,常见的大气污染预测模型大多是基于物理机理构建的,比如空气质量预测模型 Calpuff、AERMOD、CMAQ 等。然而,这些模型运算较为复杂,对于输入数据的要求非常高,运算耗时也比较长,适合用于常规固…

如何在 ZBrush 和 UE5 中创建精灵吟游诗人(P1)

小伙伴们大家好,今天 云渲染小编给大家带来的是CG艺术家Hugo Sena关于“精灵吟游诗人”项目背后的工作流程,讨论了角色身体、服装和竖琴的工作流程,并解释了如何在虚幻引擎 5 中设置灯光。篇幅较长,分为上下两篇,大家接…

为摸鱼助力:一份Vue3的生成式ElementPlus表单组件

目录 一、实现背景 二、简介 三、组织架构设计 四、实现方式 五、代码示例 六、示例代码效果预览 七、项目预览地址 & 项目源码地址 目前项目还有诸多待完善的地方,大家有好的想法、建议、意见等欢迎再次评论,或于github提交Issues 一、实现…

【吃透网络安全】2023软考网络管理员考点网络安全(三)计算机系统安全评估

涉及知识点 计算机系统安全评估准则,计算机系统安全评估历史,软考网络管理员常考知识点,软考网络管理员网络安全,网络管理员考点汇总。 后面还有更多续篇希望大家能给个赞哈,这边提供个快捷入口! 第一节…

解决vue依赖报错SockJSServer.js出现Cannot read property ‘headers‘ of null

前言 在做新的需求需要变更vue的项目代码时突然出现报错 TypeError: Cannot read property ‘headers’ of null at Server.socket.on (***/node_modules/webpack-dev-server/lib/servers/SockJSServer.js:68:32) 不清楚为什么突然出现了这个问题,之前在这个vue项目…

【安全】使用docker安装Nessus

目录 一、准备docker环境服务器(略) 二、安装 2.1 搜索镜像 2.2 拉取镜像 2.3 启动镜像 三、离线更新插件 3.1 获取challenge 3.2 官方注册获取激活码 3.3 使用challenge码和激活码获取插件下载地址 3.4 下载的插件以及许可协议复制到容器内 四…

数据结构第六章 图 6.4 图的应用 错题整理

4.A A. 不是简单路径的话,有环,去环路径会更短 B. 适合的 弗洛伊德算法才不适合 C. 本来就是 D 2X2矩阵拓展到3X3矩阵 再扩大 若是子集 即加入新顶点后,最短路径都没有变,错 5.B 本题用弗洛伊德更合适 但这道题只需全部代入求最…

PowerShell系列(七)PowerShell当中的Provider介绍

往期回顾PowerShell系列(一):PowerShell介绍和cmd命令行的区别 PowerShell系列(二):PowerShell和Python之间的差异介绍 PowerShell系列(三):PowerShell发展历程梳理 P…

@DateTimeFormat与@JsonFormat不完全解析

目录 前言测试代码DateTimeFormat不加任何注解的情况普通请求JSON请求 JsonFormat普通请求JSON请求 其他方式(InitBinder)结论源码地址 前言 一直以来对DateTimeFormat与JsonFormat 比较模糊,容易搞忘,今天就做个笔记&#xff0c…

UE4自定义资产类型编辑器实现

在虚幻引擎中,资产是具有持久属性的对象,可以在编辑器中进行操作。 Unreal 附带多种资源类型,从 UStaticMesh 到 UMetasoundSources 等等。 自定义资源类型是实现专门对象的好方法,这些对象需要专门构建的编辑器来进行高效操作。 …

SQL语言的四大组成部分——DCL(数据控制语言)

1️⃣前言 SQL语言中的DCL(Data Control Language)是一组用于控制数据库用户访问权限的语言,主要包括GRANT、REVOKE、DENY等关键字。 文章目录 1️⃣前言2️⃣DCL语言3️⃣GRANT关键字4️⃣REVOKE关键字5️⃣DENY关键字6️⃣总结附&#xff1…

【kubernetes】部署网络组件Calico与CoreDNS

前言:二进制部署kubernetes集群在企业应用中扮演着非常重要的角色。无论是集群升级,还是证书设置有效期都非常方便,也是从事云原生相关工作从入门到精通不得不迈过的坎。通过本系列文章,你将从虚拟机配置开始,到使用二进制方式从零到一搭建起安全稳定的高可用kubernetes集…

基于YOLO V8的车牌识别

赵春江 2023年6月 1、前言 十年前就想实现车牌识别这项任务,虽然当时这项技术就已较成熟(与现在的实现方法不同),但那时的我还具备这个能力。弹指一瞬间,没想到十年间人工智能技术已经发展到一个新的高度&#xff0c…

Nacos架构与原理 - 健康检查机制

文章目录 注册中心的健康检查机制Nacos 健康检查机制临时实例健康检查机制永久实例健康检查机制集群模式下的健康检查机制 注册中心的健康检查机制 想象发生地质灾害,被掩埋在废墟下,搜救队需定位才能施救。两种方法: 大喊求救,告知位置与健康状况,让搜救队知晓搜救队使用专业…

社区活动 | OpenVINO™ DevCon 中国系列工作坊第二期 | 使用 OpenVINO™ 加速生成式 AI...

生成式 AI 领域一直在快速发展,许多潜在应用随之而来,这些应用可以从根本上改变人机交互与协作的未来。这一最新进展的一个例子是 GPT 模型的发布,它具有解决复杂问题的能力,比如通过医学和法律考试这种类似于人类的能力。然而&am…

CnOpenData数字经济专利申请与授权数据

一、数据简介 自人类社会进入信息时代以来,数字技术的快速发展和广泛应用衍生出数字经济。与农耕时代的农业经济、工业时代的工业经济大有不同,数字经济是一种新的经济、新的动能、新的业态,并引发了社会和经济的整体性深刻变革。现阶段&…

openEuler操作系统禁用 Nouveau

目录 一、什么是openEuler 二、什么是Nouveau 三、禁用Nouveau Liunx系统安装NVIDIA显卡驱动时需要禁用Nouveau,openEuler操作系统也不例外,但是网上openEuler操作系统如何禁用Nouveau的资料比较少,而且基本都不靠谱,我找到一个…