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.mzph.cn/diannao/1081.shtml

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

相关文章

RS232、RS485、RS422、TTL、CAN各自的区别

目录 一:工业串口通信标准RS232、RS485、RS422的区别 第一个区别、硬件管脚接口定义不同 第二个区别、工作方式不同 第三个区别、通信方式不同 第四个区别,逻辑特性不同 第五个区别、抗干扰性、传输距离和传输速率也不同 二:RS232、RS…

CentOS 源码安装 Python3

今天在安装部分服务的时候,由于系统 CentOS 中默认带了 Python2,但是我的项目需要是 Python3 支持,特此将整个安装步骤记录下来。 安装必要的依赖 安装环境依赖 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlit…

docker安装并跑通QQ机器人实践(4)-bs-cqhttp搭建

go-cqhttp,基于 Mirai 以及 MiraiGo 的 OneBot Golang 原生实现,只需简单的配置, 就可以基于 go-cqhttp 使用框架开发,具有轻量, 原生, 高并发, 低占用, 跨平台等特点。 1 go-cqhttp 官网及可执行文件下载链接 go-cqhttp 官网:ht…

【Linux】详解进程通信中信号量的本质同步和互斥的概念临界资源和临界区的概念

一、同步和互斥的概念 1.1、同步 访问资源在安全的前提下,具有一定的顺序性,就叫做同步。在多道程序系统中,由于资源有限,进程或线程之间可能产生冲突。同步机制就是为了解决这些冲突,保证进程或线程之间能够按照既定…

泛型的初步认识(2)

前言~🥳🎉🎉🎉 hellohello~,大家好💕💕,这里是E绵绵呀✋✋ ,如果觉得这篇文章还不错的话还请点赞❤️❤️收藏💞 💞 关注💥&#x…

优思学院|ISO45001职业健康安全管理体系是什么?

ISO45001:2018是新公布的国际标准规范,全球备受期待的职业健康与安全国际标准(OH&S)于2018年公布,并将在全球范围内改变工作场所实践。ISO45001将取代OHSAS18001,成为全球工作场所健康与安全的参考。 ISO45001:201…

python应用

划分数据集 将数据集划分为训练集和测试集 import os import shutil import random # 数据集路径 images_dir ./images targets_dir ./gt # 划分后的路径 train_images_dir ./train/images test_images_dir ./test/images train_targets_dir ./train/gt test_ta…

微信域名防封/QQ域名防封/域名状态检测/域名防红防封API平台源码

下载地址:API平台源码 这套源码是使用thinkphp3.1.3开发的,可以在PHP5.3-5.6下运行,程序是有一点老了,但是思路仍在!然后,这套源码我已经成功搭建起来了,后台、个人(用户&#xff0…

在瑞芯微RV1126 Linux系统上调试WiFi的详细指南

目录标题 1. **系统和环境准备**2. **检查WiFi设备状态**3. **启用和禁用WiFi接口**4. **扫描可用的WiFi网络**5. **连接到WiFi网络**6. **查看当前的WiFi连接状态**7. **断开和重新连接WiFi**8. **管理WiFi网络配置**9. **使用iw工具进行高级WiFi调试**10. **故障排除和日志获…

算法训练营day16

一、二叉树的最大深度 递归解法 后序遍历(DFS) class Solution {public int maxDepth(TreeNode root) {if (root null) return 0;return Math.max(maxDepth(root.left), maxDepth(root.right)) 1;} }算法解析: 终止条件: 当 root 为空,…

力扣---填充每个节点的下一个右侧节点指针 II

给定一个二叉树: struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针,让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点,则将 next 指针设置为 NULL 。 初始状态下,所有 next 指针都…

牛x之路 - Day1

Day1 微积分之屠龙宝刀(武林秘籍) 之前的一些东西都在pdf上记得笔记, 没有在这个上面展示一遍,只好学到相关内容的时候再提叙啦;所以其实再写这个小记的时候,我已经看了一半的书,但是不要紧&am…

nodejs npm 常用的命令

大家好,我是资深前端之路,以下是自己对npm命令的回顾梳理。喜欢的朋友记得点赞关注收藏哟! npm npm init :生成package.json文件。 npm -v:查看npm版本号。 npm i:下载对应的文件包。npm i 下载包名版本号,可以下载制定的版本…

IntelliJ IDEA运行发布传统Java Web Application项目

接 重温8年前项目部署 要求,如何改用IntelliJ IDEA运行发布传统 Java Web Application项目呢,简述步骤如下: 一、下载源码 源码:https://github.com/wysheng/kindergarten 下载后的本地项目路径:/Users/songjianyon…

《Python源码剖析》之对象的基石---PyObject

前言 在python的源代码中,PyObject的结构体定义如下,它的内容看起来很简单,只有3项,分别是:_PyObject_HEAD_EXTRA,ob_refcnt和ob_type,其中_PyObject_HEAD_EXTRA是用于指向活动堆的指针&#x…

学习大数据,所需要的linux基础(1)

文章目录 linux入门概述Linux和Windows的区别CentOS下载地址 Linux文件与目录结构Linux文件Linux目录结构 VI/VIM编辑器vi/vim是什么测试数据集准备一般模式编辑模式指令模式模式间转换 网络配置和系统管理操作查看网络IP和网关配置网络和ip地址ifconfig配置网络接口修改ip地址…

吉林教育报社投稿信箱投稿邮箱

吉林教育杂志社投稿信箱 产品说明 《吉林教育》 编辑在线咨询QQ:2648025923 编辑在线咨询QQ: 2958409081 编辑在线咨询QQ: 2734638650 编辑咨询电话:18366155179 编辑咨询电话:18366155179 吉林教育投稿信…

使用Python进行自动化测试

👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 如何使用Python进行自动化测试:测试框架的选择与应用 自动化测试是软件开发过程…

curlftpfs和fusermount

curlftpfs 是一种 Linux 系统下用来将 FTP 服务器挂载为文件系统的工具,这意味着可以通过本地目录来访问和操作 FTP 服务器上的文件。 挂载FTP服务器到本地系统 为了挂载FTP服务器到本地系统中,使用curlftpfs工具,可以按照以下格式书写命令…

C++知识点总结(30):递归进阶练习

递归进阶练习 一、 2 2 2 的幂数1. 审题2. 参考答案2.1 递归2.2 循环 二、汉诺塔移动次数1. 审题2. 思路3. 参考答案 三、数字乘积分解1. 审题2. 参考答案 四、数字重复分解1. 审题2. 参考答案 五、烤鸡调料1. 审题2. 参考答案 一、 2 2 2 的幂数 1. 审题 如果这个整数是由若…