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

news2024/11/28 14:13:15

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

img

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

img

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

主要是如下过程:

  1. 输入网址
  2. DNS 解析
  3. 客户端发送 HTPP 请求
  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. 断开连接

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AUTOSAR-OS的调度机制-调度表(没理解透,继续更新)

什么是调度表: 1. 调度表由一系列按时间先后顺序排序的终结点组成,其中每个终结点都有自己的任务,有的终结点可能是激活一系列的任务,有的是设置一系列的事件,还有的可能是既激活一系列的任务又设置一系列的事件。 调…

数据结构之庖丁解牛八大排序算法,附动图说明过程(上)

目录 一、排序的概念以及应用 二、常见排序算法的实现 1.插入排序 1.1直接插入排序 b.实现直接插入排序 1.2希尔排序(缩小增量排序) 2.选择排序 2.1直接选择排序 2.2堆排序 3.交换排序 3.1冒泡排序 一、排序的概念以及应用 1.排序的概念 所谓排序&#x…

Mysql数据库--修改root密码的几种方法(忘记密码知道密码)

Mysql数据库--修改root密码的几种方法(忘记密码&知道密码) 🔻一、知道密码情况--修改root密码⛳ 1.1 方式1:alter 命令修改⛳ 1.2 方式2:set password命令修改 🔻二、忘记密码情况-修改root密码⛳ 2.1 …

华为OD机试真题 Java 实现【找车位】【2023 B卷 100分】,附详细解题思路

一、题目描述 停车场有一横排车位,0代表没有停车,1代表有车。至少停了一辆车在车位上,也至少有一个空位没有停车。 为了防剐蹭,需为停车人找到一个车位,使得距停车人的车最近的车辆的距离是最大的,返回此…

打造高质量视频,创造视觉奇观!Camtasia 2023为你升级!

嘿,伙计! 在这个全新版本中,我们迎来了焕然一新的动画控制和更简化的特效制作流程,让创作变得更高效。 不仅如此,全新的背景去除和动画光标功能也让视频拥有全新的视觉体验。让我们先谈谈光标,这个细节或…

计算机视觉:风格迁移

风格迁移 本节将介绍如何使用卷积神经网络,自动将一个图像中的风格应用在另一图像之上,即风格迁移(style transfer) (Gatys et al., 2016)。 这里我们需要两张输入图像:一张是内容图像,另一张是风格图像。…

Mac使用DBeaver连接达梦数据库

Mac使用DBeaver连接达梦数据库 下载达梦驱动包 达梦数据库 在下载页面随便选择一个系统并下载下来。 下载下来的是zip的压缩包解压出来就是一个ISO文件,然后我们打开ISO文件进入目录:/dameng/source/drivers/jdbc 进入目录后找到这几个驱动包&#x…

Vue 2和Vue 3路由Router创建的区别简记(在main.js文件中引入的区别和router的js文件中创建语法的区别)

Vue 2和Vue 3路由Router创建的区别即Router3.0和Router4.0的创建区别简记 1、版本的搭配: Vue 2到Vue 3的改版升级,同样的带来Vue Router的升级。创建Vue项目之后,我们可以在package.json文件中看到,Vue 2创建的项目往往是与Vue…

C++ | 拷贝文件

C拷贝文件 文章目录 C拷贝文件ANSI-C-WAYPOSIX-WAY (K&R use this in "The C programming language", more low-level)KISS-C-Streambuffer-WAYCOPY-ALGORITHM-C-WAYOWN-BUFFER-C-WAYLINUX-WAY理智的方式C 17Reference欢迎关注公众号【三戒纪元】 列举了几种拷贝…

nestjs超详细从零到零点五详细入门项目搭建过程

nestjs超详细从零到零点五详细入门项目搭建过程 项目完整地址github,修复了一些swagger文档接口,传参显示问题 从零到有搭建一个完整的后台管理系统项目 涉及到的知识 controller控制器provider提供者module模块middleware中间件filter过滤器pipe管道…

简明Python教程

前言:学习《简明 Python 教程》Swaroop, C. H. 著 沈洁元 译 www.byteofpython.info 摘录,方便以后使用查阅。 基础概念 常量 Python中有4种类型的数——整数、长整数、浮点数和复数。 2是一个整数的例子。长整数不过是大一些的整数。3.23和52.3E-4是…

高标准农田信息化管理平台概要设计

1、综合信息一张图系统 通过一张图的形式,可视化直观展示地区土地分布、耕地质量、高标准农田建设情况、灌溉情况、设备分布情况及环境监测数据。农业管理者可在一张图上查看农田相关信息,及时了解农田情况,为农田管理者的精准管理和科学决策…

Axure教程—拖拽获取(中继器+动态面板 )

本文将教大家如何用AXURE中的中继器和动态面板制作拖拽获取效果 一、效果介绍 如图: 预览地址:https://68e5b3.axshare.com 下载地址:https://download.csdn.net/download/weixin_43516258/87874085?spm1001.2014.3001.5503 二、功能介绍 …

OpenMMLab-AI实战营第二期——2-2.基于RTMPose的耳朵穴位关键点检测(Colab+MMPose)

文章目录 1. Colab和Google云端硬盘1.1 建立项目文件和jupyter文件1.2 Colab运行时选择1.3 关联Colab中的文件和Google云端硬盘的文件 2. Colab和MMPose2.1 环境配置2.2 配置文件修改 3. Colab相关知识 视频链接:B站-RTMPose关键点检测-安装MMDetection和MMPose 1.…

一篇文章搞定Java中常用集合的排序方法

目录 Array 数组 List 列表 Collections.sort() 简单类型 复杂对象 类 使用Lambda表达式 Stream API Map 键值对 对 Map 的 Key 进行排序 对 Map 的 Value 进行排序 最近在做算法题的时候,发现排序在大部分题中都不可或缺,今天心血来潮&am…

Vue配置proxy代理,但接口报错2007 bad domain

1、排查proxy代理配置是否有误 排查 proxyTable 对象中配置的 target 是否正确。若正确,那可能就是请求头的问题。 无特殊配置的情况下,请求头是这样子的: Host 和 Referer 是本地地址,如果后端增加 CSRF 防御机制,…

【JDBC:连接MySQL数据库】出现SQL注入的解决办法、什么时候需要使用SQL注入、事务的使用、悲观锁乐观锁

JDBC JDBC是什么? Java Database Connectivity(java语言连接数据库) java.sql.*;(这个包下有很多接口) JDBC的本质是什么? JDBC的本质是SUN公司制定的一套接口(interface) 接口都有…

【C语言】数据以及位运算

位和位运算 C语言中数据的表示方法各种数据类型可表示的数值范围位和CHAR_BITsizeof运算符整型的内部表示无符号整数的内部表示有符号整数的内部表示 位运算位运算符位与运算位或运算位异或运算位取反运算位左移运算符位右移运算符逻辑位移与算术位移 C语言中数据的表示方法 各…

HCIA-RS实验-路由配置-OSPF 单区域配置

OSPF(Open Shortest Path First)是一种基于链路状态的路由协议,常用于大型企业网络中。在一个单区域的OSPF网络中,所有的路由器都属于同一个区域,这种配置方式相对简单直观。本文将介绍OSPF单区域的配置方法。 这篇文章…

Vultr 简介和域名购买

1. 网络地址 Vultr: https://my.vultr.com/ Namecheap: Namecheap.com • Login 2. Vultr 简介: Vultr是一家知名的云计算服务提供商,成立于2014年,总部位于美国新泽西州。Vultr提供高性能的云服务器、存储、网络和应用服务,以…