随笔之浏览器打开一个网页的全部过程

用户输入网址(URL):

用户在浏览器地址栏中输入网址,例如:https://www.example.com。

dns解析

计算机尝试解析一个域名时,首先会检查本地 hosts 文件,看是否存在相应的映射。如果存在映射,计算机将直接使用 hosts 文件中的 IP 地址,而不进行 DNS 查询。如果本地host没有对应的域名解析就会进行dns解析:
1. 计算机向本地 DNS 缓存查询是否有域名的映射记录。
2. 如果本地缓存中没有,计算机将向本地网络中配置的 DNS 服务器发送查询请求。
3. 如果本地 DNS 服务器也没有相应的记录,它将递归地向根域名服务器、顶级域名服务器、权威域名服务器等发起查询,直到找到域名对应的 IP 地址。
4. DNS 服务器将获取到的 IP 地址返回给计算机,并将结果缓存,以便将来的查询。

建立TCP连接:

三次握手(建立连接):
  • 客户端发送请求 (SYN):

    客户端发送一个 TCP 报文,设置 SYN(同步)标志位,表示请求建立连接。同时,客户端选择一个初始序列号(ISN)。

  • 服务器响应请求 (SYN + ACK):

    服务器收到客户端的 SYN 请求后,会回复一个带有 SYN 和 ACK(确认)标志位的 TCP 报文。服务器也选择一个初始序列号。

  • 客户端确认响应 (ACK):

    客户端收到服务器的 SYN + ACK 后,发送一个带有 ACK 标志位的报文,表示对服务器的响应已经收到。至此,连接建立。

SSL/TLS握手

1.下发数字证书并进行签名验证

在握手的初始阶段,服务器会提供一个数字证书,数字证书是由受信任的证书颁发机构(CA)签发的。数字签名是通过 CA 对数字证书进行签名的过程,用于确保证书的真实性和完整性。客户端在握手过程中验证服务器提供的数字证书的签名,以确保证书是由受信任的 CA 签发的。数字签名是一种使用 CA 的私钥签署数据的非对称加密过程。

2.使用非对称加密交换密钥

数字证书包含了服务器的公钥。客户端使用服务器的公钥来加密一个称为"Pre-Master Secret"的随机值,并将其发送给服务器。服务器收到加密的"Pre-Master Secret"后,使用自己的私钥进行解密。这个步骤使用了非对称加密,其中公钥用于加密,私钥用于解密。

3.生成会话密钥:

通过协商生成的"Pre-Master Secret"是安全地通过非对称加密传递的。然后,客户端和服务器使用"Pre-Master Secret"生成"Master Secret",再从"Master Secret"派生出用于对称加密的会话密钥。

4.使用对称加密进行实际请求:

双方使用协商好的加密算法和生成的会话密钥来加密通信。从此时开始,客户端和服务器之间的数据传输都是加密的。

发起HTTP/HTPPS请求:

浏览器向服务器发起一个 HTTP/HTPPS 请求。这个请求包含了用户请求的资源、请求头(例如浏览器的信息、所需的资源类型等)等信息。

服务器处理请求:

服务器收到浏览器的请求后,根据请求的内容和服务器上的配置,分发到相关的服务(Web Server -> Web Application)。
例如:
Apache/Nginx + FastCGI + PHP-FPM(+PHP-CGI)
Nginx + Go
Tomcat+Java

后端处理:

在服务器端,可能会涉及到多个服务,例如应用服务器、数据库服务器、缓存服务器等。这些服务协同工作,生成或获取需要的数据。

HTTP响应:

服务器将处理结果封装成 HTTP 响应,包括状态码、响应头和响应体。响应体中可能包含 HTML、CSS、JavaScript 等文件,或者其他数据格式,如 JSON。

浏览器接收响应:

浏览器接收到服务器的 HTTP 响应后,根据响应头中的信息处理数据。如果响应体包含了 HTML,浏览器开始解析和渲染页面。

