深度解析浏览器工作原理 - 浏览器渲染解析流程

news/2024/9/14 1:50:14/ 标签: javascript, 前端

在基本理解下面的内容后,再回过来看该图就会一目了然了

在这里插入图片描述

浏览器工作原理

当我们在浏览器中输入一个URL并发送请求时,主要会有如下几个处理步骤…

1. URL 解析与缓存检查

  • 浏览器会先对 URL 进行解析,识别对应的协议(如 http、https)、域名、端口号和路径等信息

  • 浏览器在发送网络请求前,会先检查一下本地缓存(如浏览器缓存、系统缓存等)中是否已有对应请求的资源的副本

    • 浏览器缓存: 首先,浏览器会检查它的缓存中是否有这个域名的记录,因为之前访问过的网址的解析结果可能会被存储在浏览器缓存中
    • 操作系统缓存: 如果浏览器缓存中没有找到,浏览器会询问操作系统,因为操作系统也可能有自己的DNS缓存
    • **ISP( Internet service provider)缓存: 如果以上都没有缓存记录,请求最终会发送到你的互联网服务提供商(ISP),它们通常会有更大范围的DNS缓存
  • 如果本地缓存中存在对应的资源且在没有过期的情况下,直接从缓存中加载资源,来节省时间和带宽; 反之,如果本地缓存中不存在对应的资源或资源已过期时,就会发送对应资源的请求

    • **🔺在浏览器中可以通过一个比较简单的办法来查看请求的资源是否是通过缓存中进行获取: ** 如果请求的资源是在本地缓存中加载的,通常对应请求的状态码为 "304 Not Modified",所以我们可以通过控制台中的 network 查看对应的状态码来进行查看
    • tip: 如果多次请求相同的资源没有使用缓存(状态码始终为 200)时,请先检查一下在 network 中是否禁用了缓存,如果打开了禁用缓存需要先取消掉禁用缓存项(如下图)
      • 在这里插入图片描述

2. DNS 域名解析:

  • 如果在本地缓存中没有找到所需资源,浏览器会进行DNS查询,以获取域名对应的IP地址
  • DNS查询就变成了一个递归查询过程,涉及到多个DNS服务器
    • 根域名服务器: 首先,你的DNS查询会被发送到根域名服务器(根服务器是最高级别的DNS服务器),负责重定向到管理顶级域名(如.com、.net等)的顶级域名服务器
    • 顶级域名服务器(TLD服务器): 根服务器会告诉你的ISP的DNS服务器去查询哪个顶级域名服务器来找到 .com、.net.org 等域的信息 → 这个服务器掌握所有 .com 等域名及其相应服务器的信息
    • 权威域名服务器(二级域名服务器):
      • 一旦你的DNS查询到达了

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

相关文章

okhttp的WebSocket心跳实现原理

okhttp的WebSocket实现心跳包需要服务端新增协议吗 ‌不需要。‌ OkHttp的WebSocket实现已经内置了心跳包机制,通过PING/PONG帧来维持连接保活。这意味着,OkHttp的WebSocket客户端和服务端在通信过程中,会自动发送PING/PONG帧来检测连接的活…

Qt实现json数据的生成、解析、修改和删除

文章介绍 本文章主要介绍如何使用QT提供的json相关类来处理json数据&#xff0c;包括json数据的生成、解析、修改和json数据的删除。 json数据的增删改查 处理json数据时需要包含以下三个头文件 #include <QJsonDocument>#include <QJsonObject>#include <QJ…

企业群集应用概述与 LVS 负载均衡详解

文章目录 企业群集应用概述与 LVS 负载均衡详解一、企业群集应用概述1.1 群集的含义1.2 现有问题1.3 解决方法 二、企业群集分类2.1 负载均衡群集&#xff08;Load Balance Cluster&#xff09;2.2 高可用群集&#xff08;High Availability Cluster&#xff09;2.3 高性能运算…

游戏开发设计模式之装饰模式

目录 装饰模式在游戏开发中的具体应用案例是什么&#xff1f; 如何在Unity中实现装饰模式以动态扩展游戏对象的功能&#xff1f; 装饰模式与其他设计模式&#xff08;如适配器模式、代理模式&#xff09;相比&#xff0c;有哪些优势和劣势&#xff1f; 优势 劣势 与适配器…

数学建模2024国赛时间及事项安排

2024年的全国大学生数学建模竞赛即将拉开帷幕。考虑到许多同学可能是首次参与此类赛事&#xff0c;尚不清楚如何进行有效的时间安排&#xff0c;博主在此整理了以往参赛的经验和时间管理策略&#xff0c;希望能为大家提供一些有益的参考&#xff0c;更从容地应对国赛。 本届全国…

如何完全掌握音准?

要完全掌握音准&#xff0c;需要综合多方面的训练和实践。以下是一些关键步骤和技巧&#xff1a; 一、基础准备 了解音准概念&#xff1a; 音准是指歌唱和乐器演奏中所发的音高能与一定律制的音高相符。掌握音准有赖于敏锐的听觉、精湛的技巧与适宜的演出环境。选择合适的乐器…

吴恩达机器学习课后作业-04神经网络

