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

【HTML性能优化】提升网站加载速度：GZIP、懒加载与资源合并

news 来源：原创 2025/5/14 0:59:04

系列文章目录

01-从零开始学 HTML：构建网页的基本框架与技巧
02-HTML常见文本标签解析：从基础到进阶的全面指南
03-HTML从入门到精通：链接与图像标签全解析
04-HTML 列表标签全解析：无序与有序列表的深度应用
05-HTML表格标签全面解析：从基础到高级优化技巧
06-HTML表单深度解析：GET 和 POST 提交方法
07-HTML 表单控件类型大全：文本框、密码框、文件上传全掌握
08-前端表单验证终极指南：HTML5 内置验证 + JavaScript 自定义校验
09-告别页面刷新！如何使用AJAX和FormData优化Web表单提交
10-告别 HTML 错误嵌套！快速掌握标签嵌套技巧
11-HTML表格布局全面解析：实用技巧与替代方案全攻略
12-从零开始掌握 Flexbox 和响应式布局：现代前端开发必学技巧
13-深入剖析 HTML5 新特性：语义化标签和表单控件完全指南
14-HTML5 技术深度解读：本地存储与地理定位的最佳实践
15-HTML5 Canvas 与 SVG：让网页图形与动画活跃起来
16-掌握 HTML5 多媒体标签：如何在所有浏览器中顺利嵌入视频与音频
17-HTML前端必学：响应式图片设计与性能优化技巧详解
18-【HTML性能优化】提升网站加载速度：GZIP、懒加载与资源合并

文章目录

  • 系列文章目录
  • 前言
  • 一、减少 HTTP 请求与资源合并
    • 1.1 合并 CSS 与 JavaScript 文件
      • 1.1.1 合并 CSS 文件
        • 示例代码
      • 1.1.2 合并 JavaScript 文件
        • 示例代码
    • 1.2 使用图像雪碧图减少请求次数
      • 1.2.1 创建雪碧图
        • 示例代码
  • 二、延迟加载技术与懒加载
    • 2.1 图片与资源的懒加载（`loading="lazy"`）
      • 2.1.1 使用 `loading="lazy"` 实现图片懒加载
        • 示例代码
      • 2.1.2 使用懒加载提升页面加载性能
        • 示例代码（视频懒加载）
    • 2.2 如何实现懒加载优化页面加载速度
      • 2.2.1 使用JavaScript实现懒加载
        • 示例代码
      • 2.2.2 Intersection Observer API的优势
        • 优势总结
      • 2.2.3 图片懒加载的最佳实践
        • 最佳实践
        • 示例代码：
  • 三、压缩与缓存策略
    • 3.1 使用 GZIP 压缩文件
      • 3.1.1 启用 GZIP 压缩
        • 启用GZIP压缩的配置示例（Apache）
        • 启用GZIP压缩的配置示例（Nginx）
    • 3.2 浏览器缓存与缓存控制
      • 3.2.1 设置缓存头
        • 示例配置
      • 3.2.2 设置缓存版本控制
        • 示例代码
      • 3.2.3 长缓存与短缓存的选择
        • 示例配置（长缓存与短缓存）
  • 四、总结

前言

在如今的数字化时代，用户对于网站加载速度的期望越来越高。研究表明，网站加载速度直接影响用户体验和转化率，甚至影响搜索引擎排名。若页面加载缓慢，用户可能会选择离开，导致流量流失和损失潜在的收入。因此，优化网站性能是每个开发者的必备技能。

本文将为你介绍如何通过三大核心策略来提升网页性能：减少HTTP请求与资源合并、延迟加载与懒加载技术、以及压缩与缓存策略。这些优化方法不仅能加速网页的加载速度，还能大幅度提高用户体验、减少带宽消耗，并且提升SEO排名。

一、减少 HTTP 请求与资源合并

1.1 合并 CSS 与 JavaScript 文件

在Web开发中，减少HTTP请求的数量是提升页面性能的一个重要策略。每发起一次HTTP请求，都会增加页面加载的延迟。因此，合并多个CSS文件和JavaScript文件成单个文件，是一种常见的优化手段。通过合并文件，我们可以显著减少浏览器的请求次数，提升页面加载速度。

1.1.1 合并 CSS 文件

当网页包含多个CSS文件时，浏览器会发起多个请求来加载这些文件。为了减少这些请求，我们可以将多个CSS文件合并为一个单一的文件。常见的工具如Webpack、Gulp或Grunt可以帮助开发者轻松实现CSS文件的合并。

通过这种方式，浏览器只需发起一次请求来加载所有的CSS样式，而不是逐个加载每个文件，从而节省了加载时间和带宽。

示例代码

假设我们有两个CSS文件style1.css和style2.css：

/* style1.css */
body {background-color: #fff;font-family: Arial, sans-serif;
}

