浏览器输入URL会做哪些事情

news/2024/4/24 21:25:07/

1、浏览器输入URL后会检查缓存

检查资源是否在缓存中并且新鲜,如果有跳到转码步骤,

        1.1 检查是否新鲜的方法:

                        ---------HTTP1.0中提供的 Expires,储存的值是绝对时间表示缓存日期;

                        ---------HTTP1.1中提供Cache-Control:,储存以秒单位的最大新鲜时间;

如果未缓存新鲜资源,发起新请求

2、浏览器解析URL获取协议、主机、端口号、path

3、浏览器组装一个HTTP(GET)请求报文

4、浏览器获取主机IP地址:

   浏览器缓存---本机缓存---hosts文件-----路由器缓存-------ISP DNS缓存-------DNS递归查询(可能存在负载均衡导致每次IP不一样)

5、打开一个socket与目标IP地址,端口建立TCP连接(三次握手)

         5.1 客户端发送一个ACK报文,SYN=1,Seq=X 等待状态

         5.2 服务器接收后返回一个ACK报文,SYN=1, ACK=X+1 ,Seq=Y 半连接状态

         5.3 客户端接收后返回一个ACK报文,ACK=Y+1,Seq=Z  确定连接状态

        为什么要三次?

                  因为需要确定客户端和服务器的发送、接收、接收发送 功能,从而建立连接的可靠性。

6、 TCP连接后发送HTTP请求

7、服务器接收并解析,将请求发送到服务程序 ,如虚拟主机,用HTTP Host 头部判断请求的服务程序

8、服务器检查HTTP请求头是否包含缓存验证信息返回对应状态码

9、处理程序读取完整请求准备HTTP响应,访问数据库

10、服务器响应发送给浏览器 

 11、浏览器接收响应,根据情况关闭TCP连接或者保留(四次挥手)

        11.1主动方发送FIN报文,Fin=1,ACK=Z,Seq=X 半关闭状态

        11.2 被动方接收并发送ACK报文,ACK=X+1,Seq=Z 确认状态

        11.3 被动方发送FIN报文,Fin=1,ACK=X,Seq =Y 半关闭状态

        11.4 主动方接受并发送ACK报文,ACK=Y,Seq=X 关闭状态

为什么要四次?

                  其实是客户端和服务器各自释放连接的过程,在进入这个阶段时,主动方发送FIN报文告诉被动方不再发送数据了,被动方接收到之后先应答返回ACK报文,但是如果被动方还需要数据推送,就要等待推送完成后再返回一个FIN报文表示同意关闭。

12、浏览器检查响应状态码

13、缓存资源

14、对响应进行解码

15、 解析HTML构建DOM树,下载资源构建CSS树,执行JS脚本

         15.1构建DOM树

                        1.Tokenizing:根据HTML规范将字符流解析为标记流

                         2、Lexing:词法分析将标记转坏为对象并定义属性和规则

                          3、DOM construction:根据HTML标记关系及那个对象组成DOM树

        15.1解析过程遇到图片、样式、js文件,启动下载      

         15.1构建CSS树

                        1、Tokenizing:将字符流转换为标记流

                         2、Node :根据标记创建节点

                         3、CSSOM:节点创建CSS树

          15.1构建渲染树

                        1、从DOM树的根节点遍历所有可见节点,

                                        不可见节点:meta 、 scritp 、隐藏

                         2、对每个可见节点找到对应的CSSOM规则应用

                          3、发布可见节点内容和计算样式

          15.1执行JS脚本

                1、浏览器创建Document对象并解析HTML,将解析到的元素和文本节点添加到文档中,此时document.readystate为loading

                2、HTML解析遇到没有async和defer的script时,将他们添加到文档中,然后执行行内或外部脚本,同步执行,并且脚本下载或执行时解析器会暂停,这样就可以用document.write()方法将文本插入文件流,同步脚本经常简单定义函数和注册事件处理程序,他们可以遍历和操作script和他们之前的文档内容

                3、当解析器遇到设置了async属性的script时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器不会停下来等它下载。异步脚本禁止使用document.write(),它们可以访问自己script和之前的文档元素

                4、当文档完成解析,document.readState变成interactive

                5、所有defer脚本会按照在文档出现的顺序执行,延迟脚本能访问完整文档树,禁止使用document.write()

                6、浏览器在Document对象上触发DOMContentLoaded事件

                7、此时文档完全解析完成,浏览器可能还在等待如图片等内容加载,等这些内容完成载入并且所有异步脚本完成载入和执行,document.readState变为complete,window触发load事件

