客户端输入网址后发生的全过程解析(协议交互、缓存、渲染)

目录

      • 1. 输入 URL 并按下回车键
      • 2. DNS 解析
      • 3. TCP 连接
      • 4. 发送 HTTP 请求
      • 5. 服务器处理请求
      • 6. 发送 HTTP 响应
      • 7. 浏览器接收响应
      • 8. 渲染网页
      • 9. 执行脚本
      • 10. 处理其他资源
      • 11. TLS/SSL 加密(如果使用 HTTPS)
        • 握手过程
      • 12. 协议协商和优化
    • 总结


1. 输入 URL 并按下回车键

用户在浏览器中输入 URL(例如 http://www.example.com)并按下回车键。


2. DNS 解析

  1. 浏览器缓存,浏览器首先检查其 DNS 缓存中是否有该域名的 IP 地址。如果有,则使用该地址。
  2. 操作系统缓存,如果浏览器缓存中没有,则查询操作系统的 DNS 缓存。
  3. 本地 Hosts 文件,如果操作系统缓存中也没有,则检查本地的hosts 文件,看是否有手动配置的 IP 地址。
  4. DNS 服务器查询,如果以上步骤都未能找到 IP 地址,则操作系统将查询配置的 DNS 服务器。通常是由互联网服务提供商(ISP)提供的 DNS 服务器。

DNS 查询过程:

  1. 递归查询:本地 DNS 服务器向根 DNS 服务器发送查询请求,根服务器返回顶级域(如 .com)服务器地址。
  2. 迭代查询:本地 DNS 服务器向顶级域服务器查询,顶级域服务器返回权威 DNS 服务器地址。
  3. 最终查询:本地 DNS 服务器向权威 DNS 服务器查询,权威 DNS 服务器返回域名的 IP 地址。
    在这里插入图片描述

3. TCP 连接

三次握手
得到 IP 地址后,浏览器通过 TCP 三次握手建立与服务器的连接:

  1. SYN:客户端发送一个 SYN(同步序列编号)包给服务器,表示请求建立连接。
  2. SYN-ACK:服务器收到 SYN 包后,返回一个 SYN-ACK(同步-确认)包,表示同意连接。
  3. ACK:客户端收到 SYN-ACK 包后,发送一个 ACK(确认)包,表示连接建立。

4. 发送 HTTP 请求

在这里插入图片描述

  1. 构建请求
    连接建立后,浏览器构建一个 HTTP 请求报文,报文包含请求行(例如 GET / HTTP/1.1)、请求头(例如 Host: www.example.com)和可能的请求体。

  2. 发送请求
    浏览器将 HTTP 请求报文通过已建立的 TCP 连接发送到服务器。


5. 服务器处理请求

  1. 解析请求
    服务器接收到请求后,解析 HTTP 请求报文,确定请求的资源和请求类型。

  2. 处理请求
    服务器处理请求,根据请求的资源路径,查询数据库或文件系统,生成响应内容。

  3. 构建响应
    服务器构建 HTTP 响应报文,报文包含状态行(例如 HTTP/1.1 200 OK)、响应头(例如 Content-Type: text/html)和响应体(例如 HTML 文件)。


6. 发送 HTTP 响应

服务器将 HTTP 响应报文通过 TCP 连接发送回客户端。


7. 浏览器接收响应

  1. 检查缓存,浏览器接收到响应后,检查响应头中的缓存控制字段(例如 Cache-ControlExpires),决定是否缓存该响应。
  2. 解析内容,浏览器解析响应体中的 HTML 内容,开始渲染网页。

8. 渲染网页

  1. 构建 DOM 树,浏览器解析 HTML,构建 DOM 树(文档对象模型)。
  2. 构建 CSSOM 树,浏览器解析 CSS 文件,构建 CSSOM 树(CSS 对象模型)。
  3. 构建渲染树,浏览器将 DOM 树和 CSSOM 树结合,构建渲染树。
  4. 布局和绘制,浏览器根据渲染树计算每个元素的位置和尺寸(布局),然后将元素绘制到屏幕上(绘制)。

9. 执行脚本

浏览器解析并执行 JavaScript 脚本,可能会修改 DOM 树,从而触发重新布局和重新绘制。


10. 处理其他资源

  1. 下载资源
    在解析 HTML 过程中,浏览器会发现需要加载的外部资源(例如图片、CSS、JavaScript 文件)。浏览器会发起额外的 HTTP 请求来下载这些资源。

  2. HTTP/2 多路复用
    如果服务器支持 HTTP/2,浏览器可以通过单一 TCP 连接同时请求多个资源,提高资源加载速度。

  3. 缓存
    浏览器会检查这些资源是否已经在缓存中,如果在缓存中且未过期,则直接从缓存中加载资源。


11. TLS/SSL 加密(如果使用 HTTPS)

如果访问的网页是 HTTPS,整个过程会使用 TLS/SSL 加密,确保数据在传输过程中不被窃听或篡改。

握手过程

HTTPS 在 TCP 三次握手后,还需要进行 TLS/SSL 握手:

  1. 客户端 Hello:客户端发送支持的协议版本、加密算法、压缩方法等信息。
  2. 服务器 Hello:服务器选择加密算法和协议版本,并返回服务器证书。
  3. 密钥交换:客户端生成一个随机数,并使用服务器的公钥加密后发送给服务器。双方通过此随机数生成对称密钥。
  4. 握手结束:双方交换 Finished 消息,握手过程结束,之后的数据传输都使用对称加密。
    在这里插入图片描述

12. 协议协商和优化

  1. 协商协议版本和加密算法
    在 TLS/SSL 握手过程中,客户端和服务器会协商使用的协议版本和加密算法。

  2. 缓存控制
    服务器可以通过 HTTP 响应头控制缓存策略,如 Cache-ControlETagLast-Modified 等,浏览器根据这些头信息决定是否缓存资源及其有效期。

  3. 压缩
    服务器可以通过 Content-Encoding 响应头指示对响应内容进行压缩(如 Gzip),以减少传输数据量。


总结

当用户在浏览器中输入URL并按下回车,浏览器首先查询DNS解析域名获取IP地址,然后通过TCP三次握手建立与服务器的连接,并发送HTTP请求。服务器处理请求并返回HTTP响应,浏览器接收响应后检查缓存,解析HTML构建DOM树、CSSOM树和渲染树,进行布局和绘制,同时解析和执行JavaScript脚本,加载并渲染其他外部资源。如果使用HTTPS,还包括TLS/SSL握手过程。整个过程中涉及协议协商、缓存控制和数据压缩,最终呈现给用户完整的网页。

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

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

相关文章

低碳短视频:成都柏煜文化传媒有限公司

低碳短视频:绿色传播的新风尚 随着全球气候变化和环境问题日益严峻,低碳生活已经成为人们追求的新风尚。在这个背景下,低碳短视频应运而生,以其独特的方式传播绿色理念,推动低碳生活方式的普及。成都柏煜文化传媒有限…

如何使用sr2t将你的安全扫描报告转换为表格格式

关于sr2t sr2t是一款针对安全扫描报告的格式转换工具,全称为“Scanning reports to tabular”,该工具可以获取扫描工具的输出文件,并将文件数据转换为表格格式,例如CSV、XLSX或文本表格等,能够为广大研究人员提供一个…

boss直聘招聘数据可视化分析

boss直聘招聘数据可视化分析 一、数据预处理二、数据可视化三、完整代码一、数据预处理 在 上一篇博客中,笔者已经详细介绍了使用selenium爬取南昌市web前端工程师的招聘岗位数据,数据格式如下: 这里主要对薪水列进行处理,为方便处理,将日薪和周薪的数据删除,将带有13薪…

Excel 将某个序列随机重排 N 次

A 列是个随机序列,B2 格是参数,表示重排的次数。 AB1ItemsReplicates2A23B4C5D 要求将 A 列重拍 N 次 D1Result2C3D4B5A6D7A8B9C 使用 SPL XLL,输入公式: spl("?2.conj(?1.sort(rand()))",A2:A5,B2)"整数.()…

RK3568平台开发系列讲解(调试篇)分析内核调用的利器 ftrace

🚀返回专栏总目录 文章目录 一. 指定 ftrace 跟踪器二、设置要 trace 的函数三、ftrace 的开关四、查看 trace五、trace-cmd 的使用六、trace-cmd 的常用选项6.1、查看可以跟踪的事件6.2、跟踪特定进程的函数调用6.3、函数过滤6.4、限制跟踪深度6.5、追踪特定事件沉淀、分享、…

数字化采购管理革新:全过程数字化采购管理平台的架构与实施

摘要:在数字化转型的浪潮中,采购管理正逐步迈向全流程的数字化。本文将详细解析全过程数字化采购管理平台的技术架构和实施策略,探讨如何通过Spring Cloud、Spring Boot2、Mybatis等先进技术和服务框架,实现从供应商管理到采购招投…

关于linux的图形界面

关于linux的图形界面 1. 概述1.1 X1.2 DM(显示管理器/登录管理器)1.3 WM(窗口管理器)1.4 GUI Toolkits1.5 Desktop Environment1.6 基本架构 2. 安装桌面2.1 Centos安装桌面2.2 Ubuntu安装桌面(未实践) 3. …

OpenGL-ES 学习(6)---- 立方体绘制

目录 立方体绘制基本原理立方体的顶点坐标和绘制顺序立方体颜色和着色器实现效果和参考代码 立方体绘制基本原理 一个立方体是由8个顶点组成,共6个面,所以绘制立方体本质上就是绘制这6个面共12个三角形 顶点的坐标体系如下图所示,三维坐标…

调试代码Pair-wise-Similarity-module-master

第一步:运行.py文件生成json文件 问题一:json.decoder.JSONDecodeError: Invalid \escape: line 1 column 31616 (char 31615) 解决: for dataset in dataset_list:with open(datasetmap[dataset] ".csv", "r") as li…

ETO外汇:日元技术分析,美元/日元、欧元/日元、英镑/日元未来走势如何?

摘要: 根据近期的市场分析,美元/日元、欧元/日元和英镑/日元这三组货币对在未来的走势将受到多方面因素的影响。本文将从技术角度对每一组货币对进行详细分析,帮助投资者了解可能的支撑和阻力位,以及未来的走势预期。通过对关键技…

基于Transformer的自监督学习在NLP中的前沿应用

1. 引言 自然语言处理(NLP)领域正经历一场由自监督学习(Self-Supervised Learning, SSL)和Transformer架构共同驱动的革命。自监督学习通过巧妙地利用未标注数据,大大减少了对人工标注的依赖,而Transforme…

第二节课 6月13日 ssh密钥登陆方式

centos和ubuntu openssh服务的初始安装 一、实验:ubuntu系统激活root用户 ubuntu系统如何激活root用户,允许root用户ssh登陆? 1、ubuntu默认root用户未设置密码,未激活 激活root用户,设置root密码 sudo passwd roo…

无线幅频仪制作(WiFi通信)-含STM32源程序,JAVA上位机与设计报告

资料下载地址:无线幅频仪制作(WiFi通信)-含STM32源程序,JAVA上位机与设计报告 目录 项目功能 1、 系统方案1.1 比较与选择 1.1.1 控制器的论证与选择 1.1.2 信号源的论证与选择 1.1.3 放大器模块的论证与选择 1.1.4 键盘与显示模块的论证与选择 1.1.5 网络通…

GPOPS-II教程(3): 航天器最优控制问题

文章目录 问题描述GPOPS代码main functioncontinuous functionendpoint function完整代码代码仿真结果 最后 问题描述 例子出自论文 Direct solution of nonlinear optimal control problems using quasilinearization and Chebyshev polynomials(DOI:1…

CircuitBreaker断路器-Resilience4j

目录 背景分布式架构面临的问题:服务雪崩如何解决? CircuitBreakerResilience4jCircuitBreaker 服务熔断服务降级三种状态转换例子参数配置案例demo作业 BulkHead隔离特性SemaphoreBulkhead使用了信号量FixedThreadPoolBulkhead使用了有界队列和固定大小…

Ubuntu22安装PyCharm

下载(社区版) 官网下载地址 解压 sudo tar -xzvf pycharm-community-2024.1.4.tar.gz 软件移动到指定目录下(根据不同版本修改) sudo mv pycharm-community-2024.1.4/ /usr/local/PyCharm/运行 cd /usr/local/PyCharm/pycha…

Altera不同系列的型号命名规则

Altera芯片型号:10AX07H4F34I3SG 20nm工艺 资源: 大数据 云计算 人工智能 图像处理 MSEL

固定翼无人机入门(二)

这里讲讲无人机的路径跟踪控制相关知识,路径跟踪需要制导率(平面)和控制器,在无人机中较为常用的是L1制导率,不过L1制导率是控制无人机在二维平面上的转向,此处还引入总能量控制,控制无人机的高…

Vue3学习笔记<->开发环境安装

背景 公司开始做产品开发,前端就选择使用了vue,替换了传统的jsp。公司要求每个开发人员都要前后端都可以开发,于是就开始学习vue了。 安装环境 安装node.js node.js下载地址:node.js下载地址 安装:选在安装路径&…

Web渗透:逻辑漏洞

逻辑漏洞是指应用程序的逻辑中存在缺陷,导致应用程序无法按照预期执行,可能被攻击者利用来执行未授权的操作或绕过安全措施。逻辑漏洞通常不依赖于常见的输入验证漏洞或技术漏洞,而是利用系统设计或实现中的问题;本文以两个例子举…