/* style2.css */
h1 {color: #333;
}

合并后的CSS文件styles.css：

body {background-color: #fff;font-family: Arial, sans-serif;
}h1 {color: #333;
}

通过将多个CSS文件合并为一个文件，浏览器只需发起一次请求来加载样式文件。

1.1.2 合并 JavaScript 文件

与CSS文件相似，多个JavaScript文件的加载也会增加HTTP请求的数量。为了优化性能，我们可以将多个JavaScript文件合并成一个文件。这样，浏览器只需要发起一个请求来加载所有的脚本，减少了请求时间。

示例代码

假设我们有两个JavaScript文件script1.js和script2.js：

/* script1.js */
function init() {console.log("Page Initialized");
}

/* script2.js */
function loadData() {console.log("Data Loaded");
}

合并后的JavaScript文件all-scripts.js：

function init() {console.log("Page Initialized");
}function loadData() {console.log("Data Loaded");
}

通过这种方式，浏览器只需发起一个请求加载JavaScript文件，从而减少了请求数，提高了页面加载速度。

1.2 使用图像雪碧图减少请求次数

在网页中，图像资源通常需要发起多个HTTP请求，尤其是当网页包含大量小图标时。这些小图像文件的请求会增加页面加载时间，影响用户体验。为了解决这个问题，可以使用图像雪碧图（Sprite Image）技术。

1.2.1 创建雪碧图

雪碧图将多个小图标或图片合并成一张大图，通过CSS的背景定位技术来显示需要的部分。这样，浏览器只需发起一次请求来加载这张大图，而不必为每个小图标单独发起请求，从而减少HTTP请求次数。

示例代码

假设我们有三个小图标：icon1.png、icon2.png和icon3.png，我们将它们合并成一张雪碧图sprite.png：

/* icon1 */
.icon1 {background-image: url('sprite.png');background-position: 0 0; /* 显示第一个图标 */
}/* icon2 */
.icon2 {background-image: url('sprite.png');background-position: -50px 0; /* 显示第二个图标 */
}/* icon3 */
.icon3 {background-image: url('sprite.png');background-position: -100px 0; /* 显示第三个图标 */
}

在这个例子中，三个图标被合并成了一个大的图片sprite.png，并且通过background-position属性来显示每个图标的不同区域。这样，浏览器只需要请求一次sprite.png，从而减少了图像请求的数量。

二、延迟加载技术与懒加载

2.1 图片与资源的懒加载（loading="lazy"）

懒加载（Lazy Loading）是一种优化技术，它允许网页延迟加载图片、视频等资源，只有当这些资源接近视口时才加载。懒加载能够有效减少初始加载时的资源量，从而加速页面渲染，提高页面的加载速度，尤其对于包含大量图片的页面。

2.1.1 使用 loading="lazy" 实现图片懒加载

HTML5原生支持懒加载功能，开发者只需要在<img>标签中添加loading="lazy"属性，就可以启用图片的懒加载。当图片进入视口时，浏览器会自动加载该图片，而不是在页面加载时一次性加载所有图片，从而显著提升页面加载速度。

示例代码
<img src="image.jpg" alt="example" loading="lazy">

在这个例子中，图片只有在接近用户可视区域时才会加载。这种方式无需使用任何JavaScript代码，只需通过简单的HTML属性即可实现。

2.1.2 使用懒加载提升页面加载性能

懒加载不仅仅适用于图片，对于任何资源（如视频、iframe等）都可以使用类似的技术进行懒加载。通过延迟加载页面中的非核心资源，我们能够让用户更快地看到页面内容，减少初始加载的时间和带宽使用。

示例代码（视频懒加载）
<video loading="lazy" controls><source src="video.mp4" type="video/mp4">
</video>

通过懒加载技术，视频资源会在用户滚动到视频部分时才会开始加载，从而减少了页面的初始加载时间，提升了用户体验。

2.2 如何实现懒加载优化页面加载速度

2.2.1 使用JavaScript实现懒加载

除了HTML5原生支持的loading="lazy"属性，开发者也可以通过JavaScript来实现懒加载，尤其在需要更多控制或对旧版本浏览器提供支持时。JavaScript懒加载通常通过监听用户的滚动事件，结合Intersection Observer API来实现。当资源接近视口时，才开始加载它。

示例代码
const images = document.querySelectorAll('img[data-src]');const loadImage = (image) => {image.src = image.dataset.src;image.onload = () => image.removeAttribute('data-src');
};const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {loadImage(entry.target);observer.unobserve(entry.target);}});
}, { threshold: 0.1 });images.forEach(image => observer.observe(image));

在这个例子中，我们为每个图片元素添加了data-src属性，图片的真实URL存储在该属性中。使用IntersectionObserver监听图片是否进入视口，一旦图片接近视口，JavaScript会将真实的src赋值给<img>标签，触发图片的加载。