16、显示页面 


http://www.ppmy.cn/news/48547.html

相关文章

MySQL运维27-MySQL复制的评估方法和注意事项

文章目录 1、概述2、MySQL复制的意义3、MySQL复制实施前的评估方法3.1、必要性的评估3.2、基础设施的评估3.3、对主库影响的评估 4、MySQL复制实施时的注意事项5、总结 1、概述 2、MySQL复制的意义 扩展读能力:从库的最重要意义在于扩展读能力,但不能扩…

操作系统原理 —— 什么是中断?(四)

我们先来看看早期的计算机的工作流程: 如上图,在早期的计算机假设有三个程序需要执行,执行顺序是:先执行程序1,等待程序1结束之后,再开始执行程序2,以此类推,所以它们是串行执行的…

jsp+springboot基于ssm的人才招聘求职网站推荐模拟考试系统java idea

登录需要随机数字验证码 管理员: 招聘管理 求职信息管理 , 招聘信息管理 人员管理 管理注册的用户进行审核操作 公告管理 发布公告新闻 (公告我想不到啥意思,可修改或增加别的) 个人信息 修改个人信息 招聘者&am…

一天吃透SpringMVC面试八股文

说说你对 SpringMVC 的理解 SpringMVC是一种基于 Java 的实现MVC设计模型的请求驱动类型的轻量级Web框架,属于Spring框架的一个模块。 它通过一套注解,让一个简单的Java类成为处理请求的控制器,而无须实现任何接口。同时它还支持RESTful编程…

Qt扫盲-Qt图表类综述

Qt支持图表类综述 一、概述二、图表类型1. 折线图和柱状图2. 面积图和散点图3. 柱状图4. 饼图5. 盒须图6. 烛台图表7. 星座图图表 三、坐标轴 Axes四、图例五、与图表交互1. 动态绘制数据2. 深入数据3. 缩放和滚动4. 鼠标悬停 六、主题 一、概述 Qt Charts支持创建时尚的、交互…

webpack plugin源码解析(六) CompressionWebpackPlugin

文章目录 作用涉及 webpack API处理 asset 钩子compilation.hooks.processAssets返回或新建缓存:compilation.getCache返回 asset 文件信息:compilation.getAsset文件名匹配函数:compiler.webpack.ModuleFilenameHelpers.matchObject模版字符…

RabbitMQ的介绍和安装

