[每周一更]-(第107期):经典面试题-从输入URL到页面加载发生了什么

news2025/2/23 14:17:31

在这里插入图片描述

文章目录

      • 过程概述
      • 简化版:
      • 详细版:
      • 1. 用户输入URL
      • 2. 浏览器解析URL
      • 3. DNS解析
      • 4. TCP连接
      • 5. SSL/TLS握手(如果使用HTTPS)
      • 6. HTTP请求和响应
      • 7. 浏览器渲染页面
      • 8. 处理后续请求

一般前后端都可以考察问题,让参与者了解网页的内部交互,更多是细节的解释。

从输入URL到页面加载完成,涉及多个步骤和底层机制。这些步骤可以分为以下几个主要阶段:DNS解析、TCP连接、SSL握手、HTTP请求和响应、页面渲染。以下是详细的过程:

过程概述

1、浏览器查找域名对应的IP地址

2、浏览器根据IP地址与服务器建立socket连接

3、浏览器与服务器通信:浏览器请求,服务器处理请求和响应

4、浏览器与服务器断开连接

5、浏览器获得域名对应的IP地址之后,就会向服务器发起TCP请求,请求建立TCP连接,就是"三次握手"。

6、TCP/IP连接建立起来之后,浏览器就可以向服务器发起HTTP请求了,使用了比如说,HTTP的GET方式。

7、服务端接收到这个请求之后,根据参数,将经过处理的数据返回给客户端。

8、浏览器拿到了服务端返回的HTML页面代码,在解析和渲染这个页面的时候,里面的JS、CSS、图片等静态资源,也是一个个HTTP请求,都需要经过上面的主要七个步骤。

9、浏览器根据拿到的资源对页面进行渲染,最终把一个完整的页面呈现给用户。

简化版:

一个完整的HTTP请求过程:

  • 浏览器请求URL
  • 域名解析(此处涉及DNS的寻址过程)
  • 发起TCP的3次握手
  • 建立TCP连接后发起http请求
  • 服务器响应http请求,浏览器得到html代码
  • 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等,此处可能涉及HTTP缓存)
  • 浏览器对页面进行渲染呈现给用户(此处涉及浏览器的渲染原理)

详细版:

1. 用户输入URL

用户在浏览器地址栏中输入一个URL并按下回车键。

2. 浏览器解析URL

浏览器解析输入的URL,提取出协议(如http或https)、域名(如www.example.com)、端口号(如果有指定,默认http为80,https为443)和路径(如/index.html)。

3. DNS解析

1、搜索自身的DNS缓存

2、搜索操作系统自身的DNS缓冲

3、读取本地的HOST文件

4、浏览器发起一个DNS的系统调用

浏览器需要将域名转换为IP地址,通过DNS解析过程:

  1. 检查缓存
    • 浏览器缓存:浏览器首先检查其DNS缓存。
    • 操作系统缓存:如果浏览器缓存没有命中,会查询操作系统的DNS缓存。
    • 主机文件:操作系统检查主机文件(如/etc/hosts)是否有对应的记录。
  2. 查询递归DNS服务器:如果本地缓存没有结果,操作系统向配置的递归DNS服务器发起查询。
  3. 递归查询
    • 根DNS服务器:递归DNS服务器查询根DNS服务器,获取顶级域(如.com)的DNS服务器地址。
    • 顶级域DNS服务器:递归DNS服务器查询顶级域DNS服务器,获取权威DNS服务器地址。
    • 权威DNS服务器:递归DNS服务器查询权威DNS服务器,获取域名的最终IP地址。
  4. 返回结果:递归DNS服务器将IP地址返回给操作系统,操作系统再返回给浏览器。

输入网址,进行DNS域名解析

DNS 解析首先会从你的浏览器的缓存中去寻找是否有这个网址对应的 IP 地址,如果没有就向OS系统的 DNS 缓存中寻找,如果没有就是路由器的 DNS 缓存, 如果没有就是 ISP 的DNS 缓存中寻找。

所以,缓存的寻找过程就是: 浏览器缓存→系统缓存→路由器缓存→ISP DNS缓存→从根域名服务器递归搜索

  • 浏览器缓存 – 浏览器会缓存DNS记录一段时间。 有趣的是,操作系统没有告诉浏览器储存DNS记录的时间,这样不同浏览器会储存个自固定的一个时间(2分钟到30分钟不等)。
  • 系统缓存 – 如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用(windows里是gethostbyname)。这样便可获得系统缓存中的记录。
  • 路由器缓存 – 接着,前面的查询请求发向路由器,它一般会有自己的DNS缓存。
  • ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
  • 递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索,从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。

