【前端】面试八股文——输入URL到页面展示的过程

news2024/7/4 5:12:57

【前端】面试八股文——输入URL到页面展示的过程

1. DNS解析

当用户在浏览器中输入URL并按下回车时,首先需要将域名转换为IP地址,这个过程称为DNS(域名系统)解析。具体步骤如下:

  • 浏览器缓存:浏览器首先检查自身缓存中是否有该域名的IP地址。
  • 操作系统缓存:如果浏览器缓存中没有找到,浏览器会向操作系统请求DNS信息。
  • 路由器缓存:如果操作系统缓存也没有找到,操作系统会向本地网络中的路由器请求DNS信息。
  • ISP DNS服务器:如果路由器缓存没有命中,路由器会向ISP提供的DNS服务器请求域名解析。
  • 递归查询:如果ISP的DNS服务器也没有找到,它会进行递归查询,从根DNS服务器开始,逐级查询顶级域(如.com)、二级域等,直到找到对应的IP地址。

2. TCP连接

获得IP地址后,浏览器需要与服务器建立连接,这通常通过三次握手完成:

  • 第一次握手:浏览器(客户端)发送一个带有SYN标志的数据包到服务器,表示请求建立连接。
  • 第二次握手:服务器收到SYN数据包后,回复一个带有SYN/ACK标志的数据包,表示同意建立连接。
  • 第三次握手:客户端收到SYN/ACK数据包后,再回复一个带有ACK标志的数据包,连接建立完成。

3. 发送HTTP请求

TCP连接建立后,浏览器会构建一个HTTP请求报文并发送到服务器:

  • 请求行:包含请求方法(如GET、POST)、URL和HTTP版本。
  • 请求头:包含主机、用户代理、接受的文件类型等信息。
  • 请求体:对于GET请求通常为空,对于POST请求包含提交的数据。

4. 服务器处理请求

服务器接收到HTTP请求后,会进行以下操作:

  • 请求解析:解析请求报文,提取请求的资源路径和其他信息。
  • 资源查找:根据请求路径查找对应的资源(如HTML文件、图像等)。
  • 生成响应:将查找到的资源封装到HTTP响应报文中,准备返回给客户端。

5. 浏览器接收响应

浏览器接收服务器的响应报文,并进行解析:

  • 状态行:包含HTTP版本、状态码(如200、404)和状态描述。
  • 响应头:包含内容类型、内容长度、服务器信息等。
  • 响应体:包含实际的资源内容(如HTML、CSS、JavaScript等)。

6. 渲染页面

浏览器根据响应内容开始渲染页面,步骤如下:

  • 解析HTML:浏览器解析HTML文件,构建DOM树。
  • 解析CSS:解析CSS文件,构建CSSOM树。
  • 构建渲染树:将DOM树和CSSOM树合并,生成渲染树。
  • 布局(layout):计算每个元素的大小和位置。
  • 绘制(painting):将渲染树中的元素绘制到屏幕上。

7. 执行JavaScript

浏览器解析并执行HTML中的JavaScript:

  • 解析脚本:浏览器解析并执行内嵌的或外部引用的JavaScript。
  • 操作DOM:JavaScript可能会操作DOM,改变页面内容。
  • 重新渲染:如果JavaScript修改了DOM,浏览器可能会重新计算布局和绘制页面。

8. 加载其他资源

HTML文件中可能引用了其他资源(如图片、视频、字体等),浏览器会根据需要加载这些资源:

  • 并行加载:浏览器可以并行发送多个HTTP请求以加快资源加载速度。
  • 处理响应:每个资源的加载过程与主HTML文件类似,会经过DNS解析、TCP连接、HTTP请求和响应处理等步骤。

9. 建立安全连接(HTTPS)

如果使用HTTPS,浏览器在建立TCP连接后会进行SSL/TLS握手,以建立加密通道:

  • 协商加密算法:客户端和服务器协商使用的加密算法。
  • 交换密钥:客户端和服务器交换密钥,建立加密通信通道。
  • 验证证书:客户端验证服务器的SSL证书是否有效。

10. 优化性能

浏览器会进行一些性能优化,以提高页面加载速度和用户体验:

  • 缓存:缓存常用资源以减少重复加载。
  • 预加载:提前加载可能用到的资源。
  • 压缩:对资源进行压缩以减少传输的数据量。
  • 使用HTTP/2:HTTP/2支持多路复用、头部压缩等特性,提高传输效率。

通过这些详细的步骤,输入URL到页面完全展示的整个过程得以实现。理解这个过程不仅有助于提升前端开发的技术水平,也有助于优化页面加载速度,提高用户体验。

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

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

相关文章

Jenkins教程-12-发送html邮件测试报告

上一小节我们学习了发送钉钉测试报告通知的方法,本小节我们讲解一下发送html邮件测试报告的方法。 1、自动化用例执行完后,使用pytest_terminal_summary钩子函数收集测试结果,存入本地status.txt文件中,供Jenkins调用 #conftest…

Optional类方法