文章目录 1.1 RabbitMQ介绍1.2 RabbitMQ的安装1.2.1 下载镜像1.2.2 安装启动1.2.3 测试 1.1 RabbitMQ介绍 RabbitMQ是一个开源的消息队列中间件,可以用于构建分布式应用程序,使应用程序能够快速、可靠地处理大量消息。它实现了AMQP(高级消息队…

MyBatis小技巧

一、MyBatis中接口代理机制及使用 我们不难发现,以前编写dao/mapper实现类中的方法代码很固定,基本上就是一行代码,通过SqlSession对象调用insert、delete、update、select等方法,这个类中的方法没有任何业务逻辑,既然…

八、express框架解析

文章目录 前言一、express 路由简介1、定义2、基础使用 二、express 获取参数1、获取请求报文参数2、获取路由参数 三、express 响应设置1、一般响应设置2、其他响应设置 四、express 防盗链五、express 路由模块化1、模块中代码如下:2、主文件中代码如下&#xff1…

常见的Web漏洞

一、SQL 注入 SQL 注入就是通过把 SQL 命令插入到 Web 表单,递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的 SQL 命令的目的。 1、原理: 网站数据过滤不合格,过分依赖用户输入的数据,没有过滤用…

SpringBoot配置多环境,dev,prod,test

springboot与maven配置多环境 开发任何的项目至少都需要三个环境,分别是 开发环境 测试环境 生产环境 环境不同意味着配置也是不相同的,比如数据库,文件路径等等配置,那么如何解决这么多环境整合在一起既不混乱又能很优雅呢&…

Maven项目中出现【不再支持目标选项 1.5】的解决办法

1 快速解决【单项目】 本方法只适用于单个项目&#xff0c;新建项目使用maven还会出现问题。 在pom.xml配置&#xff1a; <properties><maven.compiler.source>11</maven.compiler.source><maven.compiler.target>11</maven.compiler.target>&l…

grpc实战-pb文件生成问题/空消息体问题

报错信息&#xff1a; proto: message pb.Empty is already registered See https://protobuf.dev/reference/go/faq#namespace-conflict 对比老版本的工具生成的xxxx.pb.go文件。import导入的proto链接不一样&#xff1a; 旧版本&#xff1a;import github.com/golang/proto…

C++篇 ---- 命名空间namespace

由于在c语言中在定义时可能会出现重命名现象&#xff0c;造成空间冲突&#xff0c;c语言中有命名冲突&#xff1a;1 和库冲突。2 互相之间的冲突&#xff0c;变量命名冲突。所以c中就有了对其改进的关键字namespace&#xff0c;针对重定义&#xff0c;解决空间冲突。 文章目录 …

数据库实验 | 第1关:建立和调用存储过程(不带输出参数的存储过程)

任务描述 本关任务&#xff1a; 该实验是针对数据表jdxx&#xff0c;该数据表有四个字段&#xff0c;分别是省份(sf)、城市(cs)、区县(qxmc)、街道(name)。 例如&#xff0c;查询天心区(qxmc)的所有字段的值结果如图所示 任务要求 建立存储过程 dqxx(in city varchar(10),i…

一篇文章讲清 SEO 最核心的内容

当今的数字营销时代&#xff0c;SEO是吸引用户流量的重要手段。SEO指的是搜索引擎优化&#xff0c;它是为了提高网站在搜索引擎结果页面上的排名而采取的一系列技术和策略。 当用户在搜索引擎中输入关键词时&#xff0c;搜索引擎会根据一定的算法对网站进行排名&#xff0c;并…

【Go】四、面向对象

文章目录 面向对象1、匿名字段2、接口&#xff08;❌&#xff09;2.1、类型与接口的关系2.2、空接口2.3、类型断言 面向对象 1、匿名字段 ​ go只提供类型而不写字段名的方式&#xff0c;也就是匿名字段&#xff0c;也称为嵌入字段 1、不写字段名&#xff0c;只给出类型 2、…

JavaScript如何删除css

我们在前端开发当中&#xff0c;常常需要动态地添加、修改或删除DOM元素和CSS样式。DOM和CSS都是前端开发中不可或缺的部分&#xff0c;而JavaScript作为一种脚本语言&#xff0c;可以对DOM和CSS进行操作。 本文将重点介绍如何使用JavaScript来删除CSS&#xff0c;包括以下几个…

数据结构与算法基础-学习-20-查找之散列表(HASH TABLE)

目录 目录 一、基本思想 二、术语 1、散列方法 2、散列函数 3、散列表 4、冲突 5、同义词 三、如何减少哈希冲突 四、构造散列函数需考虑的情况 五、散列函数的构造方法 1、直接定址法 2、除留余数法 六、如何处理哈希冲突 1、开地址法 2、拉链法 七、散列表查…

搭建CDH错误记录(踩坑无数)

搭建CDH流程记录 如何搭建本地yum源 1.配置yum源这里使用 阿里源 http://mirrors.aliyun.com/repo/Centos-7.repo wget http://mirrors.aliyun.com/repo/Centos-7.repo2.安装http软件 yum install httpd -y3.配置httpd.conf vi /etc/httpd/conf/httpd.conf在 AddType appli…