URL地址解析至页面展示全过程(面试详细解答)

news2024/12/27 13:54:10

目录

1、解析URL

2、缓存判断

​编辑3、DNS解析

​编辑4、获取MAC地址

5、TCP三次握手

6、HTTP请求

7、服务器处理请求,返回HTTP响应

8、页面渲染

9、TCP四次挥手

10、浏览器解析HTML

11、浏览器布局渲染


1、解析URL

首先会对 URL 进行解析,分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法,将会把地址栏中输入的内容传递给搜索引擎。如果没有问题,浏览器会检查 URL 中是否出现了非法字符,如果存在非法字符,则对非法字符进行转义后再进行下一过程。

2、缓存判断

浏览器会判断所请求的资源是否在缓存里,如果请求的资源在缓存里并且没有失效,那么就直接使用,否则向服务器发起新的请求。

3、DNS解析

需要获取的是输入的 URL 中的域名的 IP 地址

  • 浏览器缓存

  • 操作系统缓存,hosts⽂件

  • 路由器缓存

  • ISP DNS缓存

  • DNS递归查询(可能存在负载均衡导致每次IP不⼀样)

4、获取MAC地址

当浏览器得到 IP 地址后,数据传输还需要知道目的主机 MAC 地址

判断目标地址是否与当前地址处于同一网络中,是的话直接根据 Mac 地址发送,否则使用路由表查找下一跳地址,以及使用 ARP 协议查询它的 Mac 地址。

5、TCP三次握手

  • 客户端发送⼀个TCPSYN=1Seq=X的包到服务器端口(客户端进入 SYN-SENT 状态)

  • 服务器发回SYN=1, ACK=X+1, Seq=Y的响应包(服务器进如SYN-RECEIVED 状态)

  • 客户端发送ACK=Y+1, Seq=Z  的包到服务器端口 (客户端进入ESTABLISHED 状态) ,服务器接收到包(服务器进入ESTABLISHED 状态)

6、HTTP请求

        与服务器建立了连接后,就可以向服务器发起请求了

7、服务器处理请求,返回HTTP响应

当页面请求发送到服务器端后,服务器端会返回一个 html 文件作为响应,浏览器接收到响应后,开始对 html 文件进行解析,开始页面的渲染过程。

8、页面渲染

        浏览器首先会根据 html 文件构建 DOM 树,根据解析到的 css 文件构建 CSSOM 树,如果遇到 script 标签,则判端是否含有 defer 或者 async 属性,要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后,根据它们来构建渲染树。渲染树构建好后,会根据渲染树来进行布局。布局完成后,最后使用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示出来了。

9、TCP四次挥手

浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重⽤

  • 客户端打算关闭连接,此时会发送一个 TCP 首部 FIN 标志位被置为 1 的报文,也即 FIN 报文,之后客户端进入 FIN_WAIT_1 状态。
  • 服务端收到该报文后,就向客户端发送 ACK 应答报文,接着服务端进入 CLOSE_WAIT 状态。
  • 客户端收到服务端的 ACK 应答报文后,之后进入 FIN_WAIT_2 状态。
  • 等待服务端处理完数据后,也向客户端发送 FIN 报文,之后服务端进入 LAST_ACK 状态。
  • 客户端收到服务端的 FIN 报文后,回一个 ACK 应答报文,之后进入 TIME_WAIT 状态
  • 服务端收到了 ACK 应答报文后,就进入了 CLOSE 状态,至此服务端已经完成连接的关闭。
  • 客户端在经过 2MSL 一段时间后,自动进入 CLOSE 状态,至此客户端也完成连接的关闭。
10、浏览器解析HTML

浏览器通过解析HTML,生成DOM树,解析CSS,生成CSS规则树,然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同,渲染树中并没有head、display为none等不必显示的节点。

解析执行JS脚本

11、浏览器布局渲染

        完成解析

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

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

相关文章

C++_类型转换

文章目录 学习目标:1.static_cast2. reinterpret_cast3.const_cast4. dynamic_cast 学习过程1.static_cast2. reinterpret_cast3.const_cast在这里插入图片描述4. dynamic_cast 学习目标: 标准C为了加强类型转换的可视性,引入了四种命名的强…

黑马程序员Linux简单入门学习笔记

Linux介绍 内核提供系统最核心的功能,如: 调度CPU、调度内存、调度文件系统、调度网络通讯、调度等系统级应用程序,可以理解为出厂自带程序,可供用户快速上手操作系统,如:文件管理器、任务管理器、图片查看、音乐播放等 目录结构 …

在PostgreSQL中如何实现递归查询,例如使用WITH RECURSIVE构建层次结构数据?

文章目录 解决方案使用WITH RECURSIVE进行递归查询示例代码 总结 在PostgreSQL中,递归查询是一种非常强大的工具,它可以用来查询具有层次结构或树形结构的数据。例如,你可能会在员工-经理关系、目录结构或组织结构图中遇到这样的数据。为了处…

*Linux系统的进程和计划任务管理

目录 一、查看进程 1、程序和进程的关系 *2、ps查看静态进程信息 1)ps aux 2)ps -elf *3、top查看动态进程信息 4、pgrep查看进程信息 5、pstree查看进程树 二、控制进程 1、进程启动方式 2、进程的前后台调度 3、终止进程的运行 三、计划任…

VSCode搭建内核源码阅读开发环境

