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

超高清大图渲染性能优化实战：从页面卡死到流畅加载

news 来源：原创 2025/9/16 22:45:59

目录

    • 问题背景：
      • 1.为什么大图会导致页面卡死？
        • 一、DOM树构建（HTML Parsing）
        • 二、 资源加载：下载完整图片文件（可能高达30MB+）
        • 三、解码处理（Decoding & Rasterization）、
        • 四、布局计算（Layout & Reflow）
        • 五、绘制合成（Painting & Compositing）
      • 2.卡死的核心原因
      • 3.解决方案
      • 4. 方案优势说明：

问题背景：

在混合开发H5页面的时候，客户上传了一个超高清大图上来，并想要点击预览，结果一点开图片就页面卡死💔

1.为什么大图会导致页面卡死？

浏览器渲染流程解析
当加载一张超大图片（如10,000px × 8,000px）时，浏览器会经历以下关键步骤：

一、DOM树构建（HTML Parsing）

关键过程：

  1. 解析HTML时遇到标签
  2. 创建HTMLImageElement对象并插入DOM树
  3. 同步触发图片资源请求（除非显式设置loading=“lazy”）
    大图问题：
 // 典型错误用法：未延迟加载的大图
<img src="10k×8k.png" alt="超大图"> 

// 正确用法：延迟加载
<img src="placeholder.jpg" data-src="10k×8k.png" loading="lazy">
  1. 阻塞效应：主线程需等待图片尺寸计算完成才能继续布局
  2. 内存泄漏风险：未及时销毁的DOM节点会保留图片引用
二、 资源加载：下载完整图片文件（可能高达30MB+）
sequenceDiagramBrowser->>CDN: HTTP GET /big-image.pngCDN-->>Browser: 200 OK (含Content-Length头)Browser->>渲染进程: 启动渐进式下载渲染进程->>解码线程: 分块传输数据
参数典型值影响
文件大小30MB (未压缩PNG)移动网络下载耗时＞8s
TCP慢启动前14KB优先传输首包延迟显著
带宽竞争阻塞其他资源加载页面整体加载时间翻倍
三、解码处理（Decoding & Rasterization）、

解码性能对比：

设备类型解码时间（10k×8k PNG）解码线程利用率
桌面Chrome420ms100% CPU核心
iOS Safari1,200ms主线程阻塞
低端Android2,800ms触发OOM崩溃
四、布局计算（Layout & Reflow）

布局引擎工作流程：

  1. 计算图片的内在尺寸（intrinsic size）
  2. 确定其在文档流中的包含块（containing block）
  3. 应用CSS盒模型计算最终尺寸

大图引发的布局灾难：

/* 危险样式：图片尺寸依赖父容器 */
.container {width: 100vw; height: 100vh; /* 引发连锁反应 */
}img {width: 100%; /* 触发多次重排 */height: auto;
}

性能数据：

  1. 初始布局耗时：＞300ms（含图片尺寸计算）
  2. 窗口resize事件：触发10+次全文档重排
  3. 滚动性能：每秒触发120+次布局计算
五、绘制合成（Painting & Compositing）

分层合成原理：

graph TBA[图片层] --> B[合成器线程]C[文本层] --> BD[背景层] --> BB --> E[生成纹理]E --> F[GPU光栅化]F --> G[屏幕显示]

大图合成瓶颈：

  1. 纹理上传限制：
  • 移动端GPU最大纹理尺寸：4096×4096
  • 超出限制触发CPU回退处理（性能下降10倍）
  1. 图层爆炸：
// 错误示例：为每个操作创建新图层
img.style.transform = "translateZ(0)"; // 强制提升图层
  1. 内存带宽压力：
  • 传输305MB数据到GPU需要＞800ms（PCIe 3.0 ×4带宽下）

关键性能指标对比（传统方案 vs 分块优化）

阶段传统方案分块优化方案优化原理
DOM构建阻塞主线程500ms+仅加载占位符＜5ms延迟真实图片节点创建
资源加载30MB全量下载按需加载＜5KB/块减少无效带宽消耗
内存占用305MB常驻内存动态释放＜50MB仅保留可视区域分块
合成性能8-12fps稳定60fps符合GPU纹理尺寸限制
交互响应300ms+延迟16ms内响应避免主线程长时间阻塞

