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

news/2024/5/18 12:49:53

目录

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.mrgr.cn/p/15046573

相关文章

SpringMVC基础篇(二)

文章目录 1.Postman1.基本介绍Postman是什么? 2.Postman快速入门1.Postman下载点击安装自动安装在系统盘 2.基本操作1.修改字体大小2.ctrl “” 放大页面3.进入创建请求界面 2.需求分析3.具体操作4.保存请求到文件夹中1.点击保存2.创建新的文件夹3.保存成功 3.使用…

【注释和反射】获取class类实例的方法

目录 一、获取一个类的Class对象的几种方法 代码 二、哪些类型可以有Class对象? 代码 一、获取一个类的Class对象的几种方法 Class对象是访问类元数据的入口,通过它可以获取类的名称、方法、字段、构造器、注解等信息,还可以创建类的实例…

xgp怎么注册阿根廷账号 微软商店xgp阿根廷账号注册教程

xgp怎么注册阿根廷账号 微软商店xgp阿根廷账号注册教程 xgp游戏平台是微软公司针对pc用户开发的一款游戏平台,在平台内有着知名的月包服务,玩家们只需每个月支付固定的费用,即可免费玩到不同的游戏大作,xgp平台也正是由月包服务…

js生成不同的阅读数分配到每一篇上面,不会因为刷新而变动