4. TCP连接

浏览器使用获取的IP地址与目标服务器建立TCP连接:

  1. 三次握手:
    • SYN:浏览器向服务器发送一个SYN包,请求建立连接。
    • SYN-ACK:服务器响应一个SYN-ACK包,确认收到请求并同意建立连接。
    • ACK:浏览器发送一个ACK包,确认连接建立。

5. SSL/TLS握手(如果使用HTTPS)

如果URL使用的是HTTPS,浏览器与服务器进行SSL/TLS握手,建立加密连接:

  1. 客户端问候(Client Hello):浏览器发送支持的SSL/TLS版本、加密套件、随机数等信息。
  2. 服务器问候(Server Hello):服务器选择SSL/TLS版本、加密套件,并发送服务器证书和随机数。
  3. 证书验证:浏览器验证服务器证书的有效性和真实性。
  4. 密钥交换:浏览器生成会话密钥,并使用服务器公钥加密后发送给服务器。
  5. 握手完成:服务器使用私钥解密会话密钥,双方使用会话密钥加密后续通信。

6. HTTP请求和响应

  1. 发送HTTP请求:浏览器向服务器发送HTTP请求,包括请求方法(如GET、POST)、请求头、URL路径等。
  2. 服务器处理请求:服务器接收请求,处理后生成响应数据。
  3. 发送HTTP响应:服务器返回HTTP响应,包括状态码(如200、404)、响应头和响应体(HTML、CSS、JavaScript、图片等)。

7. 浏览器渲染页面

  1. 解析HTML:浏览器解析HTML文档,构建DOM树。
  2. 解析CSS:浏览器解析CSS文件和样式,构建CSSOM树。
  3. 解析JavaScript:浏览器解析和执行JavaScript代码,可能会修改DOM和CSSOM树。
  4. 构建渲染树:浏览器将DOM和CSSOM树合并,生成渲染树。
  5. 布局:计算每个节点的布局信息(位置和大小)。
  6. 绘制:将各节点绘制到屏幕上,形成最终的页面。

8. 处理后续请求

浏览器继续处理页面中的其他资源请求(如图片、视频、字体等),重复上述HTTP请求和响应过程,直到所有资源加载完成。

HTTPS和HTTP的区别主要如下:

  1. https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
  2. http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
  3. http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
  4. http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

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

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

相关文章

WordPress设置固定连接后提示404

WordPress设置固定链接后出现404错误通常是因为服务器的伪静态规则没有正确设置。以下是几种常见的服务器环境下的解决方案: 宝塔面板:如果服务器安装了宝塔面板,可以在宝塔面板中选择对应的WordPress伪静态规则并保存设置 。 Apache服务器&a…

星间链路的卫星节点网络接口IP地址规划问题 based on 卫星互联网Walker星座

★★★第p个轨道面上的第n个卫星节点[ XL_p_n ]的IPv4子网和网络接口地址规划★★★ IPv4子网问题:中间2个点分十进制分别表示[P:轨道面索引]和[N:当前轨道面上的卫星索引]。考虑Exata设置IPv4子网默认为 190.0.0.0 ,不妨: 将某个轨道高度的W…

【通信模块】简单玩转WiFi模块(ESP32、ESP8266)

笔者学习太极创客的学习笔记,链接如下:www.taichimaker.com 前期准备 电脑端口 固件烧录 WIFI到网页 对应七层网络协议 WIFI工作模式(链路层) 接入点模式、无线中断模式、混合模式 IP协议(网络层) 子网…

【python】Python考研分数 线性回归模型预测(源码+论文)【独一无二】

👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…

前端缓存问题(浏览器缓存和http缓存)- 解决办法

问题描述:前端代码更新,但因浏览器缓存问题,导致页面源代码并未更新 查看页面源代码的方法:鼠标右键,点击查看页面源代码 如图: 解决方法: 注:每执行一步,就检查一下浏览…

c生万物系列(加减乘除模篇)

为了提高c语言的运行效率,我们需要采用更高效的运算,那么切入点就是随处可见的基本运算符合,从底层架构考虑,加减乘除的效率比位运算低很多,为了能够更好迎合CPU的二进制,有必要取代基本的加减乘除以及求余…

Java----队列(Queue)

目录 1.队列(Queue) 1.1概念 1.2队列的使用 1.3队列的模拟实现 1.4循环队列 1.4.1循环队列下标偏移 1.4.2如何区分队列是空还是满 1.5双端队列 (Deque) 1.队列(Queue) 1.1概念 队列:只允许在一端进行插入数据…

GraphRAG:全局搜索方法在RAG系统中的应用