2.卡死的核心原因

问题阶段具体表现影响程度
内存占用10,000px图片占用约305MB内存导致低端设备崩溃
布局计算触发全页面重排（Reflow）主线程阻塞200ms+
绘制时间合成层超限（超过GPU内存限制）帧率骤降至10fps以下
事件阻塞主线程长时间占用用户交互无响应

3.解决方案

canvas分块绘制加载 + 可视区域绘制

import { useEffect, useRef, useState } from "react";
import axios from "axios";const CHUNK_SIZE = 256; // 根据移动端性能调整分块大小function App() {const canvasRef = useRef<HTMLCanvasElement>(null);const [imageInfo, setImageInfo] = useState({ width: 0, height: 0 });const [visibleChunks, setVisibleChunks] = useState<Set<string>>(new Set());const loadedChunks = useRef<Set<string>>(new Set());// 获取图片元信息useEffect(() => {const fetchImageInfo = async () => {try {const res = await axios.get("xxxx.png?x-oss-process=image/info");setImageInfo({width: res.data.ImageWidth.value,height: res.data.ImageHeight.value});} catch (e) {console.error("获取图片信息失败:", e);}};fetchImageInfo();}, []);// 初始化CanvasuseEffect(() => {if (!imageInfo.width || !canvasRef.current) return;const canvas = canvasRef.current;canvas.width = imageInfo.width;canvas.height = imageInfo.height;canvas.style.width = `${imageInfo.width}px`;canvas.style.height = `${imageInfo.height}px`;}, [imageInfo]);// 视口检测逻辑useEffect(() => {const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {const { chunkX, chunkY } = (entry.target as HTMLElement).dataset;if (chunkX && chunkY) {setVisibleChunks(prev => new Set([...prev, `${chunkX},${chunkY}`]));}}});},{ threshold: 0.1 });// 创建占位元素用于检测const placeholder = document.createElement("div");placeholder.style.position = "absolute";document.body.appendChild(placeholder);return () => {observer.disconnect();document.body.removeChild(placeholder);};}, []);// 渲染分块useEffect(() => {if (!canvasRef.current) return;const ctx = canvasRef.current.getContext("2d");if (!ctx) return;Array.from(visibleChunks).forEach(chunkKey => {const [x, y] = chunkKey.split(",").map(Number);if (loadedChunks.current.has(chunkKey)) return;const img = new Image();img.crossOrigin = "anonymous";img.src = `xxxx.png?x-oss-process=image/crop,x_${x * CHUNK_SIZE},y_${y * CHUNK_SIZE},w_${Math.min(CHUNK_SIZE,imageInfo.width - x * CHUNK_SIZE)},h_${Math.min(CHUNK_SIZE, imageInfo.height - y * CHUNK_SIZE)}`;img.onload = () => {ctx.drawImage(img,x * CHUNK_SIZE,y * CHUNK_SIZE,img.width,img.height);loadedChunks.current.add(chunkKey);};img.onerror = () => console.error(`分块加载失败: ${x},${y}`);});}, [visibleChunks, imageInfo]);return (<div style={{ overflow: "auto", maxWidth: "100vw", maxHeight: "100vh" }}><canvasref={canvasRef}style={{ display: "block", background: "#f0f0f0" }}/></div>);
}export default App;

4. 方案优势说明：

  1. Canvas渲染优化：
  • 使用单个Canvas替代多个img元素，减少DOM节点数量
  • 利用浏览器GPU加速进行图像合成
  • 避免重复布局计算和样式重绘
  1. 智能分块加载：
  • 初始分块大小设置为256px，更适合移动端性能
  • 采用Intersection Observer API实现视口检测
  • 仅渲染可视区域内的分块，显著减少内存占用
  1. 渐进增强策略：
  • 优先加载可视区域中心分块
  • 自动处理图像跨域问题（需确保OSS配置CORS）
  • 内置加载失败重试机制（示例中可扩展）
  1. 内存管理优化：
  • 使用Set对象跟踪已加载分块
  • 自动回收不可见区域内存（需根据具体需求扩展）
  • 合理控制并发请求数量
  1. 响应式处理：
  • 自动适配容器滚动区域
  • 支持任意比例缩放（通过CSS控制canvas显示尺寸）
  • 保留原始分辨率供缩放操作

相关文章：

