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、浏览器布局渲染

        完成解析

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

目标检测算法演变:从R-CNN到Faster R-CNN【AI写作一键生成】

首先,这篇文章是基于笔尖AI写作进行文章创作的,喜欢的宝子,也可以去体验下,解放双手,上班直接摸鱼~ 按照惯例,先介绍下这款笔尖AI写作,宝子也可以直接下滑跳过看正文~ 笔尖Ai写作:…

【Day 3】Ajax + Vue 项目、路由 + Nginx

1 Ajax Asynchronous JavaScript And XML 异步的 JavaScript 和 XML 作用: 数据交换 通过 Ajax 可以给服务器发送请求,并获取服务器响应的数据 异步交互 可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术&#xf…

车载以太网DoIP 协议,万字长文详解

🍅 我是蚂蚁小兵,专注于车载诊断领域,尤其擅长于对CANoe工具的使用🍅 寻找组织 ,答疑解惑,摸鱼聊天,博客源码,点击加入👉【相亲相爱一家人】🍅 玩转CANoe&…

欢迎大家光临成都市

我现在就在家里,刚刚理个发,洗个澡 爸妈也在家里,一切正常,但是QQ上不了,哎呀,又长胖了,不好意思

Next App Router(上)

目录 1. 文件系统(file-system) 2. 从 Pages Router 到 App Router 3. 使用 App Router 4. 定义页面(Pages) 路由(Router)是 Next.js 应用的重要组成部分。在 Next.js 中,路由决定了一个页面…

适合各大资源网投稿html源码

源码介绍 适合各大资源网投稿html源码,源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面 效果预览 源码下载 适合各大资源…

书生·浦语大模型实战训练营--第二期第六节课--Lagent AgentLego 智能体应用搭建--notebook

一、 大模型的局限性 大模型本身存在下面的几个问题:幻觉(虚假信息,不符合实际)、时效性(训练数据过时,不能实时更新)、可靠性(对于复杂任务,可能错误输出) …

Spring AOP(面向切面编程)

1.Spring AOP 简介 1.1 AOP概述 AOP 为 Aspect Oriented Programming 的缩写,意思为面向切面编程, 是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。AOP 是 OOP 的延续,是Spring框架中的一个重要内容,是函数式编程的一…

串口小项目 - 声控刷抖音

项目准备: orangepi02 语言 模块: SU-03T 电脑 接线: 语言模块 - orangepi VCC - 5V GND - GND B7(RX)--RX-5 orangepi 手机 通过usb 连接 实现思路图: 语言模块接收到语言信息,发送到 H616 去处理,H616再控制手机实现语言刷抖音的功能 …

【Proteus】51单片机对步进电机的控制

步进电机:将电脉冲信号转变为角位移或线位移的开换控制系统。在非超载的情况下,电机的转速、停止的位置只取决于脉冲信号的频率和脉冲数,而不受负载变化的影响,即给电机加一个脉冲信号,电机则转过一个步距角。 特点&am…

服务网关GateWay基础

1. 网关基础介绍1.1 网关是什么1.2 为啥要用网关1.3 常见的网关组件NginxNetflix ZuulSpring Cloud GatewayKongAPISIX综合比较 2. gateWay的使用2.1 springCloud整合gateway2.2 GateWay的相关用法2.3 GateWay路由使用示例基本用法转发/重定向负载请求动态路由 2.5 断言(Predic…

代码随想录 797. 所有可能的路径

题目 给你一个有 n 个节点的 有向无环图(DAG),请你找出所有从节点 0 到节点 n-1 的路径并输出(不要求按特定顺序) graph[i] 是一个从节点 i 可以访问的所有节点的列表(即从节点 i 到节点 graph[i][j]存在一…

电视音频中应用的音频放大器

电视机声音的产生原理是将电视信号转化为声音,然后通过扬声器将声音播放出来。当我们打开电视并选择频道时,电视机首先从天线或有线电视信号中获取声音信号。声音信号经过放大器放大之后,就能够通过扬声器发出声音。电视机声音的产生原理和音…

React【Day4下+5】

环境搭建 使用CRA创建项目,并安装必要依赖,包括下列基础包 Redux状态管理 - reduxjs/toolkit 、 react-redux路由 - react-router-dom时间处理 - dayjsclass类名处理 - classnames移动端组件库 - antd-mobile请求插件 - axios 配置别名路径 1. 背景知识…

Java | Leetcode Java题解之第32题最长的有效括号

题目&#xff1a; 题解&#xff1a; class Solution {public int longestValidParentheses(String s) {int left 0, right 0, maxlength 0;for (int i 0; i < s.length(); i) {if (s.charAt(i) () {left;} else {right;}if (left right) {maxlength Math.max(maxlen…

【Linux】NFS网络文件系统搭建

一、服务端配置 #软件包安装 [roothadoop01 ~]# yum install rpcbind nfs-utils.x86_64 -y [roothadoop01 ~]# mkdir /share#配置文件修改 #格式为 共享资源路径 [主机地址] [选项] # [roothadoop01 ~]# vi /etc/exports /share 192.168.10.0/24(rw,sync,no_root_squash) #…

智慧社区整体解决方案(PPT)

1、背景与现状分析 2、解决方案 3、功能及应用场景介绍 软件资料清单列表部分文档&#xff1a; 工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产品需求规格说明书&#xff0c;需求调研计划&#xff0c;用户需求调查单&#xff0c;用户需求…

机器视觉系统:PVC片材表面缺陷检测的锐利“眼睛”

PVC片材作为一种广泛应用于建筑、包装、医疗等领域的塑料材料&#xff0c;其表面质量对于产品的性能和使用寿命至关重要。然而&#xff0c;在生产过程中&#xff0c;PVC片材可能会出现多种表面缺陷&#xff0c;如划痕、污渍、气泡、压痕等。为了确保产品质量&#xff0c;机器视…

【五十九】【算法分析与设计】高精度加法和高精度减法

高精度加法 高精度加法&#xff0c;也称为大数加法&#xff0c;是一种能够处理超过标准数据类型&#xff08;如 int 或 long&#xff09;允许范围的大数字的算法。 高精度数字通常无法使用单一的标准数据类型来存储。一个常见的方法是使用数组或字符串来表示每一位数字。例如…

算法课程笔记——STL键值对map

map当下标无限的数组 重点是对应关系&#xff0c;一般不修改compare 类比set 没有lowerbound&#xff0c;因为遍历是无序的 ; map不能用sort函数排序 但可用vector转化为map使用 std::set<std::pair<TKEY, mutable TVAL> > ≈ std::map<TKEY, TVAL>