四次挥手
  • 客户端发送终止请求 (FIN):

    客户端想要关闭连接时,发送一个带有 FIN(结束)标志位的报文,表示不再发送数据。

  • 服务器确认关闭 (ACK):

    服务器收到客户端的 FIN 后,发送一个带有 ACK 标志位的报文,表示收到了关闭请求。

  • 服务器发送终止请求 (FIN):

    服务器关闭自己的发送通道,并发送一个带有 FIN 标志位的报文给客户端,表示服务器不再发送数据。

  • 客户端确认关闭 (ACK):

    客户端收到服务器的 FIN 后,发送一个带有 ACK 标志位的报文,表示收到了服务器的关闭请求。此时,客户端和服务器之间的连接彻底关闭。

解析HTML和构建DOM树:

浏览器解析 HTML,并构建 Document Object Model(DOM)树,表示页面的结构。

加载CSS和JavaScript:

浏览器开始加载页面中引用的 CSS 和 JavaScript 文件,并执行相应的脚本。这些文件可能会修改 DOM 树、向服务器发起额外的请求等。

渲染页面:

浏览器根据 DOM 树和 CSS 样式信息,开始渲染页面。这包括计算元素的大小和位置、绘制页面的各个部分等。

页面展示:

最终,渲染后的页面在用户的浏览器中显示出来,用户可以与页面进行交互。

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

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

相关文章

数据结构 第2章:线性表

文章目录 2.1 线性表的定义和操作2.1.1 线性表的基本概念2.1.2 线性表的基本操作 2.2. 顺序表2.2.1. 顺序表的基本概念2.2.2. 顺序表的实现2.2.3. 顺序表的基本操作 2.3 链表2.3.1 单链表的基本概念2.3.2 单链表的实现2.3.3 单链表的插入2.3.4. 单链表的删除2.3.5. 单链表的查找…

mybatis-plus-generator 使用 velocity 生成前后台代码

操作步骤 1)准备mybatis-plus 生成代码的 vm文件 2)添加依赖 mybatis-plus-generator 代码生成器的依赖 3)执行工具方法生成代码 1、准备 mybatis-plus 生成代码的 vm文件 1)找vm模板 去工程的 external Libraries 找到 mybati…

Java SE入门及基础(38)

异常(Exception) 1. 概念 异常 来自官方的说明 An exception is an event, which occurs during the execution of a program, that disrupts the normal flow of the programs instructions. 异常是在程序执行期间发生的事件,该事件中断了程序指令的正常流程…

anaconda, conda, conda-forge

anaconda是python包管理器 conda-forge是conda源中的一个分支,是一个库,包含许多软件包(package)。当使用命令“conda install -c conda-forge some-package”时,“-c conda-forge”表示从conda-forge库中下载并安装名为“some-package”软件…

hasattr()函数的使用

在标准的Python中,hasattr() 函数用于检查对象是否具有指定的属性或方法。它接受两个参数:要检查的对象和要检查的属性或方法名称(以字符串形式)。该函数返回一个布尔值,指示对象是否具有指定的属性或方法。 下面是 h…

有趣的数学 毕达哥拉斯定理

随便找个学生,让他举出一位著名的数学家——如果他能想到的话,他往往会选择毕达哥拉斯。如果不是,也许他想到的是阿基米德。哪怕是杰出的艾萨克牛顿,在两位古代世界的巨星面前也只能叨陪末座了。阿基米德是一位思想巨人&#xff0…

Day18: 发送邮件、开发注册功能

在这里记一下。原来的html中的css和js路径下载不下来&#xff0c;需要换成&#xff1a; <link href"https://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/css/bootstrap.min.css" rel"stylesheet" integrity"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6Y…

Python 一步一步教你用pyglet制作汉诺塔游戏(终篇)

目录 汉诺塔游戏 完整游戏 后期展望 汉诺塔游戏 汉诺塔&#xff08;Tower of Hanoi&#xff09;&#xff0c;是一个源于印度古老传说的益智玩具。这个传说讲述了大梵天创造世界的时候&#xff0c;他做了三根金刚石柱子&#xff0c;并在其中一根柱子上从下往上按照大小顺序摞…

Unsupervised RL:METRA: Scalable Unsupervised RL with Metric-Aware Abstraction