Optional类 方法empty()方法of(T value)ofNullable(T value)filter(Predicate<? super T> predicate)get()ifPresent(Consumer<? super T> consumer)isPresent()map(Function<? super T,? extends U> mapper)orElse(T other)orElseGet(Supplier<? ex…

如何实现Action菜单

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"自定义标题栏"相关的内容&#xff0c;本章回中将介绍自定义Action菜单.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在这里提到的…

Swift 中的 StoreKit 测试

文章目录 前言创建一个 StoreKit Demo使用 SKTestSessionaskToBuyEnabled 属性总结前言 StoreKit 框架的第二次迭代是我在过去几年中应用程序中最重大的变化。最近版本的 StoreKit 框架已完全采用了 Swift 语言特性,如 async 和 await。本篇内容我们将讨论 StoreKitTest 框架…

AutoGen 两个agent讲相声

Lesson 1: Multi-Agent Conversation and Stand-up Comedy 第 1 课&#xff1a;多人对话和单口相声 Setup from utils import get_openai_api_key OPENAI_API_KEY get_openai_api_key() llm_config {"model": "gpt-3.5-turbo"}Define an AutoGen agent…

教育心理学期末考试重点

人本主义学习理论 人本主义主张&#xff0c;心理学应当把人作为一个整体来研究&#xff0c;而不是将人的心理肢解为不完整的几个部分&#xff0c;应该研究正常的人&#xff0c;而且更应该关注人的高级心理活动&#xff0c;如热情、信念、生命、尊严等内容。人本主义的学习理论…

线性代数|机器学习-P20鞍点和极值

文章目录 1 . 瑞利商的思考1.1 瑞利商的定义1.2 投影向量 2. 拉格朗日乘子法3. 鞍点4. 线性拟合4.1 范德蒙矩阵线性拟合4.2 python 代码4.3 范德蒙矩阵缺点 5. 均值和方差5.1 样本均值和方差5.2 总体期望 μ \mu μ,总体方差 σ 2 \sigma^2 σ2 1 . 瑞利商的思考 1.1 瑞利商…

算法金 | Transformer,一个神奇的算法模型!!

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 抱个拳&#xff0c;送个礼 在现代自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;Transformer 模型的出现带来了革命性的变…

算法 —— 滑动窗口

目录 长度最小的子数组 无重复字符的最长子串 最大连续1的个数 将x减到0的最小操作数 找到字符串中所有字母异位词 长度最小的子数组 sum比target小就进窗口&#xff0c;sum比target大就出窗口&#xff0c;由于数组是正数&#xff0c;所以相加会使sum变大&#xff0c;相减…

云计算与生成式AI的技术盛宴!亚马逊云科技深圳 Community Day 社区活动流程抢先知道!

小李哥最近要给大家分享7月7日在深圳的即将举办的亚马逊云科技生成式AI社区活动Community Day &#xff0c;干货很多内容非常硬核&#xff0c;不仅有技术分享学习前沿AI技术&#xff0c;大家在现场还可以动手实践沉浸式体验大模型&#xff0c;另外参与现场活动还可以领取诸多精…

高优先线程

你开发的时候有么有遇到过一个问题&#xff1a;服务器的一个服务线程过几个小时断连一次&#xff0c;断连之后会马上重连这种情况。这是由于CPU负载较高,线程调度时将处理数据的线程挂起了一段时间导致的。 因此&#xff0c;我有考虑到把cpu的核心进行分散开来&#xff0c;就类…

关于发那科机器人系统升级方法

首先需要镜像备份和全备份&#xff0c;最好把机器人要到刻度线位置&#xff0c;零点位置 选择控制器启动&#xff0c;也可以按preevnext进入控制器模式

技术革新:如何用数据中台实现数字化转型

作为程序员&#xff0c;我们总是对技术如何改变企业运作充满好奇。今天&#xff0c;我们将深入探讨森马集团如何利用数据中台技术&#xff0c;实现从传统数据分析到数字化转型的华丽转身。 1. 技术背景&#xff1a;森马集团的数字化挑战 森马集团&#xff0c;一个在服饰行业占…

幻兽帕鲁服务器如何安装模组安装

由于模组多数为Window版本的&#xff0c;所以本教程以服务端为Window的作为演示&#xff08;Linux服务端的也是一样的操作&#xff09;百度莱卡云开服 如果你你是Linux版本的&#xff0c;请点击跳转切换服务端教程 接下来是本地安装模组包的方法&#xff08;服务器自带&#xf…

浅谈定时器之同步定时器

浅谈定时器之同步定时器 “同步定时器”&#xff08;Synchronizing Timer&#xff09;是一个特别的定时器&#xff0c;它用于确保在特定时间点上多个线程&#xff08;或虚拟用户&#xff09;同时发起请求&#xff0c;这对于测试系统在高并发情况下的表现尤为重要。本文将深入解…

通义灵码 Visual Studio 小白上手指南

一、下载和安装指南 本安装步骤适用于 Windows 10 及以上操作系统中安装和使用通义灵码。 步骤 1&#xff1a;准备工作 操作系统&#xff1a;Windows 10 及以上&#xff1b;下载并安装 ****Visual Studio 2022 17.3.0 及以上版本。 步骤 2&#xff1a;在 Visual Studio 202…

【Linux】:命令行参数

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux命令行参数的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入…

分享一个超级实用的东西——巴比达远程访问

前言 &#x1f388;家人们&#xff0c;今天我要和你们分享一个超级实用的东西——巴比达远程访问&#xff01;&#x1f389; &#x1f4bb;有了它&#xff0c;无论你身在何处&#xff0c;都能轻松访问家中的电脑&#x1f4bb;&#xff0c;就像在身边一样方便&#xff01;&…

C++类型转换可调用对象

目录 C的四种可视性类型转换 1.static_cast 2.reinterpret_cast 3.const_cast 4.dynamic_cast C中的可调用对象 普通函数 函数指针 仿函数 Lambda表达式 包装器function bind C的四种可视性类型转换 C语言中的类型转换是不安全、不明确的&#xff0c;于是C就出了更…

JavaFX布局-BorderPane

JavaFX布局-BorderPane 实现方式Java实现FXML实现 综合案例 将容器空间分成五个区域&#xff1a;顶部&#xff08;Top&#xff09;、底部&#xff08;Bottom&#xff09;、左侧&#xff08;Left&#xff09;、右侧&#xff08;Right&#xff09;和中心&#xff08;Center&#…