0. 参考链接 使用VSCode进行linux内核代码阅读和开发_vscode阅读linux内核-CSDN博客 1. 搭建Linux内核源码阅读环境 现状,Linux内核源码比较庞大文件非常多,其中又包含的众多的宏定义开关配置选项,这使得阅读内核源代码称为一件头疼的事。 …

Android AIDL接口

一.AlDI接口简介 AIDL(Android Interface Definition Language)是一种 IDL 语言,用于生成可以在 Android 设备上两个进程之间进行进程间通信(IPC)的代码。 通过 AIDL,可以在一个进程中获取另一个进程的数据…

Go源码--Strings库

1. 简介 strings库 存储了 一些针对 字符串的具体操作 其 代码短小精悍 可以学习到很多编程的思路 尤其是 涉及到字符串使用性能的方面,其源码库有好多的优秀案例可以学习。向强者对齐不一定成为强者,但向弱者对齐一定变为弱者。 介绍思路是先介绍 stri…

.net6项目模板

1.集成log4net 安装依赖包: 安装扩展依赖即可,已经包含了log4net依赖: Microsoft.Extensions.Logging.Log4Net.AspNetCore 添加日志配置文件: 日志配置文件属性设置为始终复制: 注入服务: #region 注入…

React【Day4】

路由快速上手 1. 什么是前端路由 一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候,path 对应的组件会在页面中进行渲染 2. 创建路由开发环境 # 使用CRA创建项目 npm create-react-app react-router-pro# 安装最新的ReactRouter包 …

软件设计师软考中项学习(二)之计算机系统基础知识

读者大大们好呀!!!☀️☀️☀️ 🔥 欢迎来到我的博客 👀期待大大的关注哦❗️❗️❗️ 🚀欢迎收看我的主页文章➡️寻至善的主页 文章目录 学习目标学习内容学习笔记学习总结 学习目标 计算机系统硬件基本组成 中央处理…

「51媒体」新闻媒体邀约如何进行媒体宣传(方法)

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 新闻媒体邀约进行媒体宣传是一个策略性的过程,旨在吸引媒体的注意力并促使其对特定事件、产品发布或企业活动进行报道。以下是一些关键步骤和策略: 制定媒体传播方…

Advanced RAG 04:重排序(Re-ranking)技术探讨

编者按:重排序(Re-ranking)技术在检索增强生成(Retrieval Augmented Generation,RAG)系统中扮演着关键角色。通过对检索到的上下文进行筛选和排序,可以提高 RAG 系统的有效性和准确性&#xff0…

苍穹外卖学习笔记(4.套餐管理,店铺营业状态设置)

目录 一、Redis1、redis在java中的运用 二、店铺营业状态设置1、需求分析设计2、代码设计3、测试 三、套餐管理1、需求设计分析2、代码设计3、测试 一、Redis 具体的redis基本操作就不多再介绍,本节主要学习redis在java中的运用。 1、redis在java中的运用 具体…

Java 多线程加法求和

Java 多线程加法求和 代码 先上代码再上解析: import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util.concurrent.TimeUnit; import java.util.concurrent.atomic.AtomicInteger;public class Sum implements …

基于人工智能的机动车号牌检测与推理系统v1.0

基于人工智能的机动车号牌检测与推理系统v1.0代码重构与实现。 目前整合3中现有算法,并完成阶段性改造,包括【传统方法检测车牌,SVM推理字符】、【YOLO方法检测车牌,SVM推理字符】、【YOLO方法检测车牌,CNN推理字符】&…

ADSP-21479的开发详解十(用CCES做Flash的编程)

硬件准备 ADSP-21479EVB开发板: 产品链接:https://item.taobao.com/item.htm?id555500952801&spma1z10.5-c.w4002-5192690539.11.151441a3Z16RLU AD-HP530ICE仿真器: 产品链接:https://item.taobao.com/item.htm?id38007…

墨子web3实时周报

蚂蚁集团Web3研发进展与布局 国内Web3赛道的领军企业——蚂蚁集团,凭借其在前沿科技领域的深耕不辍,已在Web3技术研发疆域缔造了卓越战绩。特别是在引领行业革新的关键时刻,集团于今年四月末震撼推出了颠覆性的Web3全套解决方案,…

Hive基础3

一、表的分区 大数据开发数据量较大,在进行数据查询计算时,需要对数据进行拆分,提升的查询速度 1-1 单个分区 单个分区是创建单个目录 -- 创建表指定分区,对原始数据进行分区保存 create table new_tb_user(id int,name string,ag…

通过实例学C#之序列化与反序列化XmlSerializer类

简介 可以将类序列化成xml文件,或者将xml文件反序列化成类对象,一般用于保存或加载项目参数。 构造函数 XmlSerializer() 不使用函数创建一个xmlSerializer对象。 XmlSerializer(Type type) 使用type对象创建一个xmlSerializer对象,注意&…

[阅读笔记23][JAM]JOINTLY TRAINING LARGE AUTOREGRESSIVE MULTIMODAL MODELS

这篇论文是24年1月发表的,然后是基于的RA-CM3和CM3Leon这两篇论文。它所提出的JAM结构系统地融合了现有的文本模型和图像生成模型。 主要有两点贡献,第一点是提出了融合两个模型的方法,第二点是为混合模型精心设计的指令微调策略。 下图是一个…