当前位置：首页 > news >正文

http页面的加载过程

news 来源：原创 2025/9/18 13:27:09

HTTP/2 核心概念

1.1 流（Stream）

• 定义：HTTP/2 连接中的逻辑通道，用于传输数据，每个流有唯一标识符（Stream ID）。

• 特点：

◦ 支持多路复用（多个流并行传输）。

◦ 独立管理优先级、流量控制和状态。

• 示例：

◦ 流 ID=1：传输 HTML 请求和响应。

◦ 流 ID=2：传输 CSS 文件。

1.2 帧（Frame）

• 定义：HTTP/2 的最小传输单元，所有数据（头部、正文等）均以帧形式传输。

• 结构：

◦ Length（帧长度）、Type（类型）、Flags（标志位）、Stream ID、Payload（负载）。

• 关键帧类型：

◦ HEADERS：传输 HTTP 头部。

◦ DATA：传输消息体（如 HTML、CSS 内容）。

◦ SETTINGS：连接初始化配置。

1.3 物理传输与逻辑复用

• 物理层面：不同流的帧在同一个 TCP 连接上串行传输。

• 逻辑层面：接收端通过 Stream ID 重组帧，实现并行处理。

• 优势：减少延迟，避免传统 HTTP/1.1 的队头阻塞。

浏览器渲染流程

2.1 核心步骤

请求 HTML：浏览器发起 HTTP 请求获取 HTML 文件。
解析 HTML：

◦ 边下载边解析（流式解析），构建 DOM 树。

加载外部资源：

◦ CSS：通过标签触发加载，阻塞渲染（需构建 CSSOM 树）。

◦ JS：默认阻塞解析（可通过 async/defer 优化）。

◦ 图片/媒体：非阻塞加载（懒加载优化）。

构建渲染树：合并 DOM 和 CSSOM，确定可见元素及样式。
布局（Layout）：计算元素几何位置。
绘制（Paint）：逐层合成并显示内容。

2.2 JavaScript 的影响

• 同步脚本：暂停 HTML 解析和渲染。

• 异步脚本：

◦ async：下载完成后立即执行（不保证顺序）。

◦ defer：下载完成后在 HTML 解析完成后执行（保证顺序）。

资源加载与优化策略

3.1 关键资源加载顺序

HTML：必须优先加载，构建页面骨架。
CSS：内嵌或外链，需尽早加载（避免 FOUC）。
JavaScript：按需加载（defer 或动态导入）。
媒体资源：懒加载（loading=“lazy”）。

3.2 性能优化技巧

• 减少阻塞：

◦ 将 CSS 放在，JavaScript 放在页面底部或使用 defer。

• 利用 HTTP/2 多路复用：合并多个小文件，减少请求次数。

• 预加载关键资源：

• 缓存策略：

◦ 设置 Cache-Control 头，利用浏览器缓存。

常见问题与解决方案

4.1 队头阻塞（Head-of-Line Blocking）

• HTTP/2：通过多路复用解决应用层阻塞。

• TCP 层阻塞：需优化网络稳定性（HTTP/3 迁移到 QUIC 协议）。

4.2 渲染阻塞优化

• CSS：内联关键 CSS，异步加载非关键 CSS。

• JavaScript：使用 async/defer 或 Web Workers。

实际案例分析

5.1 示例 HTML 加载流程

• 流程：

下载 HTML → 解析 → 加载 style.css（阻塞渲染）。
下载 analytics.js（不阻塞解析）。
图片 image.jpg 在滚动到可视区域时加载。
总结

• HTTP/2：通过流和帧实现高效多路复用，优化网络传输。

• 浏览器渲染：依赖 HTML、CSS、JS 的协同加载与解析。

• 优化核心：减少阻塞、合理利用并行、优先加载关键资源。

http页面的加载过程

HTTP/2 核心概念 1.1 流（Stream） • 定义：HTTP/2 连接中的逻辑通道，用于传输数据，每个流有唯一标识符（Stream ID）。 • 特点： ◦ 支持多路复用（多个流并行传输&#…...