GraphRAG:全局搜索方法在RAG系统中的应用 传统RAG系统的局限性全局搜索方法的优势全局搜索的工作流程关键配置参数实现考虑结论 在检索增强生成(Retrieval-Augmented Generation,RAG)系统中,传统的基线方法在处理需要跨…

怀旧必玩!重返童年,扫雷游戏再度登场!

Python提供了一个标准的GUI(图形用户界面)工具包:Tkinter。它可以用来创建各种窗口、按钮、标签、文本框等图形界面组件。 而且Tkinter 是 Python 自带的库,无需额外安装。 Now,让我们一起来回味一下扫雷小游戏吧 扫…

数据结构与算法-13高级数据结构_树论(BtreeB+Tree)

Btree&BTree 1 btree-定义 B-树是一种自平衡的树形数据结构,它能够保持数据的有序性,并允许搜索、顺序访问、插入和删除操作都在对数时间内完成。与二叉树不同,B-树的每个节点可以拥有多于两个的子节点,这取决于树的阶&#…

* 快速排序的深入优化探讨

在算法设计领域,快速排序因其卓越的平均性能与广泛的应用场景而备受推崇。自1960年Tony Hoare提出以来,它已成为许多编程语言标准库中的核心排序方法。然而,随着数据规模的不断扩大和计算需求的日益复杂化,对快速排序进行更深入的…

docker环境下的verdaccio设置权限并配置域名.md

权限配置 一个管理员叫admin,可以读也可以发布一个普通用户叫qiuye,只可以读,不可以发布添加账号就自行创建添加即可,只需要更改config文件的配置项即可 packages:*/*: access: admin qiuyepublish: admin unpublish: admin **:access: admin qiuyepublish: admin unpublish…

数据结构系列-插入排序和希尔排序

🌈个人主页:羽晨同学 💫个人格言:“成为自己未来的主人~” 排序的概念 常见的排序算法: 插入排序 直接插入排序是一种简单的插入排序法,其基本思想是: 把待排序的记录按其关键码值的大小逐个插入到…

如何合规与安全地利用专业爬虫工具,构建企业数据竞争优势

摘要: 本文深入探讨了在当今大数据时代,企业如何通过合规且安全的方式运用专业爬虫工具,有效收集并分析海量信息,进而转化为企业独有的数据优势。我们不仅会介绍最佳实践,还会讨论关键技术和策略,帮助企业…

virtuoso tran仿真中如何画出temperature的瞬态曲线

virtuoso tran仿真中如何画出温度的瞬态曲线? 在tran仿真中如果加入了瞬态热效应,设置Dynamic parameter,即时间随温度变化,如何plot temp vs. time曲线? 1.电路中加一根线和变量名相同 2.ADE L/XL Test Editor->Ou…

如何在安卓设备上运行Linux(使用termux+图形界面)加上换源等优化

我学生嘛,喜欢讲故事,你看看我大部分文章开头,都会有"事情的起因"一类话 当然这次也不例外哦 我最新获得了一个新平板,华为的matepad air,很喜欢。想捣鼓,不太懂,但好像鸿蒙不能直接…

MyBatis中的赋值语句:#{}和${}的区别差异(常见面试题)

我们开始先总结他们的差异,后面再使用代码展示差异 1.0.#{}和${}的差异 (1)${}可能存在sql注入的安全问题 (2)${}是即时sql(参数直接拼接),不能进行缓存;#{}是预编译sq…

基于单文档的MFC图像增强

目录 function.h ColorEnhanceDib.h ColorEnhanceDib.cpp Dib.h Dib.cpp FrequencyFilterDib.h FrequencyFilterDib.cpp GrayTransformDib.h GrayTransformDib.cpp HistogramDib.h HistogramDib.cpp SharpenProcessDib.h SharpenProcessDib.cpp SmoothProcessDib.h Sm…

【Spring Boot】自动配置源码解析

目录 Spring-Boot-Starter一、准备配置类和 Bean 对象二、自动配置条件依赖三、Bean 的参数获取3.1 EnableConfigurationProperties 注解3.2 ConfigurationProperties 注解 四. Bean 的发现4.1 自己项目的 Bean 扫描4.2 jar 包的 Bean 扫描 五. Bean 的加载 自动配置总结 Sprin…

Linux系统编程——生产者消费者模型

目录 一,模型介绍 1.1 预备知识(超市买东西的例子) 1.2 模型介绍 1.3 CP模型特点 二,基于阻塞队列的CP模型 2.1 介绍 2.2 阻塞队列的实现 2.3 主函数实现 2.4 效果展示 三,POSIX信号量 3.1 信号量原理 3…