2.2.2 Intersection Observer API的优势

IntersectionObserver是一个非常强大的API，它使得懒加载的实现更加高效。传统的懒加载实现依赖于监听滚动事件，而IntersectionObserver提供了一个更高效的方式来检测元素是否进入或离开视口，避免了频繁的DOM操作和事件监听。

优势总结
  1. 高效性能：IntersectionObserver是浏览器原生提供的API，能够在后台异步执行，避免了浏览器主线程的阻塞，提升了性能。
  2. 低延迟：相比传统的滚动事件监听，IntersectionObserver减少了计算和触发延迟，提高了懒加载的实时性。

2.2.3 图片懒加载的最佳实践

虽然懒加载能够显著提高页面加载速度，但也需要注意一些细节和最佳实践，以避免性能问题或影响用户体验。

最佳实践

  1. 渐进加载：对于较大的图片或资源，建议使用低质量的占位图（LQIP）或模糊效果，直到图片加载完成。这样可以在图片加载过程中展示一个视觉占位，减少用户感知的等待时间。

    示例代码：

    <img src="low-quality-placeholder.jpg" data-src="high-quality-image.jpg" alt="example" loading="lazy">

  2. 提前加载关键资源：懒加载适用于非关键资源，对于页面首屏展示的资源，仍然应该尽早加载。避免把重要的视觉元素懒加载，影响页面呈现。

  3. 支持浏览器兼容性：对于不支持loading="lazy"的浏览器，开发者可以使用JavaScript方案来实现懒加载。通过检测浏览器是否支持该功能，动态加载懒加载代码。

示例代码：
if ('loading' in HTMLImageElement.prototype) {// 使用原生懒加载
} else {// 使用自定义JavaScript懒加载
}

三、压缩与缓存策略

3.1 使用 GZIP 压缩文件

GZIP压缩是Web开发中常用的性能优化技术，它通过压缩文本文件（如HTML、CSS、JavaScript等），减少文件传输的大小，提升加载速度。启用GZIP压缩可以显著减少文件的传输时间，减少带宽消耗，从而提高网站的响应速度。

3.1.1 启用 GZIP 压缩

在服务器上启用GZIP压缩后，浏览器将自动请求压缩后的文件。当浏览器接收到压缩文件时，它会自动解压缩，呈现给用户。这种压缩方式对文本内容（如HTML、CSS和JavaScript文件）尤其有效。

启用GZIP压缩的配置示例（Apache）

在Apache服务器中，我们可以通过修改.htaccess文件来启用GZIP压缩。以下是启用GZIP压缩的配置示例：

# 启用GZIP压缩
AddOutputFilterByType DEFLATE text/plain text/html text/css application/javascript

通过这个配置，Apache服务器会对text/plain、text/html、text/css和application/javascript类型的文件进行压缩。压缩后的文件会大大减少文件大小，提升加载速度。

启用GZIP压缩的配置示例（Nginx）

在Nginx中，可以通过修改配置文件来启用GZIP压缩：

# 启用GZIP压缩
gzip on;
gzip_types text/plain text/css application/javascript text/xml application/xml application/xml+rss text/javascript;

Nginx通过这段配置启用了GZIP压缩，并指定了支持压缩的文件类型。这样，传输的文件将会被压缩，有效提升响应速度。

3.2 浏览器缓存与缓存控制

浏览器缓存是指将常用资源（如图片、CSS、JavaScript等）存储在用户的本地浏览器中。通过缓存策略，用户访问网站时无需重新加载这些资源，从而减少请求时间，加速页面加载。

3.2.1 设置缓存头

通过设置Cache-Control和Expires HTTP头，开发者可以指定浏览器缓存资源的时长，避免每次访问页面时都重新加载资源。合理设置缓存头，能够大大提高页面加载速度，尤其对于不经常更新的静态资源（如图片、字体等）。

示例配置

在服务器配置中，Cache-Control指令用于指定资源的缓存策略，而Expires则指定资源的过期时间。

# 设置缓存控制头
<filesMatch "\.(css|js|jpg|jpeg|png|gif|webp)$">Header set Cache-Control "max-age=31536000, public"
</filesMatch>

在上面的配置中，所有CSS、JavaScript和图片资源都被设置了一个1年的缓存时间（31536000秒）。这样，用户在访问网站时，浏览器会从缓存中加载这些资源，而不是每次都发起请求，极大提高了页面加载速度。

3.2.2 设置缓存版本控制

为了确保用户总是加载到最新版本的资源，开发者可以在资源文件的URL中添加版本号或哈希值。这样，浏览器会在资源更新时重新加载文件，而不会使用缓存的旧版本。