ICLR 2024 Oral paper Intro 无监督RL旨在发现潜在的行为帮助提高下游任务效率以往方法集中于探索以及基于互信息的技能发现(skill)。然而去前者在高危复杂空间实现困难&#xff0c;后者也容易因为缺乏激励导致探索能力不足。本文提出METRA核心观点认为与其在复杂状态空间处理…

[leetcode~dfs]1261. 在受污染的二叉树中查找元素

给出一个满足下述规则的二叉树&#xff1a; root.val 0 如果 treeNode.val x 且 treeNode.left ! null&#xff0c;那么 treeNode.left.val 2 * x 1 如果 treeNode.val x 且 treeNode.right ! null&#xff0c;那么 treeNode.right.val 2 * x 2 现在这个二叉树受到「污…

python apscheduler添加监听器listener,用于自动化任务的反馈

apscheduler可以通过添加监听器&#xff0c;得到定时任务的反馈。监听会监听到的是apscheduler.events&#xff0c;进入apscheduler/events.py文件中可以看到&#xff0c;使用常量对事件的定义&#xff1a; EVENT_SCHEDULER_STARTED EVENT_SCHEDULER_START 2 ** 0 EVENT_SCH…

Games101笔记-计算机图形学概述

光栅化&#xff1a;把三维空间的几何形体显示在屏幕上 实时&#xff1a;每秒30帧的画面 曲线和曲面&#xff1a; 如何表示一条光滑曲线&#xff0c;如何表示曲面如何用简单的曲面通过细分的方法得到更复杂的曲面在形状发生变化时&#xff0c;面要如何变化&#xff0c;如何保…

深入学习默认成员函数——c++指南

前言&#xff1a;类和对象是面向对象语言的重要概念。 c身为一门既面向过程&#xff0c;又面向对象的语言。 想要学习c&#xff0c; 首先同样要先了解类和对象。 本节就类和对象的几种构造函数相关内容进行深入的解析。 目录 类和对象的基本概念 封装 类域和类体 访问限定符…

力扣235. 二叉搜索树的最近公共祖先

思路&#xff1a;要利用好二叉搜索树的特性&#xff0c;中序遍历是有序的&#xff0c;也就是说最近的公共祖先 大小一定落在区间 [p,q] 或[q,p]。 1、当p和q都大于当前root值时&#xff0c;说明当前root值太小&#xff0c;需要更大才能让它落入区间范围&#xff0c;所以要往右子…

@Insert注解是怎么用的?

苍穹外卖第二天有这段注解&#xff1a; Insert("insert into employee(name, username, password, phone, sex, id_number, create_time, update_time, create_user, update_user,status) " "values ""(#{name},#{username},#{password},#{phone},#{…

排列数字(DFS)

[Acwing 842.排列数字] 给定一个整数 n n n&#xff0c;将数字 1 ∼ n 1∼n 1∼n 排成一排&#xff0c;将会有很多种排列方法。 现在&#xff0c;请你按照字典序将所有的排列方法输出。 输入格式 共一行&#xff0c;包含一个整数 n n n 。 输出格式 按字典序输出所有排…

单词拆分-动态规划

// 单词拆分-动态规划// 输入: s "leetcode", wordDict ["leet", "code"]// 输出: true// 解释: 返回 true 因为 "leetcode" 可以由 "leet" 和 "code" 拼接成。public static boolean wordBreak(St…

如何下载安装chromium浏览器

下载安装chromium浏览器去这个网站下载&#xff1a; CNPM Binaries Mirror 参考链接&#xff1a;手写 Puppeteer&#xff1a;自动下载 Chromium - 知乎

手撸nano-gpt

nano GPT 跟着youtube上AndrejKarpathy大佬复现一个简单GPT 1.数据集准备 很小的莎士比亚数据集 wget https://raw.githubusercontent.com/karpathy/char-rnn/master/data/tinyshakespeare/input.txt 1.1简单的tokenize 数据和等下的模型较简单&#xff0c;所以这里用了个…

解决mybatis-plus新增数据自增ID与之前数据不匹配问题

实体类的例子 Data public class User {TableId(value "id", type IdType.AUTO)private Integer id;private String username;// 忽略,不传到前端JsonIgnoreprivate String password;private String nickname;private String email;private String phone;private …