编程日记 2025/9/18 13:27:09

动手人形机器人（RL）

1 PPO的讲解核心步骤，如策略网络和价值网络的定义、优势估计、策略更新、价值更新等基础功能的实现 2 代码构成可能涉及初始化，Behavior Clone 3 动手强化学习 import pytorch as torch class actorcritic ##等待补充 4 PD Gains 在机器人学中&…...

编程日记 2025/9/9 3:06:13

搭建RabbitMQ 在虚拟机上用docker搭建RabbitMQ，首先拉取镜像 docker run --privilegedtrue -d -p 5672:5672 -p 15672:15672 --name rabbitmq rabbitmq:management mkdir -p /usr/local/docker/rabbitmq再创建rabbitmq容器，下面的命令已经能够创建之后…...

编程日记 2025/9/16 9:05:31

基于PyQt5的企业级生日提醒系统设计与实现

在企业人力资源管理场景中，员工生日提醒是一项重要的关怀功能。本文将以一个基于PyQt5开发的生日提醒系统为例，深入解析桌面应用程序开发中的关键技术实现，涵盖GUI设计、数据持久化、系统集成、动画效果等核心模块。一、技术选型分析 1.1 PyQt5框架优势跨平台特性：支持W…...

编程日记 2025/9/11 21:34:43

蓝桥杯嵌入式第16届——ADC模数转化部分

将外部的模拟信号转换为数字信号 （ ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量，建立模拟电路到数字电路的桥梁 ） STM32 - ADC 笔记_stm32 adc电容-CSDN博客引脚状况 STM32cubemx配置 ADC1配置 ADC2配置代码部分 …...

编程日记 2025/9/13 15:11:26

拜特科技签约天津城投集团，携手共建司库管理系统

近日，拜特科技成功签约天津城市基础设施建设投资集团有限公司（以下简称“天津城投集团”），携手共建司库管理系统。自2015年结缘以来，拜特科技与天津城投集团已携手并进十年，构建了稳固且高效的合作桥梁。…...

编程日记 2025/9/3 10:30:27

Spring Boot 中集成 Knife4j：解决文件上传不显示文件域的问题

Spring Boot 中集成 Knife4j：解决文件上传不显示文件域的问题在使用 Knife4j 为 Spring Boot 项目生成 API 文档时，开发者可能会遇到文件上传功能不显示文件域的问题。本文将详细介绍如何解决这一问题，并提供完整的解决方案。 Knife4j官网…...

编程日记 2025/9/11 3:49:34

Nuxt.js的useHead有哪些对象

在Nuxt.js框架中，useHead是一个用于操作页面<head>部分的辅助函数。它返回一个包含多个对象的集合，允许你轻松地在组件中修改或添加 HTML 的<head>内容。具体来说，useHead 返回的对象集合包括： title: 用于设置页面…...

编程日记 2025/9/15 20:01:38

JavaScript的可选链操作符 ?.

JavaScript的可选链操作符（Optional Chaining Operator）是 ES2020（ES11） 引入的新特性，通过语法 ?. 简化对深层嵌套对象属性、方法或数组元素的访问，避免因中间值为 null 或 undefined 而引发的错误。核…...

编程日记 2025/9/13 12:59:03

增长黑客：激活实验助力增长

激活实验是推动用户增长的重要手段。下面为大家详细介绍激活实验的关键步骤与重点解决问题激活实验的三个关键步骤 1. 明晰 “啊哈时刻” 路径 “啊哈时刻” 指用户瞬间领悟产品价值的瞬间。要达成这一点，需明确用户体验到 “啊哈时刻” 的所有路径。以在线绘图工具…...

编程日记 2025/9/14 16:31:19

STM32低功耗

设置不同位来配置是哪种低功耗模式 WAKEUP引脚可以唤醒任何睡眠状态,但是只有待机模式是属于WAKEUP唤醒，其他模式都是属于中断唤醒，所以待机模式要使能EWUP引脚，还要手动清除唤醒标志位（在进入待机模式前就要清除标志位&#xff…...