示例代码
<link rel="stylesheet" href="style.css?v=1.0">
<script src="app.js?v=1.0"></script>

通过这种方式，当style.css或app.js更新时，版本号（如v=1.1）会发生变化，浏览器就会重新请求并加载最新版本的资源，而不会从缓存中加载旧版本。

3.2.3 长缓存与短缓存的选择

对于更新频率较低的资源（如图像、字体等），可以设置较长的缓存时间；而对于频繁更新的资源（如CSS和JavaScript文件），则需要使用较短的缓存时间或者结合版本号管理文件。

示例配置（长缓存与短缓存）
# 长缓存配置：对于图像资源设置长时间缓存
<filesMatch "\.(jpg|jpeg|png|gif|webp)$">Header set Cache-Control "max-age=31536000, public"
</filesMatch># 短缓存配置：对于CSS和JS文件设置短时间缓存
<filesMatch "\.(css|js)$">Header set Cache-Control "max-age=600, must-revalidate"
</filesMatch>

在这个配置中，图像资源被设置为长时间缓存，而CSS和JavaScript文件则设置为较短的缓存时间（600秒，即10分钟），确保它们在页面更新时能够及时加载最新版本。

四、总结

本文介绍了提升网页性能的三大关键策略，并且提供了具体的实施步骤和代码示例。以下是本文的内容总结：

  1. 减少HTTP请求与资源合并

    • 通过合并CSS和JavaScript文件来减少浏览器发起的HTTP请求，从而加速页面加载时间。
    • 采用图像雪碧图技术将多个小图标合并为一张大图，减少图像请求次数，进一步优化加载速度。

  2. 延迟加载与懒加载技术

    • 使用loading="lazy"属性实现图片和其他资源的懒加载，减少页面初始加载的资源量，优化加载顺序。
    • 结合IntersectionObserver API，通过JavaScript实现更加高效的懒加载，只有当资源接近视口时才加载。

  3. 压缩与缓存策略

    • 启用GZIP压缩技术，通过压缩文本文件减少数据传输量，提高页面加载效率。
    • 通过设置合理的缓存控制策略，利用浏览器缓存避免重复请求，提升资源加载速度。

相关文章：

【HTML性能优化】提升网站加载速度：GZIP、懒加载与资源合并

系列文章目录 01-从零开始学 HTML&#xff1a;构建网页的基本框架与技巧 02-HTML常见文本标签解析&#xff1a;从基础到进阶的全面指南 03-HTML从入门到精通&#xff1a;链接与图像标签全解析 04-HTML 列表标签全解析&#xff1a;无序与有序列表的深度应用 05-HTML表格标签全面…...

编程日记 2025/5/14 0:59:04

C#从XmlDocument提取完整字符串

方法1&#xff1a;通过XmlDocument的OuterXml属性&#xff0c;见XmlDocument类 该方法获得的xml字符串是不带格式的&#xff0c;可读性差 方法2&#xff1a;利用XmlWriterSettings控制格式等一系列参数&#xff0c;见XmlWriterSettings类 例子&#xff1a; using System.IO; …...

编程日记 2025/5/14 0:48:31

wordpress每隔24小时 随机推荐一个指定分类下的置顶内容。

在WordPress中实现每隔24小时随机推荐一个指定分类下的置顶内容&#xff0c;可以通过以下步骤实现&#xff1a; 1. 创建自定义函数 在主题的functions.php文件中添加以下代码&#xff0c;用于创建一个定时任务&#xff0c;每隔24小时随机选择一个置顶文章并存储到选项中&…...

编程日记 2025/5/14 0:31:54

《chatwise：DeepSeek的界面部署》

ChatWise&#xff1a;DeepSeek的界面部署 摘要 本文详细描述了DeepSeek公司针对其核心业务系统进行的界面部署工作。从需求分析到技术实现&#xff0c;再到测试与优化&#xff0c;全面阐述了整个部署过程中的关键步骤和解决方案。通过本文&#xff0c;读者可以深入了解DeepSee…...

编程日记 2025/5/13 23:56:48

HTTP请求响应周期步骤

一个典型的 HTTP 请求/响应周期 从建立连接开始，经过客户端向服务器发送请求、服务器处理请求并返回响应，最终关闭连接。这个过程可以分为多个阶段，以下是详细的步骤： 一、建立连接（TCP连接） 客户端发起连接请求：在HTTP通信中，客户端通常是浏览器，首先通过 DNS 查询…...

编程日记 2025/5/13 23:26:23

synchronized, volatile 在 DCL 的作用

背景 最近在看设计模式&#xff0c;在单例模式的 Double Check Lock&#xff08;DCL&#xff09;中&#xff0c;存在两个关键字&#xff1a;volatile & synchronized。 之前都知道 DCL 怎么写&#xff0c;直接套娃。但是这两关键字在单例里面的作用还没深究过&#xff0c…...

