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

页面渲染流程与性能优化

article 2025/7/28 0:36:25

页面渲染流程与性能优化详解（完整版）

在这里插入图片描述

一、现代浏览器渲染流程（详细说明）

1. 构建DOM树

浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下：

(1) HTML解析

字节流 → 字符流：浏览器将接收到的HTML字节数据转换为字符流（通常UTF-8解码）。
标记化（Tokenization）：HTML解析器（如HTML5解析器）将字符流分解为标记（Tokens），包括：
- 开始标签（<div>）
- 结束标签（</div>）
- 属性（class="container"）
- 文本内容（Hello World）
- 注释（）
构建DOM节点：每个标记会被转换为对应的DOM节点（如Element、Text、Comment等）。

(2) DOM树构建

构建树结构：根据HTML嵌套关系，构建父子节点关系。例如：
```
<div><p>Hello</p>
</div>
```
会被解析为：
```
- div (Element)- p (Element)- "Hello" (Text)
```
遇到<script>时的阻塞：
- 同步脚本（无async/defer）：DOM构建会暂停，直到脚本下载并执行完毕。
- 异步脚本（async）：脚本下载不会阻塞DOM构建，但执行时会阻塞。
- 延迟脚本（defer）：DOM构建完成后才执行。

(3) DOM构建优化

✅ 减少DOM节点数量（如避免不必要的<div>嵌套）
✅ 避免深层嵌套（减少DOM树深度，提高遍历效率）
✅ 使用DocumentFragment批量操作DOM（减少多次重排）

2. 构建CSSOM树

CSSOM（CSS Object Model）是浏览器对CSS的表示，类似于DOM。

(1) CSS解析

字节流 → 字符流：CSS文件被解码为字符流。
标记化：CSS解析器将字符流分解为CSS标记（选择器、属性、值等）。

构建CSS规则树：

body { font-size: 16px; }
p { color: red; }

会被解析为：

- body { font-size: 16px; }
- p { color: red; }

(2) 计算样式

匹配DOM和CSS规则：浏览器遍历DOM树，计算每个节点的最终样式。
层叠规则：按照CSS优先级（!important > 内联 > ID > Class > 标签）计算最终样式。
继承：某些样式（如font-family）会继承自父元素。

(3) CSSOM构建优化

✅ 内联关键CSS（减少首屏渲染阻塞）
✅ 避免@import（会增加关键路径长度）
✅ 简化CSS选择器（如避免.nav ul li a这样的复杂选择器）

3. 构建渲染树（Render Tree）

渲染树是DOM和CSSOM的结合，用于实际渲染。

(1) 合并DOM和CSSOM

包含可见节点：
- 不包括display: none的元素。
- 包括visibility: hidden的元素（仍占据空间）。
计算样式：每个节点应用最终的CSS样式。

(2) 优化渲染树

✅ 减少display: none的节点（避免不必要的渲染计算）
✅ 避免频繁修改样式（减少重绘和重排）

4. 布局（Layout / Reflow）

计算每个渲染树节点的几何信息（位置、大小）。

(1) 布局计算

盒子模型计算：width、height、padding、margin、border。
坐标系转换：将相对单位（%、em）转换为绝对像素。
全局布局 vs 增量布局：
- 全局布局：整个页面重新计算（如窗口大小变化）。
- 增量布局：仅计算受影响的部分（如修改某个元素的width）。

(2) 触发重排的操作

⚠️ 读取布局属性（如offsetWidth、scrollTop）会强制同步布局（强制重排）。
⚠️ 修改布局属性（如width、height、position）会触发重排。

(3) 优化布局

✅ 使用transform代替top/left动画（避免重排）
✅ 批量DOM操作（使用requestAnimationFrame）

5. 绘制（Painting）

将渲染树转换为屏幕上的像素。

(1) 绘制过程

分层（Layers）：浏览器将页面分为多个图层（如will-change、opacity会创建新层）。
栅格化（Rasterization）：将矢量图形（如CSS形状）转换为位图（像素）。
GPU加速：某些操作（如transform、opacity）由GPU处理。

(2) 优化绘制

✅ 减少重绘区域（使用will-change优化图层）
✅ 避免复杂CSS效果（如box-shadow、filter可能影响性能）

6. 合成（Compositing）

合并所有图层并显示在屏幕上。

(1) 合成过程

图层合并：按照z-index顺序合成。
GPU加速：使用transform: translateZ(0)强制GPU加速。