编程日记 2025/9/14 20:46:52

【精品PPT】2025固态电池知识体系及最佳实践PPT合集（36份）.zip

精品推荐，2025固态电池知识体系及最佳实践PPT合集，共36份。供大家学习参考。 1、中科院化学所郭玉国研究员：固态金属锂电池及其关键材料.pdf 2、中科院物理所-李泓固态电池.pdf 3、全固态电池技术研究进展.pdf 4、全固态电池生产工艺.pdf 5、…...

编程日记 2025/9/3 23:35:35

头歌数据库【数据库概论】第10-11章故障恢复与并发控制

第1关：数据库恢复技术 1、事务的（ A）特性要求事务必须被视为一个不可分割的最小工作单元 A、原子性 B、一致性 C、隔离性 D、持久性 2、事务的（C ）特性要求一个事务在执行时，不会受到其他事务的影响。 A、原…...

编程日记 2025/9/17 16:19:28

qt之opengl使用

使用qt中的openglWidget绘制一个三角形。自定义的类继承关系sunOpengl : public QOpenGLWidget,QOpenGLFunctions_3_3_Core 代码如下 /*----MainWindow.cpp----------------------------------------------*/ #include "mainwindow.h" #include "./ui_mainwin…...

编程日记 2025/9/9 21:48:50

Spark Core编程

一 Spark 运行架构 1 运行架构定义 Spark 框架的核心是一个计算引擎，整体来说，它采用了标准 master-slave 的结构如图所示 2 核心组件 Spark 框架有两个核心组件: 1)Driver 2)Spark 驱动器节点（用于执行 Spark 任务中的 main 方法&…...

编程日记 2025/9/11 20:53:09

蓝桥杯 B3619 10 进制转 x 进制

题目描述给定一个十进制整数 n 和一个小整数 x。将整数 n 转为 x 进制。对于超过十进制的数码，用 A，B ... 表示。输入格式第一行一个整数 n； 第二行一个整数 x。输出格式输出仅包含一个整数，表示答案。输入输出样例 …...

编程日记 2025/9/14 9:37:59

spring mvc中不同服务调用类型（声明式（Feign）、基于模板（RestTemplate）、基于 SDK、消息队列、gRPC）对比详解

RestControllerAdvice 和 ControllerAdvice 对比详解 1. 基本概念注解等效组合核心作用ControllerAdviceComponent RequestMapping（隐式）定义全局控制器增强类，处理跨控制器的异常、数据绑定或全局响应逻辑。RestControllerAdviceControll…...

编程日记 2025/9/9 14:49:23

敏捷迭代实战经验分享

一、敏捷迭代团队成员构成比较高效的敏捷开发团队人员一般保持在7~10人左右，一般一个完整的敏捷迭代团队包含PM、BA、开发、测试、设计5类角色成员，由于不同项目的现状不同，可根据现实情况配置相应角色。图：项目核心团队角色二、敏捷实践活动敏捷迭代的周期可以根据各…...

编程日记 2025/9/15 9:39:49

《从底层逻辑剖析：分布式软总线与传统计算机硬件总线的深度对话》

在科技飞速发展的当下，我们正见证着计算机技术领域的深刻变革。计算机总线作为信息传输的关键枢纽，其发展历程承载着技术演进的脉络。从传统计算机硬件总线到如今备受瞩目的分布式软总线，每一次的变革都为计算机系统性能与应用拓展带来了质的…...

编程日记 2025/9/11 1:15:42

服务器运维ACL访问控制列表如何配置

ACL(访问控制列表)在服务器运维中用于细粒度地控制用户或主机对资源的访问权限。正确配置ACL能有效限制未授权访问，增强系统安全性。以下是ACL的基本配置流程及示例，主要以Linux系统为例进行说明。一、启用ACL支持 1. 检查文件系统是否支持ACL tune2fs …...

编程日记 2025/9/5 22:54:58

PIXOR：基于LiDAR的3D检测模型解析