编程日记 2025/5/13 0:15:02

Java进阶笔记（中级）

-----接Java进阶笔记&#xff08;初级&#xff09;----- 目录 集合多线程 集合 ArrayList 可以通过List来接收ArrayList对象&#xff08;因为ArrayList实现了List接口&#xff09; 方法&#xff1a;接口名 柄名 new 实现了接口的类(); PS: List list new ArrayList();遍历…...

编程日记 2025/5/13 22:57:41

人生总有终点，不必好高骛远

夕阳西下&#xff0c;我漫步在河堤上。河水缓缓流淌&#xff0c;倒映着天边最后一抹晚霞。岸边垂柳依依&#xff0c;枝条轻拂水面&#xff0c;荡起一圈圈涟漪。这涟漪由近及远&#xff0c;渐渐消散在暮色中&#xff0c;如同我们每个人在时间长河中泛起的微澜。 记得年少时&…...

编程日记 2025/5/13 10:10:59

C#中堆和栈的区别

C#中的堆&#xff08;Heap&#xff09;和栈&#xff08;Stack&#xff09;详解 基本概念 栈&#xff08;Stack&#xff09; 栈是一个后进先出&#xff08;LIFO&#xff09;的内存结构由系统自动分配和释放存储空间连续&#xff0c;大小固定主要用于存储值类型和对象引用 堆…...

编程日记 2025/5/9 2:51:00

如何利用i18n实现国际化

1.首先新建i18.js文件 // i18n配置 import { createI18n } from vue-i18n // import ElementPlus from element-plus import zhCn from element-plus/es/locale/lang/zh-cn import zh from ./zh-cn import en from ./en import ru from ./ru const messages {en_US: {...en,//…...

编程日记 2025/5/13 23:59:55

SpringMVC响应

第一章&#xff1a;数据处理及跳转 1. 结果跳转方式 ①.ModelAndView 设置ModelAndView对象 , 根据view的名称 , 和视图解析器跳到指定的页面 . <bean id"templateResolver" class"org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolv…...

编程日记 2025/5/13 18:17:45

深入理解特征值与稳定性密码：以弹簧 - 质量 - 阻尼典型二阶系统为例

从看特征值决定稳定性的原因 摘要 本文以弹簧 - 质量 - 阻尼系统这一典型二阶系统为研究对象&#xff0c;深入剖析特征值决定系统稳定性的内在原因。通过详细的数学推导和直观的物理意义阐释&#xff0c;全面揭示了特征值与系统稳定性之间的紧密关联&#xff0c;为理解和分析…...

编程日记 2025/5/14 0:29:21

python pandas 读取合并单元格并保留合并信息

读取合并单元格并保留合并信息 当我们只是使用 pandas 的 read_excel 方法读取 Excel 文件时&#xff0c;我们可能会遇到一个很棘手的问题&#xff1a;合并单元格的信息将会丢失&#xff0c;从而导致我们的数据出现重复或缺失的情况。 在本篇文章中将介绍使用 pandas 正确地读…...

编程日记 2025/5/14 0:33:06

Go-Gin Web 框架完整教程

1. 环境准备 1.1 Go 环境安装 Go 语言&#xff08;或称 Golang&#xff09;是一个开源的编程语言&#xff0c;由 Google 开发。在开始使用 Gin 框架之前&#xff0c;我们需要先安装 Go 环境。 安装步骤&#xff1a; 访问 Go 官网下载页面&#xff1a;https://golang.org/dl…...

编程日记 2025/5/13 23:20:38

机器学习专业毕设选题推荐合集 人工智能

目录 前言 毕设选题 开题指导建议 更多精选选题 选题帮助 最后 前言 大家好,这里是海浪学长毕设专题! 大四是整个大学期间最忙碌的时光&#xff0c;一边要忙着准备考研、考公、考教资或者实习为毕业后面临的升学就业做准备,一边要为毕业设计耗费大量精力。学长给大家整理…...

编程日记 2025/5/13 23:51:38

Java程序员 面试如何介绍项目经验？

项目经历是面试过程中重点问的&#xff0c;但是很多人在回答的时候往往会有问题&#xff1a; 重点是介绍项目&#xff0c;而忽略了个人的经历。 经历是你做了什么、你怎么做的、做完后的结果。例如&#xff1a;项目中的哪些部分是你做的&#xff1f;你是不是核心人员&#xf…...

编程日记 2025/5/14 0:29:22

YONBIP后端环境搭建-IDEA

1、IDEA环境搭建 1.1、插件安装 打开设置窗口&#xff0c;添加自定义插件存储库路径。 https://nccdev.yonyou.com/ide/idea/latest/updatePlugin.xml 在 Marketplace 中搜索 YonBuilder Premium开发者工具 &#xff0c;点击安装。 1.2、Home配置 点击Home配置按钮&#xf…...