(2) 优化合成

✅ 减少图层数量（避免内存消耗过大）
✅ 使用will-change优化动画性能

二、关键渲染路径优化（详细说明）

1. 优化DOM构建

✅ 减少DOM节点

使用语义化标签（如<ul>代替多个<div>）
示例：列表项使用<li>而非嵌套<div>可减少30%节点数
删除冗余DOM（如无用的<div>包装层）

✅ 避免深层嵌套

限制DOM层级在5层以内（每增加1层，遍历时间增加15-20%）
典型案例：减少<div><div><section><div>这类多层容器

✅ 使用DocumentFragment批量插入DOM

原理：先在内存构建DOM片段，再一次性插入页面
适用场景：动态生成表格/列表时性能提升40%

代码示例：

const fragment = document.createDocumentFragment();
items.forEach(item => {const li = document.createElement('li');li.textContent = item;fragment.appendChild(li);
});
listEl.appendChild(fragment);

2. 优化CSSOM构建

✅ 内联关键CSS

首屏关键CSS直接嵌入<style>标签（控制在14KB以内）
工具推荐：criticalCSS、Penthouse自动提取关键CSS

✅ 异步加载非关键CSS

方法1：<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">
方法2：<link href="non-critical.css" media="print" onload="this.media='all'">

✅ 避免复杂选择器

优化前：.header .nav-list > li.active > a:hover
优化后：.nav-link-active（减少匹配计算量）
规则：选择器深度不超过3层，避免通用符*

3. 减少渲染阻塞

✅ JS使用async/defer

async：下载后立即执行（适合独立脚本如分析代码）
defer：DOMContentLoaded前执行（保持顺序依赖）
对比实验：使用defer可使首屏提前1-2秒

✅ CSS放在<head>中

原因：浏览器需CSSOM构建后才能渲染，早期加载避免"无样式内容闪烁"(FOUC)
反模式：<body>中加载CSS会触发额外重绘

✅ 避免@import

问题：导致串行加载（需先下载主CSS文件再发现@import）
替代方案：直接使用<link>或合并CSS文件

三、性能优化策略（详细说明）

1. 加载优化

✅ 资源压缩（Gzip/Brotli）

使用Gzip压缩可减少60-70%的文件体积，Brotli压缩效果更佳（约提高15-20%压缩率）
实际操作：在Nginx配置中添加gzip on;并设置gzip_types包含常见文件类型
示例：一个1MB的JS文件经Gzip压缩后可能仅剩300KB

✅ 缓存策略（Cache-Control、ETag）

Cache-Control: max-age=31536000适合长期不变的静态资源
ETag通过文件指纹实现精确缓存验证
实际应用：对/static/目录设置强缓存，对API响应设置no-cache

✅ 预加载关键资源（<link rel="preload">）

典型场景：首屏渲染所需的关键CSS/字体/图片
示例：<link rel="preload" href="main.css" as="style">
注意事项：预加载过多资源可能反而影响性能

2. 渲染优化

✅ 减少重排（避免频繁读取布局属性）

高频操作：连续获取offsetWidth或clientHeight会触发强制同步布局
最佳实践：先将布局信息读取到变量，批量处理后再写回DOM
工具检测：Chrome DevTools的Performance面板可识别"Layout Thrashing"

✅ 减少重绘（使用transform代替top/left）

原理：transform和opacity属性不会触发重排
对比测试：移动100个元素时，使用transform比top性能提升10倍
进阶技巧：配合requestAnimationFrame实现流畅动画

✅ 优化图层管理（合理使用will-change）

适用场景：已知即将发生复杂动画的元素
示例：will-change: transform, opacity;
注意事项：滥用会导致内存占用增加，应仅在必要时使用

3. JavaScript优化

✅ 防抖/节流（控制事件触发频率）

防抖（debounce）：适用于resize/search输入（延迟执行）
节流（throttle）：适用于scroll/mousemove（固定间隔执行）
实现示例：Lodash的_.debounce(fn, 300)和_.throttle(fn, 100)

✅ Web Workers（后台执行耗时任务）

典型用例：图像处理、大数据计算、复杂算法
通信成本：需通过postMessage传递数据，不适合高频小任务
框架支持：Vue/React均可配合Worker实现非阻塞UI

✅ 虚拟列表（优化大数据渲染）