目录 1、前言 2、PIXOR介绍 2.1. 什么是PIXOR？ 2.2. PIXOR如何工作？ 3、表现和应用 3.1、PIXOR的性能表现 3.2、PIXOR的应用场景 3.3、PIXOR的局限性与挑战 4. PIXOR的未来展望 5. 结语 1、前言自动驾驶技术正以前所未有的速度发展&#xff…...

编程日记 2025/9/16 1:58:38

【OSG学习笔记】Day 2: 场景图（Scene Graph）的核心概念

今天课程分为两部分，第一部分我们学习一下Scene Graph理论知识，第二部分我们熟悉下OSG的源码。第一部分（Scene Graph） 在OpenSceneGraph中，场景图（Scene Graph）通过树状层级结构高效管理3D对…...

编程日记 2025/9/16 1:10:50

虚幻5的C++调试踩坑

本地调试VS附加调试踩坑1 预编译版本的UE5没有符号文件，无法调试源码官方代码调试所需要的符号文件bdp需要下载导入。我安装的5.5.4是预编译版本，并非ue5源码。所以不含bdp文件。需要调试官方代码则需要通过EPIC中下载安装。右键UE版本，打…...

编程日记 2025/9/16 0:28:55

【软件测试】自动化测试框架Pytest + Selenium的使用

Pytest Selenium 是一种常见的自动化测试框架组合，用于编写和执行 Web 应用程序的自动化测试。Pytest 是一个强大的 Python 测试框架，而 Selenium 是一个用于浏览器自动化的工具，二者结合使用可以高效地进行 Web 应用的功能测试、UI 测试等。…...

编程日记 2025/9/12 7:12:23

蓝桥杯补题

方法技巧： 1.进行循环暴力骗分，然后每一层的初始进行判断，如果已经不满足题意了，那么久直接continue，后面的循环就不用浪费时间了。我们可以把题目所给的等式，比如说有四个未知量，那么我们可以用…...

编程日记 2025/9/13 22:23:51

2025年港口危货储存单位主要安全管理人员备考练习题

港口危货储存单位主要安全管理人员备考练习题： 单选题 1、依据《安全生产法》，危险物品的生产、储存单位的安全生产管理人员的任免，应当告知（ ）。 A. 主管的负有安全生产监督管理职责的部门 B. 当地人民政府 C. 行…...

编程日记 2025/9/11 1:15:44

openEuler欧拉系统配置local的yum源

1.下载iso openEuler | 开源社区 | openEuler社区官网 2.上传openEuler镜像文件至服务器（例如上传至/home目录） 3.创建挂载目录 #mkdir -p /mount/iso 4.镜像挂载 #mount -o loop /home/openEuler-22.03-LTS-x86_64-dvd.iso（镜像上传目…...

编程日记 2025/9/9 2:02:56

AI比人脑更强，因为被植入思维模型【52】福格行为模型

giszz的理解：重要公式，是BMAT，行为动机能力触发点。也许是乘以。这个挺深刻的，在产品设计中，界面交互，都可以用到这样的思维模型。一、定义福格行为模型（Fogg Behavior Model）是由…...

编程日记 2025/8/31 9:18:04

DocLayout-YOLO：通过多样化合成数据与全局-局部感知实现文档布局分析突破

论文地址：https://arxiv.org/pdf/2410.12628 目录一、论文概览：当YOLO遇见文档分析二、创新点解析：两大核心技术创新点1：Mesh-candidate BestFit合成算法创新点2：全局-局部可控感知模块（GL-CRM）三、实验结果：全面超越SOTA 主要指标对比（D4LA数据集）消融…...

编程日记 2025/9/15 4:46:58

栈(算法)

在 C 里，栈是一种遵循后进先出（LIFO）原则的数据结构。下面从多个方面为你介绍 C 栈： 1. 使用标准库中的std::stack C 标准库提供了std::stack容器适配器，能方便地实现栈的功能。以下是简单示例： cpp #in…...

编程日记 2025/9/9 1:06:23

leetcode每日一题：子数组异或查询