编程日记 2025/5/14 0:53:07

Java 微服务实用指南（一）

Java 微服务&#xff1a;基础 要真正理解 Java 微服务&#xff0c;就必须从最基本的东西开始&#xff1a;为人诟病的 Java 大型单体应用是什么&#xff0c;它的优点和缺点是什么。 什么是 Java 大型单体应用&#xff1f; 假设你正在为一家银行或一家金融科技初创公司工作。你为…...

编程日记 2025/5/13 7:47:31

Windows图形界面(GUI)-QT-C/C++ - QT Frame

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 一、概述 二、使用场景 1. 分隔内容区域 2. 装饰性边框 3. 自定义控件容器 三、常见样式 1. 框架形状&#xff08;Shape&#xff09; 2. 框架阴影&#xff08;Shadow&#xff09;…...

编程日记 2025/5/13 23:54:53

优选算法合集————双指针(专题二)

好久都没给大家带来算法专题啦&#xff0c;今天给大家带来滑动窗口专题的训练 题目一&#xff1a;长度最小的子数组 题目描述&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, …...

编程日记 2025/5/14 0:49:54

WebSocket协议里客户端发送给服务器的数据会用4字节的掩码循环异或的分析

首先&#xff0c;我需要回顾WebSocket协议中对掩码处理的具体要求。根据RFC 6455&#xff0c;客户端发送到服务器的帧必须使用掩码&#xff0c;而服务器发送的帧不需要掩码。掩码是4字节的&#xff0c;应用于有效载荷数据&#xff0c;每个字节依次与掩码的对应字节异或&#xf…...

编程日记 2025/5/14 0:20:14

【字节青训营-9】：初探字节微服务框架 Hertz 基础使用及进阶（下）

本文目录 一、Hertz中间件Recovery二、Hertz中间件跨资源共享三、Hertz 响应四、Hertz请求五、Hertz中间件Session 一、Hertz中间件Recovery Recovery中间件是Hertz框架预置的中间件&#xff0c;使用server.Default()可以默认注册该中间件&#xff0c;为Hertz框架提供panic回复…...

编程日记 2025/5/7 11:33:19

新版AndroidStudio 修改 jdk版本

一、问题 之前&#xff0c;在安卓项目中配置JDK和Gradle的过程非常直观&#xff0c;只需要进入Android Studio的File菜单中的Project Structure即可进行设置&#xff0c;十分方便。 如下图可以在这修改JDK: 但是升级AndroidStudio之后&#xff0c;比如我升级到了Android Stu…...

编程日记 2025/5/9 23:15:45

cocos spine执行动画报错Cannot read properties of null (reading ‘data‘)

cocos v3.8.3 当想this.spine.setAnimation(0, "action1", false);播放spine动画时报错↓ 解决方法一&#xff1a; 在setAnimation之前调用this.spine.__preload() 解决方法二&#xff1a; 不要让spine或其父节点通过active显隐...

编程日记 2025/5/14 0:24:59

笔记：新能源汽车零部件功率级测试怎么进行？

摘要：本文旨在梳理主机厂对新能源汽车核心零部件功率级测试需求，通过试验室的主流设备仪器集成，快速实现试验方案搭建，并体现测试测量方案的时效性、便捷性优势。目标是通过提升实现设备的有效集成能力、实现多设备测试过程的有效协同、流程化测试，可快速采集、分析当前数…...

编程日记 2025/5/13 1:46:33

【starrocks学习】之将starrocks表同步到hive

目录 方法 1&#xff1a;通过HDFS导出数据 1. 将StarRocks表数据导出到HDFS 2. 在Hive中创建外部表 3. 验证数据 方法 2&#xff1a;使用Apache Spark同步 1. 添加StarRocks和Hive的依赖 2. 使用Spark读取StarRocks数据并写入Hive 3. 验证数据 方法 3&#xff1a;通过…...

编程日记 2025/5/13 10:07:54

Linux提权--SUDO提权

​sudo​ 是 Linux 中常用的特权管理工具&#xff0c;允许普通用户以其他用户&#xff08;通常是 root 用户&#xff09;的身份运行命令。如果配置不当&#xff0c;攻击者可能通过滥用 sudo​ 权限来提升自己的权限。 一.常见的 sudo 提权方法&#xff1a; 误配置的 sudo 权限&…...

编程日记 2025/5/13 23:13:20

【AIGC提示词系统】基于 DeepSeek R1 + Claude 的新年运势占卜系统设计与实现

提示词在最下方 DeepSeek R1调试了整体的提示词&#xff0c;使用Claude进行渲染 引言 在人工智能与传统文化交融的今天&#xff0c;如何让 AI 充分理解并传递东方玄学文化的精髓&#xff0c;成为一个极具挑战性的课题。本文将详细介绍一个基于 Claude 的新年运势占卜系统的设计…...

