【面试那些事儿】浏览器键入网址到网页显示,期间发生了什么

当用户在浏览器中键入网址并按下回车键后,直到最终显示出完整的网页内容,这一过程中经历了哪些步骤呢?

这是一道经典的面试题,我们来看看具体有哪些阶段。

1. 解析URL

  • 浏览器首先解析用户输入的URL,判断它的语法和协议类型(通常是HTTP或HTTPS)。
  • 如果URL无效或不符合规范,浏览器可能尝试将其作为搜索查询提交给默认的搜索引擎。

标准的URL组成: 

image.png

[图片来源网络]

2. DNS域名解析

  • 浏览器需要将URL中的域名(如www.server.com)转化为IP地址。
  • 首先检查本地DNS缓存,如果有缓存记录,则直接使用IP地址。
  • 若缓存中没有记录,则浏览器发起DNS查询,依次通过本地DNS服务器、根域名服务器、顶级域名服务器和权威域名服务器来解析域名,最终获取到目标服务器的IP地址
2.1 什么是DNS

比如我们打电话的时候,必须要知道对方的电话号码,但由于电话号码难以记忆,所以通常我们会将对方电话号 + 姓名保存在通讯录里。

所以,有一种服务器就专门保存了 Web 服务器域名与 IP 的对应关系,它就是 DNS 服务器。

DNS中的域名是有层级关系的,如wwww.server.com, 实际上域名后面还有一个点,如www.server.com., 最后一个点代表根域名,域名的层级关系类似一个树状结构:

  • 根DNS服务器(.)
  • 定级域DNS服务器(.com)
  • 权威DNS服务器(server.com)

image.png

[图片来源网络]

2.2 DNS解析域名过程示例

image.png

[图片来源网络]

3. 建立TCP连接

  • 在获取到IP地址后,浏览器利用TCP协议与服务器建立连接,通常涉及到TCP的“三次握手”过程,以确保连接的可靠性。
  • 对于HTTPS(安全超文本传输协议),此阶段还包括TLS/SSL握手过程以加密通信通道。

4. 发送HTTP请求

  • 成功建立连接后,浏览器构造一个HTTP请求报文(如GET或POST请求),包含请求方法、URL、协议版本、头部字段(如User-Agent、Accept-Language等)以及可能有的请求体数据。
  • 浏览器将构建好的HTTP请求发送给服务器指定的端口(通常是80端口对于HTTP,或者443端口对于HTTPS)。

5. 服务器处理请求

  • 服务器接收到请求后,由Web服务器软件(如Apache、Nginx等)解析请求并交由后台的应用程序(如PHP、Java、Node.js等)处理。
  • 应用程序根据请求内容从数据库或文件系统中检索所需资源,并生成响应内容。

6. 服务器返回HTTP响应

  • Web服务器将生成的HTML文档、CSS样式表、JavaScript脚本、图片和其他资源封装成HTTP响应报文,其中包括状态码(如200 OK)、响应头部和响应正文。

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

  • 浏览器接收HTTP响应,并开始解析响应正文(即HTML文档)。
  • 根据HTML文档结构创建DOM树,同时解析CSS样式信息生成CSSOM树,随后将两者合并形成渲染树(Render Tree)。
  • 渲染树构建完成后,浏览器进行布局(Layout)计算各个元素的位置,并绘制(Painting)页面内容。
  • 同时,浏览器还会执行JavaScript脚本,脚本可能会影响DOM结构、CSSOM树及页面渲染。

8. 异步资源加载

  • 页面渲染的同时,浏览器继续加载页面中引用的其他资源,如图片、字体、外部脚本和样式表等。
  • 当这些资源加载完毕后,浏览器更新页面以反映新资源的影响。

9. 交互与时间处理

  • 用户可以与页面进行交互,浏览器监听并处理用户的点击、滚动等事件,触发相应的JavaScript代码执行。

完成以上所有步骤后,网页内容才会完整地呈现在用户面前。这个过程涉及到了网络通信、操作系统、浏览器引擎等多个层面的技术协同工作。

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

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

相关文章

FastText 增量训练