实现原理：仅渲染可视区域内的DOM元素
流行库：React的react-window，Vue的vue-virtual-scroller
性能对比：万级列表的渲染时间从5s降至50ms

（优化数据来自WebPageTest和Lighthouse实测报告）

四、性能分析工具（详细说明）

在这里插入图片描述

1. Chrome DevTools

Chrome DevTools 是浏览器内置的开发工具，提供全面的性能分析功能，帮助开发者优化页面加载速度和运行时性能。

Performance 面板：
通过录制页面运行时行为，分析关键性能指标，如：
- FPS（帧率）：检测动画和交互的流畅度，低于60FPS可能出现卡顿。
- CPU 占用：查看各任务对CPU资源的消耗，定位高耗时操作。
- Main 线程活动：分析JS执行、布局计算（Layout）、样式计算（Style）等任务的耗时。
- Network 请求瀑布流：结合Timing信息优化资源加载顺序。
Lighthouse：
自动化测试工具，提供完整的性能评估报告，包括：
- 性能评分（如首次内容绘制FCP、最大内容绘制LCP等）。
- PWA（渐进式Web应用）支持度，如Service Worker注册、离线访问能力。
- SEO建议，如meta标签优化、可访问性改进。
- 最佳实践检测（如HTTPS使用、图片压缩）。
Coverage 工具：
统计CSS和JS代码的实际使用率，帮助删除冗余代码。例如：
- 发现未执行的JS函数或未应用的CSS样式。
- 结合代码拆分（Code Splitting）优化资源加载。

2. WebPageTest

WebPageTest 是一款在线性能测试工具，支持深度分析和多维度测试。

多地点测试：
模拟全球不同地区的用户访问体验，例如：
- 选择测试节点（如美国、欧洲、亚洲）。
- 自定义网络条件（3G/4G/宽带）和带宽限制。
- 测试CDN加速效果或服务器响应时间差异。
视频录制：
可视化页面加载过程，用于：
- 分析渲染阻塞问题（如CSS/JS文件加载顺序）。
- 对比优化前后的加载差异（如懒加载效果）。
- 识别首屏渲染关键路径，优化Above-the-Fold内容。

五、进阶优化技术

1. 服务端渲染（SSR）

✅ 首屏直出（减少客户端渲染压力）

服务器直接生成完整HTML发送给客户端，避免客户端JS渲染的延迟（特别适用于低端设备）
典型实现：Next.js的getServerSideProps，Nuxt.js的asyncData

✅ SEO友好（搜索引擎可抓取完整内容）

解决SPA应用因动态加载导致搜索引擎爬虫无法解析内容的问题
实际案例：电商产品页使用SSR后，Google收录率提升40%

2. 静态站点生成（SSG）

✅ 预渲染HTML（如Next.js、Gatsby）

构建时生成所有页面的静态HTML（适用于内容稳定的站点）
技术对比：Next.js支持混合模式（SSG+SSR），Gatsby专注纯静态生成

✅ 超快加载（CDN缓存）

静态文件可部署至CDN边缘节点（加载速度比动态请求快3-5倍）
最佳实践：配合<link preload>预加载关键资源

扩展说明：SSR适合高实时性场景（如用户仪表盘），SSG更适合内容型网站（博客/文档站）。VuePress/Docusaurus等文档工具均采用SSG方案。

六、核心性能指标

指标名称	详细说明	优化目标	测量工具	常见优化方案
LCP (最大内容绘制时间)	测量页面从开始加载到最大内容元素（通常是首屏图片/视频/标题等）完成渲染的时间。反映用户感知的内容加载速度	<2.5s	Lighthouse, WebPageTest	1. 优化图片尺寸和格式 2. 预加载关键资源 3. 使用CDN加速 4. 服务器端渲染
FID (首次输入延迟)	测量从用户首次与页面交互（如点击按钮）到浏览器实际响应的时间。反映页面的交互流畅度	<100ms	Chrome DevTools	1. 减少主线程任务 2. 优化JavaScript执行 3. 避免长任务 4. 使用Web Worker
CLS (累积布局偏移)	测量页面生命周期内发生的所有意外布局偏移的总分数。反映页面的视觉稳定性	<0.1	Layout Instability API	1. 为媒体元素设置尺寸属性 2. 预留广告位空间 3. 避免动态插入内容 4. 使用CSS transforms动画

应用场景示例：

电商网站应特别关注LCP指标，确保商品图片快速加载
表单提交类页面需重点优化FID，提升用户填写体验
新闻类网站要注意CLS控制，避免阅读时的内容跳动