编程日记 2025/5/13 1:38:21

11. Global Object 全局对象的使用

Global Object 全局对象 1 引言2 制作全局对象3 调用全局对象4 扩展使用1 引言 全局对象适用于大量重复的对象，比如阀门，电机等，如果这些设备的基本逻辑与状态都是一样的，那么就可以使用全局对象的方法来做HMI，省时省力。并且在后期修改的时候只需要修改全局对象即可。 …...

编程日记 2025/5/14 0:33:06

Java synchronized锁升级

偏向锁、轻量级锁和重量级锁是Java中synchronized关键字的三种锁状态&#xff0c;用于优化多线程环境下的性能。以下是它们的简要说明&#xff1a; 1. 偏向锁&#xff08;Biased Locking&#xff09; 目的&#xff1a;减少无竞争时的锁开销。适用场景&#xff1a;只有一个线程…...

编程日记 2025/5/7 20:39:59

【Hadoop】Hadoop的HDFS

这里写目录标题 HDFS概述HDFS产出背景及定义HDFS产生背景HDFS定义 HDFS优缺点HDFS优点HDFS缺点 HDFS组成架构HDFS文件块大小 HDFS的Shell操作常用命令实操准备工作上传下载HDFS直接操作 HDFS的API操作客户端环境准备HDFS的API案例实操HDFS文件上传HDFS文件下载HDFS文件更名和移…...

编程日记 2025/5/13 9:02:50

JAVA异步的TCP 通讯-客户端

一、客户端代码示例 import java.io.IOException; import java.net.InetSocketAddress; import java.nio.ByteBuffer; import java.nio.channels.AsynchronousSocketChannel; import java.nio.channels.CompletionHandler; import java.util.concurrent.ExecutorService; impo…...

编程日记 2025/5/13 11:45:42

4.回归与聚类算法 4.1线性回归

4.1.1 线性回归的原理 1 线性回归应用场景&#xff1a; 房价预测 销售额度预测 金融&#xff1a;贷款额度预测&#xff0c;利用线性回归以及系数分析因子 2 什么是线性回归 1&#xff09; 定义&#xff1a;利用回归方程&#xff08;函数&#xff09;对一个或者多个自变量…...

编程日记 2025/5/13 14:06:08

联想拯救者开机进入bios

如果你的联想拯救者&#xff08;Lenovo Legion&#xff09;笔记本电脑开机后直接进入 BIOS 设置界面&#xff0c;可能是以下原因之一导致的。以下是解决方法&#xff1a; 1. 检查启动顺序 进入 BIOS 后&#xff0c;找到 Boot&#xff08;启动&#xff09;选项卡。检查启动顺序…...

编程日记 2025/5/9 4:29:18

【贪心算法篇】：“贪心”之旅--算法练习题中的智慧与策略（四）

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;贪心算法篇–CSDN博客 文章目录 前言例题1.合并区间2.无重叠的区间3.用最少数量的箭引爆气球…...

编程日记 2025/5/11 15:24:13

Junit5使用教程(3)

第三部分&#xff1a;JUnit 5 进阶 3. 动态测试 一、动态测试是什么&#xff1f; 动态测试&#xff08;Dynamic Test&#xff09;允许在运行时生成测试用例&#xff0c;而不是在编译时通过 Test 静态定义。它通过 TestFactory 注解标记的方法动态生成一组测试用例&#xff0…...

编程日记 2025/5/11 4:53:40

WPS中解除工作表密码保护（忘记密码）

1.下载vba插件 项目首页 - WPS中如何启用宏附wps.vba.exe下载说明分享:WPS中如何启用宏&#xff1a;附wps.vba.exe下载说明本文将详细介绍如何在WPS中启用宏功能&#xff0c;并提供wps.vba.exe文件的下载说明 - GitCode 并按照步骤安装 2.wps中点击搜索&#xff0c;输入开发…...

编程日记 2025/5/8 5:46:28

通向AGI之路：人工通用智能的技术演进与人类未来

文章目录 引言：当机器开始思考一、AGI的本质定义与技术演进1.1 从专用到通用：智能形态的范式转移1.2 AGI发展路线图二、突破AGI的五大技术路径2.1 神经符号整合（Neuro-Symbolic AI）2.2 世界模型架构（World Models）2.3 具身认知理论（Embodied Cognition）三、AGI安全：价…...

编程日记 2025/5/12 23:56:27

kamailio-osp模块

该文档详细讲解了如何在Kamailio中配置和使用OSP模块&#xff08;Open Settlement Protocol Module&#xff09;&#xff0c;以实现基于ETSI标准的安全多边对等互联&#xff08;Secure Multi-Lateral Peering&#xff09;。以下是核心内容的总结&#xff1a; 1. 模块功能 OSP模…...