引言今天的每日一题原题是3375. 使数组的值全部为 K 的最少操作次数，比较水，可以分成2种情况： 存在比k更小的数，由于每次操作只能使得部分数变小，但是不能把任何数变大，所以肯定无法达成不存在比k更小的…...

编程日记 2025/9/17 16:00:01

openEuler-22.03-LTS-SP3-x86_64 离线编译安装 nginx 1.20.1

openEuler-22.03-LTS-SP3-x86_64 离线编译安装 nginx 1.20.1 一、概述二、安装依赖1、安装 pcre、pcre-devel2、安装 zlib、zlib-devel3、安装 make、gcc、gcc-c3、编译 openssl5、安装 libtool6、编译 pcre-8.45 三、下载编译 nginx四、运行 nginx 一、概述本文档适用于无法…...

编程日记 2025/9/11 7:03:35

使用Alamofire下载网站首页内容

用Alamofire库写一个下载网站首页内容的Swift代码。首先，我需要确认用户的需求。他们可能是在开发一个iOS应用，需要从某个网站获取首页的数据，比如HTML内容或者API数据。Alamofire是一个常用的Swift网络库，基于URLSession&#xf…...

编程日记 2025/9/6 8:01:45

服务器DNS失效

服务器异常 xx.t.RequestException: java.net.UnknownHostException: test.ac.xxxx.cn现象分析本地测试正常，说明域名本身无问题。服务器 DNS 解析异常，导致 UnknownHostException。**服务器可正常解析 ****baidu.com**，说明网络正常&#…...

编程日记 2025/9/10 13:43:59

#无类域间路由(快速复习版)

判断两个无类（CIDR）地址是否属于同一个子网 🎯 问题本质： 判断两个 IP 地址是否属于同一个子网，其实就是对比它们的“网络地址”是否相同。 🔍 原理步骤（通用方法） 我们按步骤来判…...

编程日记 2025/9/13 14:00:49

【Linux】jumpserver开源堡垒机部署

JumpServer 安装部署指南本文档详细记录了 JumpServer 安装部署的过程、核心脚本功能说明以及后续管理使用提示，方便运维人员快速查阅和二次安装。 1. 前提条件操作系统要求： 仅支持 Linux 系统，不支持 Darwin（macOS&#xff0…...

编程日记 2025/9/13 17:41:23

Memcached缓存系统：从部署到实战应用指南

#作者：猎人文章目录一、安装libevent二、安装配置memcached三、安装Memcache的PHP扩展四、使用libmemcached的客户端工具五、Nginx整合memcached:六、php将会话保存至memcached Memcached是一款开源、高性能、分布式内存对象缓存系统，可应用各种需要缓…...

编程日记 2025/9/11 21:02:20

【rdma tx data flow问题】

rdma data flow问题 1 SQ_doorbell如何产生？ --RDMA网卡doorbell寄存器触发；2 CPU如何访问网卡的Doorbell寄存器？3 为什么需要roce_qid_convert把local_qid转换成global_qid;4.WQE的format是什么？5.WQE在网卡硬件中的处理流程&…...

编程日记 2025/9/14 1:32:33

Vue 框架组件间通信方式

组件间通信方式不管是 vue2 还是 vue3，组件通信方式很重要，以下是常见的几种通信方式： props：可以实现父子组件、子父组件、甚至兄弟组件通信自定义事件：可以实现子父组件通信全局事件总线 $bus：可以实现…...

编程日记 2025/9/15 11:20:43

React 第三十节使用 useState 和 useEffect Hook实现购物车