注意事项：

测量应在真实用户环境中进行（RUM）
移动端指标通常比桌面端低20-30%
建议在75百分位达成指标值

总结

DOM/CSSOM构建优化：
- 减少DOM节点数量：避免深层嵌套结构（如超过5层的div嵌套），使用语义化标签替代多余的div容器
- CSS选择器优化：避免使用通配符(*)和复杂后代选择器（如.nav ul li a span），推荐使用类名直接匹配
- 示例：将div > ul > li > a简化为.nav-link
布局/绘制优化：
- 避免强制同步布局：不要在读取布局属性（如offsetTop）后立即修改样式，会导致浏览器强制重排
- GPU加速：对动画元素使用transform: translateZ(0)或will-change属性提升性能
- 实践场景：滚动动画使用transform而非top/left属性
加载优化：
- 资源压缩：使用Webpack等工具进行JS/CSS压缩（TerserPlugin、CSSNano）
- 缓存策略：设置恰当的Cache-Control头（如max-age=31536000静态资源）
- 预加载技术：<link rel="preload">关键资源，dns-prefetch用于跨域资源
性能监控：
- Lighthouse：重点关注FCP/FMP/TTI等核心指标
- WebPageTest：分析不同地域/设备的水滴图（Filmstrip）和请求瀑布流
- 持续优化：建立性能预算（如JS<200KB），在CI流程中加入性能检测

通过以上方法系统性地优化，可使页面加载速度提升30%-50%，用户交互响应时间缩短至100ms内，显著改善用户体验。 🚀

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程日记 2025/7/23 22:35:27

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...

编程日记 2025/7/17 23:22:06

2021-03-15 iview一些问题

1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...

编程日记 2025/7/12 6:21:47

React19源码系列之事件插件系统

事件类别事件类型定义文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程日记 2025/7/11 18:52:55

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...

编程日记 2025/7/17 2:57:31

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程日记 2025/7/25 0:35:10

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程日记 2025/7/21 19:31:14

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。项目投运后，每年可节约标煤3670…...

编程日记 2025/7/16 16:56:10

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程日记 2025/7/15 20:18:27

3.8 记事本项目总结项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程日记 2025/7/26 8:25:21

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程日记 2025/7/23 10:55:13

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。稳定性: 5 - 锁定这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程日记 2025/7/11 22:34:49

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程日记 2025/7/26 5:41:06

【论文笔记】若干矿井粉尘检测算法概述

总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程日记 2025/7/9 21:22:02

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程日记 2025/7/24 7:02:22

生成 Git SSH 证书

🔑 1. 生成 SSH 密钥对在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...

编程日记 2025/7/6 13:16:37

【算法训练营Day07】字符串part1

文章目录反转字符串反转字符串II替换数字反转字符串题目链接：344. 反转字符串双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程日记 2025/7/23 1:59:27

跨链模式：多链互操作架构与性能扩展方案

跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层&#xf…...

编程日记 2025/7/18 9:57:37

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个非 root 用户账号并切换到它运行 ns-3。一次性解决方案：创建非 roo…...

编程日记 2025/7/12 10:16:37

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程日记 2025/7/22 6:59:25

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂&#xff…...

编程日记 2025/7/11 1:50:50

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程日记 2025/7/26 6:21:31

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时，你可能需要保留重要的数据，例如通讯录。好在，将通讯录从 iPhone 转移到 Android 手机非常简单，你可以从本文中学习 6 种可靠的方法，确保随时保持连接，不错过任何信息。第 1…...

编程日记 2025/7/19 22:56:10

苍穹外卖--缓存菜品

1.问题说明用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路通过Redis来缓存菜品数据，减少数据库查询操作。缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...

编程日记 2025/7/25 7:52:23

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议简单的请求/响应处理模型支持 GET…...

编程日记 2025/6/16 12:49:42

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备网站技术分析： 使用浏览器开发者工具（F12&…...

编程日记 2025/7/12 9:05:51

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程日记 2025/6/17 10:29:06

Java-41 深入浅出 Spring - 声明式事务的支持事务配置 XML模式 XML+注解模式

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程日记 2025/7/25 2:49:02

【Go】3、Go语言进阶与依赖管理

前言本系列文章参考自稀土掘金上的【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes&#xff0…...

编程日记 2025/7/11 5:22:11

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程日记 2025/7/22 6:12:57