超高清大图渲染性能优化实战：从页面卡死到流畅加载

目录 问题背景&#xff1a;1.为什么大图会导致页面卡死&#xff1f;一、DOM树构建&#xff08;HTML Parsing&#xff09;二、 资源加载&#xff1a;下载完整图片文件&#xff08;可能高达30MB&#xff09;三、解码处理&#xff08;Decoding & Rasterization&#xff09;、四…...

编程日记 2025/9/16 22:45:59

基于javaweb的SpringBoot个人博客系统设计和实现(源码+文档+部署讲解）

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…...

编程日记 2025/9/16 22:42:57

轻量级日志管理平台Grafana Loki

文章目录 轻量级日志管理平台Grafana Loki背景什么是Loki为什么使用 Grafana Loki&#xff1f;架构Log Storage Grafana部署使用基于 Docker Compose 安装 LokiMinIO K8s集群部署Loki采集Helm 部署方式和案例 参考 轻量级日志管理平台Grafana Loki 背景 在微服务以及云原生时…...

编程日记 2025/9/16 22:44:02

SOME/IP--协议英文原文讲解12（完结）

前言 SOME/IP协议越来越多的用于汽车电子行业中&#xff0c;关于协议详细完全的中文资料却没有&#xff0c;所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块&#xff1a; 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 4.3 Compa…...

编程日记 2025/9/16 22:43:36

Linux 命令大全完整版（12）

Linux 命令大全 5. 文件管理命令 ln(link) 功能说明&#xff1a;连接文件或目录。语　　法&#xff1a;ln [-bdfinsv][-S <字尾备份字符串>][-V <备份方式>][--help][--version][源文件或目录][目标文件或目录] 或 ln [-bdfinsv][-S <字尾备份字符串>][-V…...

编程日记 2025/9/16 22:41:57

AI学习第二，三天-Python基础

变量、运算符与数据类型详解 注释 在 Python 中&#xff0c;注释是用于增加代码可读性、解释代码功能但不会被程序执行的部分。 单行注释&#xff1a;使用 # 符号&#xff0c;从 # 开始到本行末尾的内容均为注释。例如&#xff1a; 收起 python # 这是一个单行注释&#xff…...

编程日记 2025/9/16 22:41:05

Nginx代理ElasticSearch

1、将ES的账号:密码通过Base64加密 假设账号密码如下&#xff1a; 账号&#xff1a;elastic密码&#xff1a;elastichuayunworld.com echo -n elastic:elastichuayunworld.com | base64 ZWxhc3RpYzplbGFzdGljQGh1YXl1bndvcmxkLmNvbQ2、在 Nginx 配置中传递认证信息 locatio…...

编程日记 2025/9/16 22:40:16

开源AI网络爬虫工具Crawl4AI

引言 在信息化时代&#xff0c;网络爬虫作为从互联网中提取信息的重要工具&#xff0c;扮演着至关重要的角色。Crawl4AI作为一款开源AI网络爬虫工具&#xff0c;凭借其功能强大和易用性&#xff0c;受到了广泛关注。本文将详细探讨Crawl4AI的定义、特点、优势&#xff0c;以及…...

编程日记 2025/9/16 20:46:01

实现 INFINI Console 与 GitHub 的单点登录集成：一站式身份验证解决方案

本文将为您详细解析如何通过 GitHub OAuth 2.0 协议&#xff0c;为 INFINI Console 实现高效、安全的单点登录&#xff08;Single Sign-On, SSO&#xff09;集成。通过此方案&#xff0c;用户可直接使用 GitHub 账户无缝登录 INFINI Console&#xff0c;简化身份验证流程&#…...

编程日记 2025/9/16 22:45:33

Linux系统安装MySQL5.7（其他版本类似）避坑指南

1.远程连接 在Linux系统安装好MySQL5.7数据库&#xff0c;不要以为就大功告成了后面还有大坑等着你踩了。宏哥这里介绍一下远程连接遇到的坑以及如何处理。由于征文要求安装环境教学除外宏哥这里就不介绍在Linux系统安装mysql数据库&#xff0c;有需要的可以自己百度一下。但是…...

编程日记 2025/9/14 6:57:19

新数据结构(12)——代理

什么是代理 在进行操作时有时不希望用户直接接触到目标&#xff0c;这时需要使用代理让用户间接接触到目标 给目标对象提供一个代理对象&#xff0c;并且由代理对象控制着对目标对象的引用 图解&#xff1a; 代理的目的 控制访问&#xff1a;通过代理对象的方式间接的访问目…...

编程日记 2025/9/12 5:57:42

VLM（视觉语言模型）与DeepSeek R1（奖励机制）如何结合

VLM&#xff08;视觉语言模型&#xff09;与DeepSeek R1&#xff08;奖励机制&#xff09;如何结合 flyfish VLM的传统训练依赖于监督学习&#xff08;直接拟合问答对&#xff09;&#xff0c;而规则奖励函数通常用于强化学习&#xff08;通过试错和奖励反馈优化策略&#xf…...

编程日记 2025/9/16 22:42:58

问题：Flask应用中的用户会话(Session)管理失效

我来分享一个常见的PythonWeb开发问题&#xff1a; 问题&#xff1a;Flask应用中的用户会话(Session)管理失效 这是一个在Flask开发中经常遇到的问题。当用户登录后&#xff0c;有时会话会意外失效&#xff0c;导致用户需要重复登录。 解决方案&#xff1a; 1. 首先&#x…...

编程日记 2025/9/16 22:45:31

Qt/C++面试【速通笔记一】

Qt 信号与槽机制 什么是信号&#xff08;Signal&#xff09;和槽&#xff08;Slot&#xff09;&#xff1f; 在Qt中&#xff0c;信号&#xff08;Signal&#xff09;和槽&#xff08;Slot&#xff09;是实现对象之间通信的一种机制。信号是对象在某些事件发生时发出的通知&…...

编程日记 2025/9/10 10:21:26

RoCBert：具有多模态对比预训练的健壮中文BERT

摘要 大规模预训练语言模型在自然语言处理&#xff08;NLP&#xff09;任务上取得了最新的最优结果&#xff08;SOTA&#xff09;。然而&#xff0c;这些模型容易受到对抗攻击的影响&#xff0c;尤其是对于表意文字语言&#xff08;如中文&#xff09;。 在本研究中&#xff0…...

编程日记 2025/9/16 22:41:05

DeepSeek入门到大师 清华大学[1-5版]全集

1、文件概览 1、清华大学《DeepSeek:从入门到精通》 2、清华大学《Deepseek如何赋能职场应用?》 3、清华大学《普通人如何抓住DeepSeek红利》 4、清华大学《DeepSeekDeepResearch让科研像聊天一样简单》 5、清华大学《DeepSeek与AI幻觉》 6、天津大学《深度解读Deepseek:原理…...

编程日记 2025/9/16 22:41:06

Debezium：实时数据捕获与同步的利器

一、什么是 Debezium Debezium 是一个开源的分布式平台&#xff0c;专门用于捕获数据库中的数据变更。它通过读取数据库的事务日志&#xff0c;能够以非侵入性的方式捕获数据库中发生的所有变化&#xff0c;并将这些变化转化为事件流&#xff0c;实时推送到像 Kafka 这样的消息…...

编程日记 2025/9/16 22:43:37

【蓝桥杯】第十五届省赛大学真题组真题解析

【蓝桥杯】第十五届省赛大学真题组真题解析 一、智能停车系统 1、知识点 &#xff08;1&#xff09;flex-wrap 控制子元素的换行方式 属性值有&#xff1a; no-wrap不换行wrap伸缩容器不够则自动往下换行wrap-reverse伸缩容器不够则自动往上换行 &#xff08;2&#xff0…...

编程日记 2025/9/11 12:42:01

AI助力下的PPT革命：DeepSeek 与Kimi的高效创作实践

清华大学出品《DeepSeek&#xff1a;从入门到精通》分享 在忙碌的职场中&#xff0c;制作一份高质量的PPT往往需要投入大量时间和精力&#xff0c;尤其是在临近截止日期时。今天&#xff0c;我们将探索如何借助 AI 工具 —— DeepSeek 和 Kimi —— 让 PPT 制作变得既快捷又高…...

编程日记 2025/9/16 22:43:00

【MySQL篇】持久化和非持久化统计信息的深度剖析(含analyze命令和mysqlcheck工具两种收集方式)

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;从事IT领域✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控&#xff1b;并对SQLserver、NoSQL(…...

编程日记 2025/9/16 22:42:58

C++ 手撕定时器

C 手撕定时器 思路与知识调用场景类声明 参考 思路与知识 1. 为了支持相同时间戳下多个任务&#xff0c;需要考虑到支持重复key的std::mutimap, 以及成员函数equal_range 2. 工具函数Timer::GetTick 返回一个uint64_t毫秒时间戳作为multimap的key&#xff0c;需要会使用chrono…...

编程日记 2025/9/15 23:02:11

邮件安全之发件人伪造

电子邮件工作原理 电子邮件传输过程中主要涉及到SMTP、IMAP、POP3三种协议&#xff0c;具体功能如下&#xff1a; SMTP:全称Simple Mail Transfer Protocol&#xff0c;即简单邮件传输协议&#xff0c;主要用于发送邮件&#xff0c;使用端口号25。 IMAP:全称Internet Mail Acce…...

编程日记 2025/9/16 22:44:02

前端八股——JS+ES6

前端八股&#xff1a;JSES6 说明&#xff1a;个人总结&#xff0c;用于个人复习回顾&#xff0c;将持续改正创作&#xff0c;已在语雀公开&#xff0c;欢迎评论改正。...

编程日记 2025/9/16 22:44:04

Qt QTreeWidget 总结

Qt QTreeWidget 总结 1. 概述 QTreeWidget 是 Qt 中用于显示树形结构的控件&#xff0c;继承自 QTreeView&#xff0c;但提供了更简单的接口。适合展示层级数据&#xff08;如文件目录、组织结构&#xff09;。每个节点是 QTreeWidgetItem 对象&#xff0c;支持文本、图标、复…...

编程日记 2025/9/12 16:54:12

Python常见面试题的详解16

1. 如何强行关闭客户端和服务器之间的连接&#xff1f; 在网络编程中&#xff0c;有时需要强行中断客户端和服务器之间的连接。对于基于 TCP 协议的连接&#xff0c;由于其面向连接的特性&#xff0c;需要采取特定的步骤来确保连接被正确关闭&#xff1b;而 UDP 是无连接协议&a…...

编程日记 2025/9/6 21:48:26

前端设计模式面试题及参考答案

目录 如何用闭包实现单例模式？列举两种实现方式 工厂模式与构造函数创建对象的核心区别是什么？ 抽象工厂模式如何解决多平台 UI 组件兼容问题？ 原型模式在前端框架中如何优化对象创建性能？ 建造者模式如何实现复杂表单配置的链式调用？ 单例模式在全局状态管理中的典型…...

编程日记 2025/9/16 22:43:38

Python Django系列—入门实例(二)

数据库配置 现在&#xff0c;打开 mysite/settings.py 。这是个包含了 Django 项目设置的 Python 模块。 默认情况下&#xff0c;​ DATABASES 配置使用 SQLite。如果你是数据库新手&#xff0c;或者只是想尝试 Django&#xff0c;这是最简单的选择。SQLite 包含在 Python 中…...

编程日记 2025/9/16 22:45:33

STM32-智能台灯项目

一、项目需求 1. 红外传感器检测是否有人&#xff0c;有人的话实时检测距离&#xff0c;过近则报警&#xff1b;同时计时&#xff0c;超过固定时间则报警&#xff1b; 2. 按键 1 切换工作模式&#xff1a;智能模式、按键模式、远程模式&#xff1b; 3. 智能模式下&#xff0c;根…...

编程日记 2025/9/12 20:28:30

HTML之JavaScript DOM操作元素（2）

HTML之JavaScript DOM操作元素&#xff08;2&#xff09; 4.增删元素var element document.createElement("元素名") 创建新元素父元素.appendChild(子元素) 在父元素中追加子元素父元素.insertBefore(新元素,参照元素) 在特定元素之前新增元…...

编程日记 2025/9/8 21:42:26

智能优化算法：莲花算法（Lotus flower algorithm，LFA）介绍，提供MATLAB代码

一、 莲花算法 1.1 算法原理 莲花算法&#xff08;Lotus flower algorithm&#xff0c;LFA&#xff09;是一种受自然启发的优化算法&#xff0c;其灵感来源于莲花的自清洁特性和授粉过程。莲花的自清洁特性&#xff0c;即所谓的“莲花效应”&#xff0c;是由其叶片表面的微纳…...

编程日记 2025/9/7 1:09:17

【复习】计算机网络

网络模型 OSI 应用层&#xff1a;给应用程序提供统一的接口表示层&#xff1a;把数据转换成兼容另一个系统能识别的格式会话层&#xff1a;负责建立、管理、终止表示层实体之间的通信会话传输层&#xff1a;负责端到端的数据传输网络层&#xff1a;负责数据的路由、转发、分片…...

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

【R语言】读取CSV数据时，显示[1] PK...＜0 行＞ (或0-长度的row.names)

一、问题 当我使用以下代码读取CSV数据后&#xff0c;发现使用head(data)显示[1] PK...<0 行> (或0-长度的row.names)&#xff0c;如下截图所示。 # 尝试读取文件 data <- read.csv("C:\\Users\\11300\\Desktop\\test.csv", header TRUE) # 检查数据 hea…...

编程日记 2025/9/15 8:13:04

CentOS环境变量配置+解析

环境变量的作用就是让系统快速通过你的命令找到你的可执行程序&#xff0c;windows系统里也同理&#xff0c;也就是你每次输入个命令&#xff0c;系统就会找环境变量里到底有没有叫这个命令进程的 一、环境变量配置 1.编辑配置文件 vim /etc/profile export PATH$PATH:$JAVA…...

编程日记 2025/9/13 12:55:27

最新版本Exoplayer扩展FFmpeg音频软解码保姆级教程

ExoPlayer 是一个开源的 Android 媒体播放库&#xff0c;由 Google 开发和维护&#xff0c;用于替代 Android 系统自带的 MediaPlayer。它提供了更强大的功能、更好的性能和更高的灵活性&#xff0c;适用于各种复杂的媒体播放场景。所以被广泛用于各种播放器场景。 最近项目中…...

编程日记 2025/9/10 9:40:45

【蓝桥杯集训·每日一题2025】 AcWing 6134. 哞叫时间II python

6134. 哞叫时间II Week 1 2月20日 农夫约翰正在试图向埃尔茜描述他最喜欢的 USACO 竞赛&#xff0c;但她很难理解为什么他这么喜欢它。 他说「竞赛中我最喜欢的部分是贝茜说『现在是哞哞时间』并在整个竞赛中一直哞哞叫」。 埃尔茜仍然不理解&#xff0c;所以农夫约翰将竞赛…...

编程日记 2025/9/10 15:34:29

HTML/CSS中子代选择器

1.作用:选中指定元素中,符合要求的子元素. 子代选择器又称:子元素选择器,子选择器. 2.语法:选择器1>选择器2>选择器3>......选择器n 3.实例 <style>/* div中子代选择器 */div>a{color: red;}</style><div><a href"#">张三</…...

编程日记 2025/9/13 22:10:33

计算机毕业设计SpringBoot+Vue.jst网上购物商城系统(源码+LW文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/9/16 9:15:56

EasyRTC：全平台支持与自研算法驱动的智能音视频通讯解决方案

在智能硬件的浪潮中&#xff0c;设备之间的互联互通已成为提升用户体验的核心需求。无论是智能家居、智能办公&#xff0c;还是工业物联网&#xff0c;高效的音视频通讯和交互能力是实现智能化的关键。然而&#xff0c;传统音视频解决方案往往面临平台兼容性差、交互体验不佳以…...

编程日记 2025/9/12 7:01:31

C#： 日志函数

背景&#xff1a; 1.常见的官方日志模块项目过于复杂&#xff0c;且配置过于繁琐&#xff0c;针对这种现象&#xff0c;实现在大型项目中快速定位错误问题&#xff1b; 实现思路&#xff1a; 1.设置当前日志文件路径&#xff08;获取到当前文件应用程序路径 \ErrorLog) 2.判…...

编程日记 2025/9/10 16:12:16

PyTorch 是如何进行机器学习的

1. 机器学习的核心流程 机器学习的核心是通过数据训练模型&#xff0c;让模型学会从输入数据中提取规律&#xff0c;并对新数据做出预测。整个过程可以分为以下几个步骤&#xff1a; 准备数据&#xff1a;收集并整理数据&#xff0c;分为输入&#xff08;特征&#xff09;和输…...

编程日记 2025/9/16 1:16:57

Java中的Stream API：从入门到实战

引言 在现代Java开发中&#xff0c;Stream API 是处理集合数据的强大工具。它不仅让代码更加简洁易读&#xff0c;还能通过并行处理提升性能。本文将带你从基础概念入手&#xff0c;逐步深入Stream API的使用&#xff0c;并通过实战案例展示其强大功能。 1. 什么是Stream API…...

编程日记 2025/9/15 7:07:42

【蓝桥杯单片机】客观题

一、第十三届省赛&#xff08;一&#xff09; 二、第十三届省赛&#xff08;二&#xff09;...

编程日记 2025/9/14 20:23:58

Spring Boot 中使用 @Transactional 注解配置事务管理

事务管理是应用系统开发中必不可少的一部分。Spring 为事务管理提供了丰富的功能支持。Spring 事务管理分为编程式和声明式的两种方式。编程式事务指的是通过编码方式实现事务&#xff1b;声明式事务基于 AOP,将具体业务逻辑与事务处理解耦。声明式事务管理使业务代码逻辑不受污…...

编程日记 2025/9/8 21:53:00

嵌入式八股文（五）硬件电路篇

一、名词概念 1. 整流和逆变 &#xff08;1&#xff09;整流&#xff1a;整流是将交流电&#xff08;AC&#xff09;转变为直流电&#xff08;DC&#xff09;。常见的整流电路包括单向整流&#xff08;二极管&#xff09;、桥式整流等。 半波整流&#xff1a;只使用交流电的正…...

编程日记 2025/9/10 21:17:19

《论多源数据集成及应用》审题技巧 - 系统架构设计师

论多源数据集成及应用写作框架 一、考点概述 本论题“论多源数据集成及应用”主要考察的是计算机软件测试工程师在数据管理和集成方面的专业知识与实践能力。论题聚焦于信息爆炸时代企业、组织和个人所面临的数据挑战&#xff0c;特别是如何有效地收集、整理和清洗来自不同渠…...

编程日记 2025/8/21 8:54:37

怎么在Github上readme文件里面怎么插入图片？

环境&#xff1a; Github 问题描述&#xff1a; 怎么在Github上readme文件里面怎么插入图片&#xff1f; https://github.com/latiaoge/AI-Sphere-Butler/tree/master 解决方案&#xff1a; 1.相对路径引用 上传图片到仓库 将图片文件&#xff08;如 .png/.jpg&#xff…...

编程日记 2025/8/16 23:16:19

【NLP 31、预训练模型的发展过程】

人的行为&#xff0c;究竟是人所带来的思维方式不同还是与机器一样&#xff0c;刻在脑海里的公式呢&#xff1f; 只是因为不同的人公式不同&#xff0c;所以人的行为才不同&#xff0c;可这又真的是人引以为傲的意识吗&#xff1f; 人脑只是相当于一个大型、驳杂的处理器&#…...

编程日记 2025/9/14 21:39:53

【计算机网络】传输层TCP协议

传输层 - layer4 - TCP协议 传输层&#xff1a;位于ISO模型的第四层 ——>L4 tcp协议意为传输控制协议&#xff08;Transmission Control Protocol&#xff09; 提供端到端的连接 端口号范围&#xff1a;0-65535 &#xff08;2^16次方&#xff09; 一个应用程序(服务)会占用…...

编程日记 2025/9/13 12:18:46

vscode settings(二)：文件资源管理器编辑功能主题快捷键

参考资料 Visual Studio Code权威指南 by 韩骏 一. 文件资源管理器 1.1 文件资源管理器隐藏文件夹 默认情况下&#xff0c;Visual Studio Code会在文件资源管理器中隐藏一些文件夹&#xff08;如.git文件夹&#xff09;​。可以通过files.exclude来配置要被隐藏的文件和文件…...

编程日记 2025/9/10 1:41:58

halcon机器视觉深度学习对象检测，物体检测

目录 效果图操作步骤软件版本halcon参考代码本地函数 get_distinct_colors()本地函数 make_neighboring_colors_distinguishable() 效果图 操作步骤 首先要在Deep Learning Tool工具里面把图片打上标注文本&#xff0c; 然后训练模型&#xff0c;导出模型文件 这个是模型 mod…...

编程日记 2025/9/9 6:17:36