不使用 redux 实现购物车案例使用 React 自带的 useState 和 useEffect Hook 即可实现购物车 export default function ShoppingCar() {// 要结算的商品总数以及总价const [totalNum, setTotalNum] useState(0)const [totalPerice, setTotalPerice] useState(0)// 商品…...

编程日记 2025/9/9 16:00:20

卷积神经网络CNN

目录一、图像基础知识图像基本概念图像的加载二、CNN概述 CNN概述三、卷积层卷积计算 Padding Stride 多通道卷积计算 PyTorch卷积层API 四、池化层池化层计算 Stride Padding 多通道池化层计算 PyTorch 池化 API 五、图像分类案例 CIFAR10 数据集 …...

编程日记 2025/9/14 16:06:07

【大数据生态】Hive的metadata服务未开启

解决办法进入到Hive的bin目录下,键入命令: #启动元服务 [atguiguhadoop102 bin]$ pwd /opt/module/hive-3.1.2/bin [atguiguhadoop102 bin]$ ./hive --service metastore & #启动hive [atguiguhadoop102 hive-3.1.2]$ pwd /opt/module/hive-3.1.2 [atguiguhadoop102 hiv…...

编程日记 2025/9/4 20:13:33

【RabbitMQ】死信队列

1.概述死信，顾名思义就是无法被消费的消息，也就是没有被传到消费者的消息，或者即使传到了也没有被消费。当然有死信就有死信队列。死信队列就是用来存储死信的。它的应用场景就是保证订单业务的消息数据不丢失，当消息消费发生…...

编程日记 2025/9/16 1:31:56

区间 dp 系列题解

1.洛谷 P4342 IOI1998 Polygon 我的博客 2.洛谷 P4290 HAOI2008 玩具取名题意某人有一套玩具，并想法给玩具命名。首先他选择 W, I, N, G 四个字母中的任意一个字母作为玩具的基本名字。然后他会根据自己的喜好，将名字中任意一个字母用 W, I, N, G …...

编程日记 2025/9/16 4:21:28

Typora使用笔记

文章目录主题自动编号字体设置两端对齐Step1Step 2 代码块显示行号设置快捷键参考文献主题自动编号 typora-theme-auto-numbering 字体设置两端对齐 Step1 切记从typora的偏好设置中打开主题所在的文件夹，并修改对应的css文件。（以 github.css 为例…...

编程日记 2025/9/4 0:12:17

k8s部署grafana

先决条件这里部署过程的前提是已经部署好storageclass,所以pv会根据pvc自动创建. 详情参考:k8s-StoargClass的使用-基于nfs_a volume that contains injected data from multiple-CSDN博客直接开始: 部署pvc [rootmodule /zpf/grafana]$cat pvc.yml apiVersion: v1 kind…...

编程日记 2025/9/7 9:24:37

第三章：SQL 高级功能与性能优化

1. 窗口函数（Window Functions） 用于在结果集的“窗口”（指定行范围）内执行计算，保留原数据行的同时生成聚合或排序结果。 1.1 核心语法 SELECT column1,column2,[窗口函数] OVER (PARTITION BY 分组列…...

编程日记 2025/9/18 2:15:11

[ACM_3] n组数据 | getchar() | getline(cin,s)

目录 14. 第⼀⾏是⼀个整数n，表示⼀共有n组测试数据, 之后输⼊n⾏字符串 15. 第⼀⾏是⼀个整数n，然后是n组数据，每组数据2⾏，每⾏为⼀个字符串，为每组数据输出⼀个字符串，每组输出占⼀⾏ 16. 多组测试…...

编程日记 2025/9/14 1:32:36

富士相机照片 RAF 格式如何快速批量转为 JPG 格式教程

富士（Fujifilm）相机拍摄的 RAW 格式文件（RAF）因其高质量和丰富的图像信息而受到摄影师的喜爱。然而，RAF 文件通常体积较大且不易于分享或直接使用。为了方便处理，许多人选择将其转换为更通用的 JPG 格式。在…...

编程日记 2025/9/11 3:48:41

[特殊字符]【高并发实战】Java Socket + 线程池实现高性能文件上传服务器（附完整源码）[特殊字符]

大家好！今天给大家分享一个 Java Socket 线程池实现的高性能文件上传服务器，支持多客户端并发上传，代码可直接运行，适合面试、项目实战、性能优化学习！ 📌 本文亮点： ✅ 完整可运行代码&a…...

编程日记 2025/9/14 22:02:10

相关文章：