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

目录

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.hqwc.cn/news/635728.html

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

相关文章

基于SpringBoot+Vue的民俗网系统 免费获取源码

项目源码获取方式放在文章末尾处 项目技术 数据库:Mysql5.7/8.0 数据表:13张 开发语言:Java(jdk1.8) 开发工具:idea 前端技术:vue 后端技术:SpringBoot 功能简介 (有文档) 项目获取关键字&#…

shell脚本编程的例子(55例子)-3

第三部分:eg32-eg50shell例子。开放一周后启用vip阅读了。…… ^v^ Eg32、while/until/for经典例子 #!/bin/bash ## filename: while-infinite_loops.sh while true; do sleep 5 echo "infinite loops [ hit CTRLC to stop]" done Eg33、while/…

Matlab之空间坐标系绘制平面图形

在空间直角坐标系中,绘制指定平面方程的图形 版本说明: 20240413_V1.01:更正代码错误,并修改输入参数类型(测试用例得修改) 20240413_V1.00:初始版本 一、平面方程 基本形式为:A…

设计模式之创建型模式详解

设计模式 创建型模式 创建型模式(Creational Pattern)对类的实例化过程进行了抽象,能够将软件模块中对象的创建和对象的使用分离。为了使软件的结构更加清晰,外界对于这些对象只需要知道它们共同的接口,而不清楚其具体的实现细节&#xff0…

C++ 内存分区管理

一、栈区(Stack) 栈区用来存储函数的参数值、局部变量的值等数据。栈区是自动分配和释放的,函数执行时会在栈区分配空间,函数执行结束时会自动释放这些空间。栈区的数据是连续分配的,由系统自动管理。 注意事项&…

llama-factory SFT 系列教程 (四),lora sft 微调后,使用vllm加速推理

文章目录 文章列表:背景简介llama-factory vllm API 部署融合 lora 模型权重 vllm API 部署HuggingFace API 部署推理API 部署总结 vllm 不使用 API 部署,直接推理数据集 tenplatevllm 代码部署 文章列表: llama-factory SFT系列教程 (一)&a…

鸿蒙上热搜:全国应用被华为呼唤!

日前,话题“华为呼吁全国应用尽快加入鸿蒙”冲上微博热搜榜。 据媒体报道,近日,华为徐直军在华为分析师大会上表示,打造鸿蒙原生应用生态是2024年最关键的事。华为希望通过2024年一年的时间,先在中国市场把智能手机上使…

C语言求自幂数(水仙花数与其他自幂数)

前言 今天我们来看一下如果求解自幂数(水仙花数),水仙花数是自幂数的一种,我们来看看自幂数的概念吧,当一个n位数,它的每个位上的数字的n次幂之和等于它本身的时候,我们称这个数为自幂数。水仙花…

CSGO挂箱号惨遭红锁,有人亏了100万

红锁大行动真的来了,V社在4月16号的更新里面,虽然没有说关于VAC相关的更新,但是CS2实测,已经实装到了游戏里面,伴随着这一次更新,很多的新号,尤其是像挂箱号相继出现大量的VAC红锁。 被红锁的具…

【YOLOv8改进[Neck]】使用BiFPN助力V8更优秀

目录 一 BiFPN(双向特征金字塔网络) 1 BiFPN 2 EfficientDet 二 使用BiFPN助力模型更优秀 1 整体修改 2 配置文件 3 训练 其他 一 BiFPN(双向特征金字塔网络) BiFPN(双向特征金字塔网络, 2020)用于特征融合层。 官方论文地址:https://arxiv.org…

基于达梦数据库开发-Java篇

文章目录 前言一、示例展示1.环境准备2.采用基础的jdbc调用3.采用扩展的mybatis调用 二、注意事项1.使用路径注解2.数据库对象的准确引用 三、可能异常1.无效的表或视图名2.无效的表或视图名3.网络通信异常 总结 前言 达梦提供了JDBC方式的驱动以便进行Java开发。默认情况下相…

Unity Editor编辑器扩展之创建脚本

前言 既然你看到这篇文章了,你是否也有需要使用代码创建脚本的需求?使用编辑器扩展工具根据不同的表格或者新增的内容去创建你想要的脚本。如果不使用工具,那么你只能不断去修改某个脚本,这项工作既繁琐也浪费时间。这个时候作为程…