编程日记 2025/5/13 15:02:32

【Linux网络编程】：URL（encode），HTTP协议，telnet工具

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux网络编程 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 ​ Linux网络编程笔记&#xff1a; https://mp.csdn…...

编程日记 2025/5/11 3:33:29

SpringMVC SpringMVC响应 一、数据处理及跳转

1. 结果跳转方式 ①.ModelAndView 设置ModelAndView对象 , 根据view的名称 , 和视图解析器跳到指定的页面 <bean id"templateResolver" class"org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver"><property name"p…...

编程日记 2025/5/12 8:02:59

C++SLT（三）——list

目录 一、list的介绍二、list的使用list的定义方式 三、list的插入和删除push_back和pop_backpush_front和pop_frontinserterase 四、list的迭代器使用五、list的元素获取六、list的大小控制七、list的操作函数sort和reversemergeremoveremove_ifuniqueassignswap 一、list的介…...

编程日记 2025/5/13 7:58:18

基于Coze平台实现抖音链接提取文案转小红书文案的智能体开发全流程解析

文章目录 引言：跨平台内容运营的AI解法实例最终效果1. 平台特性对比与转化需求分析1.1 用户画像与内容风格对比1.2 文案转化核心需求2. Coze平台技术架构解析2.1 Coze核心能力矩阵2.2 关键技术组件选型3. 智能体工作流设计3.1 完整处理流程3.2 关键节点说明4. 核心模块实现详解…...

编程日记 2025/5/12 19:09:02

32. 最长有效括号

动态规划 dp[i]表示以i下标为结尾的最长有效括号的长度&#xff0c;取dp[i]中的最大值即可。 i从1开始判断&#xff0c;只有s[i])才需要判断&#xff1a; 如果s[i-1](&#xff0c;那么dp[i]dp[i-2]2&#xff0c;注意判断i-2的范围否则&#xff0c;如果dp[i-1]>0&#xff0…...

编程日记 2025/5/9 2:20:12

Linux常见问题解决方法--2

如何反爬 后台对访问进行统计&#xff0c;如果单个 IP 访问超过阈值&#xff0c;予以封锁 后台对访问进行统计&#xff0c;如果单个 session 访问超过阈值&#xff0c;予以封锁 后台对访问进行统计&#xff0c;如果单个 userAgent 访问超过阈值&#xff0c;予以封锁 以上的组…...

编程日记 2025/5/12 17:27:38

STM32H7和F7 主要区别

STM32H7和F7系列是STMicroelectronics推出的高性能ARM Cortex-M微控制器系列&#xff0c;二者在性能、外设和用途上有显著区别。以下是它们的主要区别&#xff1a; 1. 内核与性能 STM32H7&#xff1a; 内核&#xff1a;Cortex-M7&#xff08;单核或双核&#xff0c;部分型号带…...

编程日记 2025/5/12 6:31:07

软件测试丨PyTorch 图像目标检测

随着人工智能和机器学习的飞速发展&#xff0c;图像目标检测技术在各个领域扮演着越来越重要的角色。无论是在安防监控、自动驾驶车辆&#xff0c;还是在医疗影像分析和智能家居中&#xff0c;图像目标检测都发挥着不可或缺的作用。今天&#xff0c;我们将深入探讨其中一种热门…...

编程日记 2025/5/3 11:57:44

利用TensorFlow.js实现浏览器端机器学习：一个全面指南

引言 随着深度学习技术的不断发展&#xff0c;机器学习已从传统的服务器端运算逐渐转向了前端技术。TensorFlow.js 是 Google 推出的一个用于在浏览器中进行机器学习的开源库&#xff0c;它允许开发者在浏览器中直接运行机器学习模型&#xff0c;而无需依赖后端服务器。Tensor…...

编程日记 2025/5/13 12:09:30

全流程安装DeepSeek开源模型

目录 安装Ollama选择大模型安装大模型对话备注 安装Ollama 安装DeepSeek首先需要安装一个Ollama&#xff0c;这个软件相当于运行DeepSeek模型的底层&#xff0c;没有这个底层就没办法跑DeepSeek AI模型。 下载地址&#xff1a; https://ollama.com/点击下载windows版本&…...

编程日记 2025/5/12 15:11:39

VulnHub | Prime - 1

https://vulnhub.com/entry/prime-1,358/https://vulnhub.com/entry/prime-1,358/ 0x01&#xff1a;靶场简介 Prime 1 是 VulHub 中的一台用于 OSCP 考试练习的靶机。通过本靶机&#xff0c;我们可以系统的了解的渗透测试的全流程。本靶机的通关目标如下&#xff1a; Get The…...

编程日记 2025/5/12 4:22:30