1.安装正确版本 (1)下载IncrementalTraining分支代码GitHub - SergeiAlonichau/fastText at IncrementalTraining,或者下载资源; (2)将上一步下载的zip进行解压,然后进入文件夹执行make操作即…

Linux 动静态库的制作,使用和加载

Linux 动静态库的制作,使用和加载 一.前置说明1.mylib.h2.mylib.c3.mymath.h mymath.c4.如何制作库 二.动静态库的制作1.静态库的制作1.制作2.使用一下静态库,验证是否成功打包 2.动态库的制作1.编译.c源文件文件生成.o目标文件2.打包生成动态库3.编写makefile文件,自动化制作动…

【问题分析】InputDispatcher无焦点窗口ANR问题【Android 14】

1 问题描述 Monkey跑出的无焦点窗口的ANR问题。 特点: 1)、上层WMS有焦点窗口,为Launcher。 2)、native层InputDispacher无焦点窗口,上层为”recents_animation_input_consumer“请求了焦点,但是”rece…

Abaqus2024混凝土随机多边形及界面层插件AbyssFish_RandomPolygon2D V2版本更新

很高兴地向大家宣布, AbyssFish_RandomPolygon2D插件已经迎来了重要更新!本次更新旨在适配Python3版本的Abaqus2024,并优化插件界面,提升用户体验。同时我们为所有已购买旧版本插件的用户提供免费升级服务! 插件介绍…

ESP32

MicroPython 是运行在微控制器硬件之上的完全的Python编译器和运行时系统。提供给用户一个交互式提示符(REPL)来立即执行所支持的命令。 你们那么 。 交互式提示符(REPL)是MicroPython提供给用户的一种界面,它允许用户在…

【QT入门】 QListWidget各种常见用法详解之图标模式

往期回顾 【QT入门】 Qt代码创建布局之多重布局变换与布局删除技巧-CSDN博客 【QT入门】 QTabWidget各种常见用法详解-CSDN博客 【QT入门】 QListWidget各种常见用法详解之列表模式-CSDN博客 【QT入门】 QListWidget各种常见用法详解之图标模式 QListWidget有列表和图标两种显…

《C++ Primer 第五版 中文版》第12章 动态内存【阅读笔记 + 个人思考】

《C Primer 第五版 中文版》第12章 动态内存【阅读笔记 个人思考】 12.1 动态内存与智能指针12.1.1 shared_ptr类 静态内存包括:初始化只读数据段,初始化读写数据段,未初始化数据和常量数据段。 详细在下面博客总结: Linux系统下…

矩阵的归一化技术

矩阵的归一化(Normalization)是将矩阵中的元素缩放到一个特定的范围或者标准,使得在进行比较、评估或计算时能够保持数值稳定性和可比性。这个过程在数据预处理、机器学习、图像处理等领域中非常重要。归一化有助于改善算法的收敛速度和精度&…

Lumos学习python第七课:字符串

一、老规矩,题目呢? 1、题目-----来源力扣 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C …

LeetCode_1.两数之和

一、题目描述 二、方法 1.方法1&#xff08;暴力枚举法&#xff09; 利用两个for循环&#xff0c;对数组进行逐一的遍历&#xff0c;直到找到两个数的和为目标值时返回这两个数的下标。以下为c实现的完整代码。 # include<iostream> using namespace std; #include<…

消息队列经典应用场景

笔者心中,消息队列,缓存,分库分表是高并发解决方案三剑客。 在职业生涯中,笔者曾经使用过 ActiveMQ 、RabbitMQ 、Kafka 、RocketMQ 这些知名的消息队列 。 这篇文章,笔者结合自己的真实经历,和大家分享消息队列的七种经典应用场景。 1 异步&解耦 笔者曾经负责某电…

戴尔灵越3000来说2.5G的双核显存能干啥?

吃鸡已经成为大家耳熟能详的网络游戏。 很多人认为&#xff0c;想要享受吃鸡的乐趣&#xff0c;就必须组装一台高端电脑。 虽然配置越高越好&#xff0c;但现实是很多配置都是以性能为标准的。 有余了&#xff0c;没必要刻意追求高配置、高特效。 说实话&#xff0c;吃鸡不一定…