神经网络 对y进行独立热编码处理&#xff08;one-hot处理&#xff09;序列化权重参数前向传播代价函数反向传播神经网络优化可视化隐藏层 对y进行独立热编码处理&#xff08;one-hot处理&#xff09; def one_hot_encoder(raw_y):result[]for i in raw_y:#1-10y_tempnp.zeros(1…

62.不同路径

62.不同路径 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#…

适用于机器人视觉系统的LED光源

工业光源在机器视觉系统中扮演着至关重要的角色&#xff0c;它们直接影响到图像采集的质量以及后续图像处理的效率和准确性。 在自动化生产线上&#xff0c;光源用于辅助机器人进行精确的零件装配。通过提供稳定且高质量的照明&#xff0c;光源帮助机器人更准确地识别和定位零…

Hive SQL

一、基本数据类型 tinyint 1byte 有符号整数 smallint 2byte 有符号整数 int 4byte 有符号整数 bigint 8byte 有符号整数 boolean 布尔类型&#xff0c;true或者false float 单精度浮点数 double 双精度浮点数 decim…

less -- 总结 01 -(增删改查)

less的使用 // 下载插件 easy-less // 新建文件&#xff0c;后缀名是less&#xff0c;会自动生成一个后缀名为css的文件// 浏览器只认识 html css js // less css 是一种动态样式语言&#xff0c;属于 css预处理语言的一种&#xff0c;它使用类似 css的语法&#xff0c;为 cs…

解除 Excel 表格的文档保护全攻略

在日常工作和学习中&#xff0c;我们可能会遇到 Excel 表格被保护无法编辑的情况。别担心&#xff0c;今天就为大家分享几种解除 Excel 表格文档保护的方法。 一、导入腾讯文档 可以将受保护的 Excel 表格上传到腾讯文档。在部分情况下&#xff0c;腾讯文档会尝试自动解除表…

Unity3D UI Toolkit数据动态绑定详解

前言 在Unity3D中&#xff0c;Compute Shader是一种强大的工具&#xff0c;用于在GPU上执行并行计算任务&#xff0c;这些任务通常涉及大量的数据处理&#xff0c;如图像处理、物理模拟等。然而&#xff0c;由于GPU的并行特性&#xff0c;Compute Shader中的线程&#xff08;也…

归并排序与其例题

一、归并排序的简述 归并排序&#xff08;Merge Sort&#xff09;是一种高效的排序算法&#xff0c;采用分治法&#xff08;Divide and Conquer&#xff09;的策略。它的基本思想是将一个大的问题分解成多个小问题&#xff0c;然后解决这些小问题&#xff0c;最后将结果合并起…

pnpm快速入门

pnpm快速入门 1.使用pnpm启动项目 pnpm是一个优化的包管理器&#xff0c;它通过锁定工作树的方式来减少依赖安装的开销。要在pnpm环境中启动项目&#xff0c;首先你需要确保已经全局安装了pnpm。然后按照以下步骤操作 克隆项目&#xff1a;如果项目还没有下载&#xff0c;使用…

Linux基础 - yum、rzsz、vim 使用与配置、gcc/g++的详细解说

目录 一、Linux 软件包管理器 yum A.什么是软件包&#xff1f; B.关于rzsz&#xff0c;yum的配置 1.安装 sz&#xff0c;rz 命令&#xff1a; a.执行命令sz可将linux中的文件传输到Windows中 b.执行rz命令可将Windows中的文件传输到linux 2.scp XXX.tgz 用户名另一台lin…

2024最新FL Studio24.1.1.4285破解版中文安装包百度云网盘下载地址

大家好&#xff0c;今天我要给大家介绍一款音乐制作神器——FL Studio 24.1.1.4285中文版。这款软件可是音乐制作界的翘楚&#xff0c;无论是专业人士还是音乐爱好者&#xff0c;都会为它的强大功能和易用性所折服。 我们来看看FL Studio的特点。 这是一款全能型的音乐工作站&…

el-form中使用v-model和prop实现动态校验

如何在Vue的el-form中使用v-model和prop实现动态校验&#xff0c;包括多个变量控制校验、数组循环校验和字段级条件显示。通过实例演示了如何配合rules和自定义验证函数来确保表单的完整性和有效性。 公式&#xff1a; 动态校验项的v-model的绑定值 el-form的属性 :model的值 …

SystemTap(stap)架构和原理介绍,以及脚本编写举例

1 SystemTap简介 SystemTap是一个诊断Linux系统性能或功能问题的开源工具。它允许开发人员和系统管理员深入研究内核甚至用户空间应用程序的行为&#xff0c;以便发现错误状态、性能问题&#xff0c;或者仅仅为了解系统是如何工作的。它使得对运行时的Linux系统进行诊断调式变…

Windows安装Tomcat10

1. 下载Tomcat Tomcat官网 https://tomcat.apache.org/download-10.cgi ​下载安装jdk17 &#xff1a;jdk-17_windows-x64_bin.exe 配置JAVA环境变量 JAVA_HOME&#xff1a;C:\Program Files\Java\jdk-17 PATH&#xff1a;%Java_Home%\bin;%Java_Home%\jre\bin; 2. 设置环境变…