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

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

系列文章目录

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.cssstyle2.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.jsscript2.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.pngicon2.pngicon3.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/plaintext/htmltext/cssapplication/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-ControlExpires 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.cssapp.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表格标签全面…...

三维空间全局光照 | 及各种扫盲

Lecture 6 SH for diffuse transport Lecture 7关于 SH for glossy transport 三维空间全局光照 diffuse case和glossy case的区别 在Lambertian模型中&#xff0c;BRDF是一个常数 diffuse case 跟outgoing point无关 glossy case 跟outgoing point有关 &#xff08;Gloss…...

数据库开发常识(10.6)——SQL性能判断标准及索引误区(1)

10.6. 数据库开发常识 作为一名专业数据库开发人员&#xff0c;不但需要掌握数据库开发相关的语法和功能实现&#xff0c;还要掌握专业数据库开发的常识。这样&#xff0c;才能在保量完成工作任务的同时&#xff0c;也保质的完成工作任务&#xff0c;避免了为应用的日后维护埋…...

网络爬虫js逆向之某音乐平台案例

【注意&#xff01;&#xff01;&#xff01;】 前言&#xff1a; - 本章主要讲解某音乐平台的js逆向知识 - 使用关键字搜定位加密入口 - 通过多篇文章【文字案例】的形式系统化进行描述 - 本文章全文进行了脱敏处理 - 详细代码不进行展示&#xff0c;需要则私聊作者 爬虫js逆向…...

Spark--算子执行原理

一、sortByKey SortByKey是一个transformation算子&#xff0c;但是会触发action&#xff0c;因为在sortByKey方法内部&#xff0c;会对每个分区进行采样&#xff0c;构建分区规则&#xff08;RangePartitioner&#xff09;。 内部执行流程 1、创建RangePartitioner part&…...

事件驱动架构(EDA)

事件驱动架构&#xff08;Event-Driven Architecture, EDA&#xff09;是一种软件架构模式&#xff0c;其中系统的行为由事件的产生和处理驱动。在这种架构中&#xff0c;系统的组件通过事件进行交互&#xff0c;而不是通过直接的调用或者请求响应方式。 关键概念 事件&#x…...

C++ 入门速通-第5章【黑马】

内容来源于&#xff1a;黑马 集成开发环境&#xff1a;CLion 先前学习完了C第1章的内容&#xff1a; C 入门速通-第1章【黑马】-CSDN博客 C 入门速通-第2章【黑马】-CSDN博客 C 入门速通-第3章【黑马】-CSDN博客 C 入门速通-第4章【黑马】-CSDN博客 下面继续学习第5章&…...

2025春招,深度思考MyBatis面试题

大家好&#xff0c;我是V哥&#xff0c;2025年的春招马上就是到来&#xff0c;正在准备求职的朋友过完年&#xff0c;也该收收心&#xff0c;好好思考一下自己哪些技术点还需要补一补了&#xff0c;今天 V 哥要跟大家聊的是MyBatis框架的问题&#xff0c;站在一个高级程序员的角…...

排序算法--冒泡排序

冒泡排序虽然简单&#xff0c;但在实际应用中效率较低&#xff0c;适合小规模数据或教学演示。 // 冒泡排序函数 void bubbleSort(int arr[], int n) {for (int i 0; i < n - 1; i) { // 外层循环控制排序轮数for (int j 0; j < n - i - 1; j) { // 内层循环控制每轮比…...

简易C语言矩阵运算库

参考网址&#xff1a; 异想家纯C语言矩阵运算库 - Sandeepin - 博客园 这次比opencv快⑥倍&#xff01;&#xff01;&#xff01; 参考上述网址&#xff0c;整理了一下代码&#xff1a; //main.c#include <stdio.h> #include <stdlib.h> #include <string.h…...

通过C/C++编程语言实现“数据结构”课程中的链表

引言 链表(Linked List)是数据结构中最基础且最重要的线性存储结构之一。与数组的连续内存分配不同,链表通过指针将分散的内存块串联起来,具有动态扩展和高效插入/删除的特性。本文将以C/C++语言为例,从底层原理到代码实现,手把手教你构建完整的链表结构,并深入探讨其应…...