js生成不同的阅读数分配到每一篇上面,不会因为刷新而变动 {%- for article in blog.articles -%}<div class"blog-articles__article article">{%- render article-card,article: article,media_height: section.settings.image_height,media_aspect_ratio: a…

基于K-prototype算法聚类

k-prototype聚类是一种用于混合数据类型聚类的算法&#xff0c;由Jain和Dubes在1988年提出。它主要用于同时包含连续属性和离散属性的数据集。k-prototype算法可以看作是k-means算法的扩展&#xff0c;它将k-means算法的思想应用于混合数据类型&#xff0c;通过为连续属性和离散…

屏幕状态自动检测+鼠标自动操作

目录 一、写在前面 1.1适用场景 1.2涉及到的库 二、函数库 2.1pyautogui-屏幕截图&鼠标操作 2.1.1屏幕截图screenshot函数 2.1.2鼠标移动及单击 2.2Opencv-模板匹配 2.2.1matchTemplate函数 2.2.2minMaxLoc函数 2.2.3相关代码 2.3base64-图片转base64 2.3.1在线…

[Linux_IMX6ULL驱动开发]-设备树简述

目录 设备树的引入 设备树具体框架 设备树的属性 label address-cells和size-cells compatible model status reg 设备树的编译 内核对设备树的处理 plateform_device如何对应plateform_driver 设备树的引入 之前已经学习了解过了总线驱动模型的概念&#xff0c;也…

《智能前沿:应对ChatGPT算力挑战》

在全球人工智能热潮中&#xff0c;以 ChatGPT 为代表的 AIGC 技术引发了广泛关注。人工智能和机器学习等技术对数据规模及处理速度等提出了更高要求。在数据成为主要生产要素的当下和未来&#xff0c;如何跟上时代的发展步伐&#xff0c;构建适应 AI 需求的数据中心&#xff0c…

Oracle Hint 语法详解

什么是Hint Hint 是 Oracle 提供的一种 SQL 语法&#xff0c;它允许用户在 SQL 语句中插入相关的语法&#xff0c;从而影响 SQL 的执行方式。 因为 Hint 的特殊作用&#xff0c;所以对于开发人员不应该在代码中使用它&#xff0c;Hint 更像是 Oracle 提供给 DBA 用来分析诊断问…

linux 定位进程文件路径

有时候用top 打开任务管理器时知道某个任务的进程的存在&#xff0c;但不知道是哪个文件&#xff0c;只需两条指令只可定位进程的可执行文件路径 使用 ls -l /proc/<PID>/cwd 命令来查找该进程的当前工作目录。使用 cat /proc/<PID>/cmdline 命令来查看该进程的命…

3. 无重复字符的最长子串/438. 找到字符串中所有字母异位词/560. 和为 K 的子数组

3. 无重复字符的最长子串 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。 思路&#xff1a;想象一下我们…

WebSocket的原理、作用、API、常见注解和生命周期的简单介绍,附带SpringBoot示例

文章目录 原理作用客户端 API服务端 API生命周期常见注解SpringBoot示例 WebSocket是一种 通信协议 &#xff0c;它在 客户端和服务器之间建立了一个双向通信的网络连接 。WebSocket是一种基于TCP连接上进行 全双工通信 的 协议 。 WebSocket允许客户端和服务器在 单个TCP连接上…

怎样用PHP语言实现远程控制三路开关

怎样用PHP语言实现远程控制三路开关呢&#xff1f; 本文描述了使用PHP语言调用HTTP接口&#xff0c;实现控制三路开关&#xff0c;三路开关可控制三路照明、排风扇等电器。 可选用产品&#xff1a;可根据实际场景需求&#xff0c;选择对应的规格 序号设备名称厂商1智能WiFi墙…

【提示学习论文】BlackVIP: Black-Box Visual Prompting for Robust Transfer Learning论文原理

BlackVIP: Black-Box Visual Prompting for Robust Transfer Learning BlackVIP:稳健迁移学习的黑盒视觉提示 问题 黑盒白盒&#xff1f; 黑盒和白盒的概念与对预训练模型内部参数的了解程度相关。黑盒指的是对预训练模型的参数和结构缺乏详细了解&#xff0c;通常只能通过使…

python爬虫小案例——汽车之家

本篇文章是使用bs4中的BeautifulSoup和requests解析网页和获取数据&#x1f451;&#x1f31f; 文章目录 &#x1f31f;前言一、&#x1f349;bs4中的BeautifulSoup二、&#x1f349;bs4的语法三、&#x1f349;内容实践1. 确定想要爬取的内容2. 分析网页3. 获取数据分析 &…

三、CPU基础-缓存

计算机中缓存一般分为两个部分 1.内存 2.CPU Cache 一、CPU Cache分级 CPU Cache 通常分为大小不等的三级缓存&#xff0c;分别是 L1 Cache、L2 Cache 和 L3 Cache。 L1 Cache 和 L2 Cache 都是每个 CPU 核心独有的&#xff08;通常会分为「数据缓存」和「指令缓存」&#…

QA测试开发工程师面试题满分问答20: 软件的安全性应从哪几个方面去测试?

软件的安全性测试应从多个方面进行&#xff0c;并确保覆盖以下关键方面&#xff1a; 当回答问题时&#xff0c;可以根据自己的经验和知识&#xff0c;从上述要点中选择适合的方面进行详细说明。强调测试的综合性、全面性和持续性&#xff0c;并强调测试的重要性以及如何与开发团…

政安晨:【Keras机器学习示例演绎】(七)—— 利用 NeRF 进行 3D 体积渲染

目录 简介 设置 下载并加载数据 NeRF 模型 训练 可视化训练步骤 推理 渲染三维场景 可视化视频 结论 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras机器学习实战 希望政安晨的博客能够对您有所裨益&#xff0…

01-服务与服务间的通信

这里是极简版&#xff0c;仅用作记录 概述 前端和后端可以使用axios等进行http请求 服务和服务之间也是可以进行http请求的spring封装的RestTemplate可以进行请求 用法 使用bean注解进行依赖注入 在需要的地方&#xff0c;自动注入RestTemplate进行服务和服务之间的通信 注…

制造数字化“管理套路”

在当今竞争激烈的市场环境中&#xff0c;制造企业始终关心三个核心问题&#xff1a;生产效率、产品质量、成本控制&#xff0c;所以许多企业渴望加强对生产过程的管理控制。 生产过程是一个相对复杂的过程&#xff0c;涉及到多个环节和因素。从原材料的采购到产品的设计、生产…