当你在浏览器输入一个地址

你在浏览器中输出了一个地址,回车后,一直到显示页面,中间经历了哪些过程 ?

1. 用户输入 URL 并按下回车

  • 用户在浏览器的地址栏中输入一个 URL(例如 http://example.com)并按下回车键。

2. DNS 解析

  • 浏览器检查本地缓存中是否有该域名对应的 IP 地址。
  • 如果本地缓存没有,浏览器会向本地 DNS 服务器(通常是由 ISP 提供)发送 DNS 查询请求。
  • 本地 DNS 服务器查找该域名的 IP 地址,如果找不到,会递归查询上级 DNS 服务器,直到找到对应的 IP 地址。
  • 找到 IP 地址后,DNS 服务器将其返回给浏览器。

3. 建立 TCP 连接

  • 浏览器使用之前获得的 IP 地址,通过 TCP/IP 协议与目标服务器建立连接。
  • 浏览器向服务器的默认端口(通常是 80 或 443)发送 TCP SYN 请求,开始三次握手过程:
    1. 浏览器发送 SYN 包。
    2. 服务器收到 SYN 包后,回复 SYN-ACK 包。
    3. 浏览器收到 SYN-ACK 包后,回复 ACK 包,三次握手完成,TCP 连接建立。

4. 发送 HTTP 请求

  • TCP 连接建立后,浏览器向服务器发送 HTTP 请求:
    • 请求行(Request Line):包含请求方法(GET、POST 等)、请求 URL 和 HTTP 版本。
    • 请求头(Headers):包含浏览器的各种信息,如 User-Agent、Accept、Host 等。
    • 请求体(Body):在 GET 请求中通常为空,在 POST 请求中包含提交的数据。

5. 服务器处理请求

  • 服务器收到请求后,根据请求的 URL 和其他信息,进行处理。
  • 服务器可能需要:
    • 读取静态资源(如 HTML、CSS、JavaScript 文件等)。
    • 调用后台程序(如 PHP、Python、Java 等)生成动态内容。
    • 查询数据库以获取数据。
  • 处理完成后,服务器将生成 HTTP 响应。

6. 服务器发送 HTTP 响应

  • HTTP 响应包含以下部分:
    • 状态行(Status Line):包含 HTTP 版本、状态码(如 200 OK、404 Not Found 等)。
    • 响应头(Headers):包含服务器信息、内容类型、内容长度等。
    • 响应体(Body):包含请求的实际内容(如 HTML 页面、图像等)。

7. 浏览器接收响应并渲染页面

  • 浏览器接收到服务器的响应后,开始解析 HTML 内容。
  • 浏览器根据 HTML 内容,逐步下载并解析嵌入的资源(如 CSS、JavaScript、图像等)。
  • 浏览器构建 DOM 树(Document Object Model)和 CSSOM 树(CSS Object Model),结合成渲染树(Render Tree)。
  • 浏览器根据渲染树进行布局计算,将元素放置在正确的位置。
  • 浏览器绘制页面,将内容显示在屏幕上。

8. 执行 JavaScript 和动态更新页面

  • 浏览器继续解析并执行嵌入的或外部引用的 JavaScript 代码。
  • JavaScript 代码可能进行 DOM 操作或通过 AJAX 请求获取更多数据,动态更新页面内容。

总结

整个过程涉及 DNS 解析、TCP 连接、HTTP 请求和响应、页面解析和渲染、JavaScript 执行等多个步骤。每个步骤都可能涉及多个底层协议和技术细节,共同确保用户最终能够看到完整的网页。

在这里插入图片描述

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

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

相关文章

猫狗识别—静态图像识别

猫狗识别—静态图像识别 1. 导入必要的库:2. 设置数据目录和模型路径:3. 定义图像转换4. 使用GPU5. 加载没有预训练权重的ResNet模型6. 创建Tkinter窗口:7.定义选择图片的函数:8.定义预测图片的函数:9.退出程序的函数:10.创建按钮:11.运行Tkinter事件循环:12. 完整代码&#xf…

Chrome谷歌浏览器如何设置,才能正常使用?

Chrome浏览器,也被称为谷歌浏览器,由于简洁的界面设计,极快的响应速度,强大的插件商店,在全球浏览器市场份额中一直都处于遥遥领先的地位。但是因为2010年谷歌宣布退出中国,国内不能再使用谷歌的服务&#…

【仿真建模-解析几何】求有向线段上距指定点最近的坐标

Author:赵志乾 Date:2024-06-25 Declaration:All Right Reserved!!! 问题描述: 有向线段起点A为(x1,y1),终点B为(x2,y2&a…

HTML+CSS 3D旋转登录表单

效果演示 实现了一个具有3D旋转效果的登录框,背景为太空图片,登录框位于太空中心,可以通过输入用户名和密码进行登录。登录框使用了CSS3的3D变换和动画效果,使其具有立体感和动态效果。同时,登录框的样式也经过精心设计…

sql sever 存储过程不能请求https的解决方案

此错误的原因,通常是因为SQL Server默认不允许非加密的HTTP请求。为了解决这个问题,需要配置SQL Server允许非密码的https请求,或者使用密码的http请求。 下面是配置SQL Server允许非加密http请求 UsE [master] ;Go EXEC sp_configure Sh…

【Linux】进程间通信_3

文章目录 七、进程间通信1. 进程间通信分类命名管道 未完待续 七、进程间通信 1. 进程间通信分类 命名管道 管道应用的一个限制就是只能在具有共同祖先(具有亲缘关系)的进程间通信。如果我们想在不相关的进程之间交换数据,可以使用FIFO文件…

详细分析Oracle中的tnsnames.ora基本知识 以及 PLSQL如何连接(附Demo)

目录 1. tnsnames.ora2. Demo3. 实战 1. tnsnames.ora Oracle 数据库网络配置文件,用于配置客户端与数据库服务器之间的连接 定义网络服务名称,客户端可以使用这些名称连接到数据库实例 基本的路径如下: Windows: ORACLE_HOME\network\ad…

QThread 与QObject::moveToThread利用Qt事件循环在子线程执行多个函数

1. QThread的两种用法 第一种用法就是继承QThread,然后覆写 virtual void run(), 这种用法的缺点是不能利用信号槽机制。 第二种用法就是创建一个线程,创建一个对象,再将对象moveToThread, 这种可以充分利用信号槽机制&#xff…

199.罗马数字转整数(力扣)

代码解决 class Solution { public:// 定义一个哈希表来存储罗马数字符号及其对应的整数值unordered_map<char, int> res {{I, 1},{V, 5},{X, 10},{L, 50},{C, 100},{D, 500},{M, 1000},};// 将罗马数字字符串转换为整数的函数int romanToInt(string s) {int num 0; …

ElasticSearch安装、配置详细步骤

一、环境及版本介绍 操作系统&#xff1a; Windows 10 软件版本&#xff1a; elasticsearch-7.17.22、kibana-7.17.22、IK-7.17.22 开发环境选择软件版本应提前考虑正式系统得环境&#xff0c;否则会产生软件与服务器环境不兼容得问题出现&#xff0c;ElasticSearch与环境支…

【机器学习300问】132、自注意力机制(Self-Attention)和传统注意力机制(Attention)的区别?

最近学习注意力机制的时候&#xff0c;发现相同的概念很多&#xff0c;有必要给这些概念做一下区分&#xff0c;不然后续的学习可能会混成一团。本文先区分一下自注意力机制和传统注意力机制。我会先直接给出它们之间有何区别的结论&#xff0c;然后通过一个例子来说明。 一、…

【C++题解】1711. 输出满足条件的整数1

问题&#xff1a;1711. 输出满足条件的整数1 类型&#xff1a;简单循环 题目描述&#xff1a; 有这样的两位数&#xff0c;其十位上的数字比个位上的数字要大&#xff0c;且十位和个位上的数字之和为偶数&#xff0c;请找出所有的满足条件的 2 位数。 输入&#xff1a; 无。…

Unity的Excel转表工具

该Excel工具主要由Python语言完成&#xff0c;版本为3.x 主要功能&#xff1a; 1.转换后的数据存储结构为二进制。 2.excel文件可以选择多种数据类型&#xff1a;int、float、string、一维&#xff08;int、float、string&#xff09;、二维int、Map&#xff08;int/int、in…

Hive基础知识(十九):Hive 自定义函数

1. 自定义函数 1&#xff09;Hive 自带了一些函数&#xff0c;比如&#xff1a;max/min 等&#xff0c;但是数量有限&#xff0c;自己可以通过自定义 UDF 来方便的扩展。 2&#xff09;当 Hive 提供的内置函数无法满足你的业务处理需要时&#xff0c;此时就可以考虑使用用户自…

OpenFeign 的请求处理流程

流程 1. 定义 Feign 客户端接口 首先&#xff0c;开发者需要定义一个 Feign 客户端接口&#xff0c;并使用 FeignClient 注解进行配置。例如&#xff1a; FeignClient(name "aService", url "http://localhost:8080") public interface ServiceProvid…

Python | Leetcode Python题解之第169题多数元素

题目&#xff1a; 题解&#xff1a; class Solution:def majorityElement(self, nums: List[int]) -> int:count 0candidate Nonefor num in nums:if count 0:candidate numcount (1 if num candidate else -1)return candidate

linux下编译安装python3

目录 一、注意事项 二、安装前依赖安装 三、下载python3 四、编译安装 五、查看是否安装成功 一、注意事项 linux下一般会自带python2&#xff0c;很多程序会依赖python2,所以要在python2基础上安装python3 二、安装前依赖安装 yum -y install zlib* yum install libffi-d…

【漏洞复现】用友 U9 PatchFile.asmx 任意文件上传漏洞

免责声明&#xff1a; 本文内容旨在提供有关特定漏洞或安全漏洞的信息&#xff0c;以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步&#xff0c;并非出于任何恶意目的。阅读者应该明白&#xff0c;在利用本文提到的漏洞信息或进行相关测…

互联网应用主流框架整合之Spring Boot开发

Spring Boot数据库开发 通常SpringBoot数据库开发&#xff0c;会引入spring-boot-starter-jdbc&#xff0c;而如果引入了spring-boot-starter-jdbc&#xff0c;但没有可用的数据源或者没有配置&#xff0c;那么在运行Spring Boot时会出现异常&#xff0c;因为spring-boot-star…

微积分-导数2(导数函数)

在前面的部分中&#xff0c;我们考虑了函数 f f f在固定点 a a a处的导数&#xff1a; f ′ ( a ) lim ⁡ h → 0 f ( a h ) − f ( a ) h \begin{equation}f(a) \lim_{h \to 0} \frac{f(ah) - f(a)}{h}\end{equation} f′(a)h→0lim​hf(ah)−f(a)​​​ 如果我们将等式中…