【分布式架构理论3】分布式调用(2):API 网关分析

文章目录 一、API 网关的作用1. 业务层面&#xff1a;简化调用复杂性2. 系统层面&#xff1a;屏蔽客户端调用差异3. 其他方面&#xff1a; 二、API 网关的技术原理1. 协议转换2. 链式处理3. 异步请求机制1. Zuul1&#xff1a;同步阻塞处理2. Zuul2&#xff1a;异步非阻塞处理 三…...

基于Kamailio、MySQL、Redis、Gin、Vue.js的微服务架构

每个服务使用一台独立的服务器的可行部署方案&#xff0c;尤其是在高并发、高可用性要求较高的场景中。这种方案通常被称为分布式部署或微服务架构。以下是针对您的VoIP管理系统&#xff08;基于Kamailio、MySQL、Redis、Gin、Vue.js&#xff09;的详细分析和建议。 1. 分布式部…...

6S模型的编译问题解决

使用python处理遥感光谱数据&#xff0c;免不了进行大气校正&#xff0c;基本上免费的就是使用Py6s&#xff0c;而py6s库只是一个接口&#xff0c;还需要自己配置6S模型&#xff0c;可以查到很多资料&#xff0c;6S模型是古老的fortran语言写的&#xff0c;基本配置流程就是安装…...

C++11详解(二) -- 引用折叠和完美转发

文章目录 2. 右值引用和移动语义2.6 类型分类&#xff08;实践中没什么用&#xff09;2.7 引用折叠2.8 完美转发2.9 引用折叠和完美转发的实例 2. 右值引用和移动语义 2.6 类型分类&#xff08;实践中没什么用&#xff09; C11以后&#xff0c;进一步对类型进行了划分&#x…...

实验十四 EL和JSTL

实验十四 EL和JSTL 一、实验目的 1、掌握EL表达式的使用 2、掌握JSTL的使用 二、实验过程 1、在数据库Book中建立表Tbook&#xff0c;包含图书ID&#xff0c;图书名称&#xff0c;图书价格。实现在bookQuery.jsp页面中模糊查询图书&#xff0c;如果图书的价格在50元以上&#…...

为什么在springboot中使用autowired的时候它黄色警告说不建议使用字段注入

byType找到多种实现类导致报错 Autowired: 通过byType 方式进行装配, 找不到或是找到多个&#xff0c;都会抛出异常 我们在单元测试中无法进行字段注入 字段注入通常是 private 修饰的&#xff0c;Spring 容器通过反射为这些字段注入依赖。然而&#xff0c;在单元测试中&…...

DeepSeek大模型介绍、本地化部署与使用!【AI大模型】

一、DeepSeek 是什么&#xff1f; 1.技术定位 专注大模型与AGI研究&#xff0c;开发高性能基座模型&#xff08;如 DeepSeek LLM 系列&#xff09;&#xff0c;支持长文本、多模态、代码生成等复杂任务。 提供开源模型&#xff08;如 DeepSeek-MoE、DeepSeek-V2&#xff09;…...

备考蓝桥杯嵌入式4:使用LCD显示我们捕捉的PWM波

上一篇博客我们提到了定时器产生PWM波&#xff0c;现在&#xff0c;我们尝试的想要捕获我们的PWM波&#xff0c;测量它的频率&#xff0c;我们应该怎么做呢&#xff1f;答案还是回到我们的定时器上。 我们知道&#xff0c;定时器是一个高级的秒表&#xff08;参考笔者的比喻&a…...

智能化转型2.0:从“工具应用”到“价值重构”

过去几年&#xff0c;“智能化”从一个模糊的概念逐渐成为企业发展的核心议题。2024年&#xff0c;随着生成式AI、大模型、智能体等技术的爆发式落地&#xff0c;中国企业正式迈入智能化转型的2.0时代。这一阶段的核心特征是从单一场景的“工具应用”转向全链条的“价值重构”&…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...