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

前端取经路——现代API探索：沙僧的通灵法术

news 来源：原创 2025/8/3 19:32:46

大家好，我是老十三，一名前端开发工程师。在现代Web开发中，各种强大的API就像沙僧的通灵法术，让我们的应用具备了超乎想象的能力。本文将带你探索从离线应用到实时通信，从多线程处理到3D渲染的九大现代Web API，让你的应用获得"通灵"般的超能力。

在前端取经的第七关，我们将探索现代Web API的奇妙世界。就像沙僧虽然不如孙悟空神通广大，但他的通灵法术却能在关键时刻发挥重要作用。同样，这些现代Web API虽然不如框架技术那样引人注目，但它们却是构建强大Web应用的基础。

📚 文章目录

  1. 服务工作线程 - 离线应用的"金身术"
  2. WebSocket - 实时通信的"传心术"
  3. WebRTC - 点对点的"天眼通"
  4. Web Workers - 多线程的"分身术"
  5. 文件API - 本地存取的"袖里乾坤"
  6. WebGL - 3D渲染的"如意变化"
  7. Audio API - 声音控制的"狮吼功"
  8. Web Animation API - 动画控制的"变化术"
  9. Web Components - 组件化的"分身术"

🎯 学习目标

  • 掌握现代Web API的核心概念和使用方法
  • 理解各个API的应用场景和最佳实践
  • 学会在实际项目中合理使用这些API
  • 掌握性能优化和调试技巧

⚡ 性能优化要点

  1. 合理使用缓存策略
  2. 优化资源加载顺序
  3. 使用Web Workers处理复杂计算
  4. 实现渐进式加载
  5. 优化动画性能
  6. 合理使用WebGL和Canvas
  7. 优化音频处理性能
  8. 实现响应式设计

🛡️ 第一难：服务工作线程 - 离线应用的"金身术"

实际应用场景

  1. 离线文档编辑器
  2. 离线游戏应用
  3. 离线地图应用
  4. 离线新闻阅读器

性能优化建议

  1. 使用适当的缓存策略
    • 静态资源使用Cache First
    • API请求使用Network First
    • 图片使用Stale While Revalidate
  2. 优化缓存更新机制
    • 使用版本控制
    • 实现增量更新
    • 清理过期缓存
  3. 优化资源加载
    • 预缓存关键资源
    • 按需加载非关键资源
    • 实现资源压缩

最佳实践

// 1. 缓存策略选择
const cacheStrategy = {static: 'cache-first',api: 'network-first',image: 'stale-while-revalidate'
};// 2. 版本控制
const CACHE_VERSION = 'v1';
const CACHE_NAME = `app-cache-${CACHE_VERSION}`;// 3. 增量更新
self.addEventListener('activate', event => {event.waitUntil(caches.keys().then(cacheNames => {return Promise.all(cacheNames.map(cacheName => {if (cacheName !== CACHE_NAME) {return caches.delete(cacheName);}}));}));
});

🔄 第二难：WebSocket - 实时通信的"传心术"

实际应用场景

  1. 实时聊天应用
  2. 在线协作工具
  3. 实时数据监控
  4. 多人在线游戏

性能优化建议

  1. 实现心跳机制
    • 定期发送心跳包
    • 检测连接状态
    • 自动重连
  2. 消息队列管理
    • 实现消息缓冲
    • 处理消息优先级
    • 实现消息重发
  3. 连接优化
    • 使用压缩
    • 实现断线重连
    • 优化重连策略

最佳实践

// 1. 心跳机制
class WebSocketHeartbeat {constructor(ws, interval = 30000) {this.ws = ws;this.interval = interval;this.timer = null;}start() {this.timer = setInterval(() => {this.ws.send(JSON.stringify({ type: 'ping' }));}, this.interval);}stop() {if (this.timer) {clearInterval(this.timer);this.timer = null;}}
}// 2. 消息队列
class MessageQueue {constructor() {this.queue = [];this.processing = false;}add(message) {this.queue.push(message);this.process();}async process() {if (this.processing) return;this.processing = true;while (this.queue.length > 0) {const message = this.queue.shift();try {await this.send(message);} catch (error) {this.queue.unshift(message);break;}}this.processing = false;}
}// 3. 重连机制
class WebSocketReconnect {constructor(ws, maxAttempts = 5) {this.ws = ws;this.maxAttempts = maxAttempts;this.attempts = 0;}reconnect() {if (this.attempts >= this.maxAttempts) {console.error('达到最大重连次数');return;}this.attempts++;const delay = Math.min(1000 * Math.pow(2, this.attempts), 30000);setTimeout(() => {this.ws.connect();}, delay);}
}

🌐 第三难：WebRTC - 点对点的"天眼通"

实际应用场景

  1. 视频会议系统
  2. 在线教育平台
  3. 远程医疗咨询
  4. 在线游戏

性能优化建议

  1. 音视频质量优化
    • 动态调整码率
    • 优化分辨率
    • 实现自适应流
  2. 网络优化
    • 使用ICE服务器
    • 实现NAT穿透
    • 优化连接建立
  3. 资源管理
    • 控制并发连接
    • 优化内存使用
    • 实现资源释放

最佳实践

// 1. 音视频质量控制
class MediaQualityController {constructor(stream) {this.stream = stream;this.quality = 'high';}setQuality(quality) {const constraints = {video: {width: { ideal: quality === 'high' ? 1280 : 640 },height: { ideal: quality === 'high' ? 720 : 480 },frameRate: { ideal: quality === 'high' ? 30 : 15 }},audio: {sampleRate: quality === 'high' ? 48000 : 24000,channelCount: quality === 'high' ? 2 : 1}};return navigator.mediaDevices.getUserMedia(constraints);}
}// 2. 连接优化
class ConnectionOptimizer {constructor(peerConnection) {this.peerConnection = peerConnection;this.iceServers = [{ urls: 'stun:stun.l.google.com:19302' },{ urls: 'stun:stun1.l.google.com:19302' }];}optimize() {this.peerConnection.setConfiguration({iceServers: this.iceServers,iceTransportPolicy: 'all',bundlePolicy: 'max-bundle',rtcpMuxPolicy: 'require'});}
}// 3. 资源管理
class ResourceManager {constructor() {this.connections = new Map();this.maxConnections = 5;}addConnection(id, connection) {if (this.connections.size >= this.maxConnections) {const oldestConnection = this.connections.keys().next().value;this.removeConnection(oldestConnection);}this.connections.set(id, connection);}removeConnection(id) {const connection = this.connections.get(id);if (connection) {connection.close();this.connections.delete(id);}}
}

👥 第四难：Web Workers - 多线程的"分身术"

实际应用场景

  1. 大数据处理
  2. 复杂计算任务
  3. 图像处理
  4. 实时数据分析

性能优化建议

  1. 任务分配优化
    • 合理划分任务粒度
    • 避免频繁通信
    • 使用Transferable对象
  2. 内存管理
    • 及时释放资源
    • 控制Worker数量
    • 优化数据传输
  3. 错误处理
    • 实现错误恢复
    • 监控Worker状态
    • 优雅降级

最佳实践

// 1. Worker管理器
class WorkerManager {constructor(maxWorkers = navigator.hardwareConcurrency || 4) {this.maxWorkers = maxWorkers;this.workers = new Map();this.taskQueue = new Map();}createWorker(script) {if (this.workers.size >= this.maxWorkers) {throw new Error('达到最大Worker数量限制');}const worker = new Worker(script);const id = Date.now().toString();this.workers.set(id, worker);worker.onmessage = (event) => {const { taskId, result, error } = event.data;const task = this.taskQueue.get(taskId);if (task) {if (error) {task.reject(error);} else {task.resolve(result);}this.taskQueue.delete(taskId);}};return id;}async executeTask(workerId, task, transferable = []) {const worker = this.workers.get(workerId);if (!worker) {throw new Error('Worker不存在');}return new Promise((resolve, reject) => {const taskId = Date.now().toString();this.taskQueue.set(taskId, { resolve, reject });worker.postMessa

相关文章：

前端取经路——现代API探索：沙僧的通灵法术

大家好，我是老十三，一名前端开发工程师。在现代Web开发中，各种强大的API就像沙僧的通灵法术，让我们的应用具备了超乎想象的能力。本文将带你探索从离线应用到实时通信，从多线程处理到3D渲染的九大现代Web API，让你的应用获得"通灵"般的超能力。 在前端取经的第…...

编程日记 2025/8/3 19:32:46

深入了解 ArkTS：HarmonyOS 开发的关键语言与应用实践

随着 HarmonyOS（鸿蒙操作系统）的推出，华为为开发者提供了一套全新的开发工具和编程语言，使得跨设备、跨平台的应用开发成为可能。在这些工具中，ArkTS（Ark TypeScript）作为一种专为 HarmonyOS 设…...

编程日记 2025/8/3 4:22:09

Flask 调试的时候进入main函数两次

在 Flask 开启 Debug 模式时，程序会因为自动重载（reloader）的机制而启动两个进程，导致if __name__ __main__底层的程序代码被执行两次。以下说明其原理与常见解法。 Flask Debug 模式下自动重载机制 Flask 使用的底层服务器 Wer…...

编程日记 2025/7/30 5:55:05

Git 时光机：修改Commit信息

前言 列位看官都知道，Git 的每一次 git commit，其中会包含作者（Author）和提交者（Committer）的姓名与邮箱。有时可能会因为配置错误、切换了开发环境，或者只是单纯的手滑，导致 commi…...

编程日记 2025/7/30 5:55:02

DAY 21 常见的降维算法

知识点回顾： LDA线性判别PCA主成分分析t-sne降维 还有一些其他的降维方式，也就是最重要的词向量的加工，我们未来再说 作业： 自由作业：探索下什么时候用到降维？降维的主要应用？或者让ai给你出题&…...

编程日记 2025/8/3 9:15:56

Docker使用小结

概念 镜像（ Image ） ：相当于一个 root 文件系统；镜像构建时，分层存储、层层构建；容器（ Container ） ：镜像是静态的定义，容器是镜像运行时的实体；…...

编程日记 2025/7/30 9:05:35

kubectl top 查询pod连接数

在 Kubernetes 中，kubectl top 命令默认仅支持查看 Pod 或节点的 CPU/内存资源使用情况，并不直接提供 TCP 连接数的统计功能。若要获取 Pod 的 TCP 连接数，需结合其他工具和方法。以下是具体实现方案： 1. 直接进入容器查看 TCP 连…...

编程日记 2025/8/1 2:00:33

Kubernetes生产实战(十七)：负载均衡流量分发管理实战指南

在Kubernetes集群中，负载均衡是保障应用高可用、高性能的核心机制。本文将从生产环境视角，深入解析Kubernetes负载均衡的实现方式、最佳实践及常见问题解决方案。 一、Kubernetes负载均衡的三大核心组件 1）Service资源：集群内流…...

编程日记 2025/7/30 1:21:18

Git 分支指南

什么是 Git 分支？ Git 分支是仓库内的独立开发线，你可以把它想象成一个单独的工作空间，在这里你可以进行修改，而不会影响主分支（或 默认分支）。分支允许开发者在不影响项目实际版本的情况下，开…...

编程日记 2025/7/30 9:05:29

自动泊车技术—相机模型

一、相机分类及特性 传感器类型深度感知原理有效工作范围环境适应性功耗水平典型成本区间数据丰富度单目相机运动视差/几何先验1m~∞光照敏感1-2W5−5−502D纹理中双目相机立体匹配 (SGM/SGBM算法)0.3m~20m纹理依赖3-5W50−50−3002D稀疏深度多摄像头系统多视角三角测量0.1m~5…...

编程日记 2025/7/31 13:36:18

程序代码篇---esp32视频流处理

文章目录 前言一、ESP32摄像头设置1.HTTP视频流（最常见）2.RTSP视频流3.MJPEG流 二、使用OpenCV读取视频流1. 读取HTTP视频流2. 读取RTSP视频流 三、使用requests库读取MJPEG流四、处理常见问题1. 连接不稳定或断流2. 提高视频流性能2.1降低分辨率2.2跳过…...

编程日记 2025/8/1 8:53:28

数据结构与算法分析实验12 实现二叉查找树

实现二叉查找树 1、二叉查找树介绍2.上机要求3.上机环境4.程序清单(写明运行结果及结果分析)4.1 程序清单4.1.1 头文件 TreeMap.h 内容如下：4.1.2 实现文件 TreeMap.cpp 文件内容如下：4.1.3 源文件 main.cpp 文件内容如下： 4.2 实现展效果示5…...

编程日记 2025/7/30 8:29:37

深入浅出之STL源码分析2_类模版

1.引言 我在上面的文章中讲解了vector的基本操作，然后提出了几个问题。 STL之vector基本操作-CSDN博客 1.刚才我提到了我的编译器版本是g 11.4.0，而我们要讲解的是STL（标准模板库），那么二者之间的关系是什么&#x…...

编程日记 2025/7/30 9:05:23

Docker、Docker-compose、K8s、Docker swarm之间的区别

1.Docker docker是一个运行于主流linux/windows系统上的应用容器引擎，通过docker中的镜像(image)可以在docker中构建一个独立的容器(container)来运行镜像对应的服务； 例如可以通过mysql镜像构建一个运行mysql的容器，既可以直接进入该容器命…...

编程日记 2025/8/1 1:47:21

【Linux】线程的同步与互斥

目录 1. 整体学习思维导图 2. 线程的互斥 2.1 互斥的概念 2.2 见一见数据不一致的情况 2.3 引入锁Mutex(互斥锁/互斥量) 2.3.1 接口认识 2.3.2 Mutex锁的理解 2.3.3 互斥量的封装 3. 线程同步 3.1 条件变量概念 3.2 引入条件变量Cond 3.2.1 接口认识 3.2.2 同步的…...

编程日记 2025/8/1 5:42:09

C++发起Https连接请求

需要下载安装openssl //stdafx.h #pragma once #include<iostream> #include <openssl/ssl.h> #include <openssl/err.h> #include <iostream> #include <string>#pragma comment(lib, "libssl.lib") #pragma comment(lib, "lib…...

编程日记 2025/8/2 16:23:18

Linux 内核链表宏的详细解释

&#x1f527; Linux 内核链表结构概览 Linux 内核中的链表结构定义在头文件 <linux/list.h> 中。核心结构是&#xff1a; struct list_head {struct list_head *next, *prev; }; 它表示一个双向循环链表的节点。链表的所有操作都围绕这个结构体展开。 &#x1f9e9; …...

编程日记 2025/7/30 9:05:15

[架构之美]Spring Boot集成MyBatis-Plus高效开发（十七）

[架构之美]Spring Boot集成MyBatis-Plus高效开发&#xff08;十七&#xff09; 摘要&#xff1a;本文通过图文代码实战&#xff0c;详细讲解Spring Boot整合MyBatis-Plus全流程&#xff0c;涵盖代码生成器、条件构造器、分页插件等核心功能&#xff0c;助你减少90%的SQL编写量…...

编程日记 2025/7/30 9:05:14

游戏引擎学习第270天:生成可行走的点

回顾并为今天的内容定下基调 今天的计划虽然还不完全确定&#xff0c;可能会做一些内存分析&#xff0c;也有可能暂时不做&#xff0c;因为目前并没有特别迫切的需求。最终我们会根据当下的状态随性决定&#xff0c;重点是持续推动项目的进展&#xff0c;无论是 memory 方面还…...

编程日记 2025/8/1 16:35:35

批量统计PDF页数，统计图像属性

软件介绍&#xff1a; 1、支持批量统计PDF、doc\docx、xls\xlsx页数 2、支持统计指定格式文件数量&#xff08;不填格式就是全部&#xff09; 3、支持统计JPG、JPEG、PNG图像属性 4、支持统计多页TIF页数、属性 5、支持统计PDF、JPG画幅 统计图像属性 「托马斯的文件助手」…...

编程日记 2025/7/31 14:43:41

QT Creator配置Kit

0、背景&#xff1a;qt5.12.12vs2022 记得先增加vs2017编译器 一、症状&#xff1a; 你是否有以下症状&#xff1f; 1、用qt新建的工程&#xff0c;用qmake&#xff0c;可惜能看见的只有一个pro文件&#xff1f; 2、安装QT Creator后&#xff0c;使用MSVC编译显示no c com…...

编程日记 2025/7/30 9:05:08

[架构之美]IntelliJ IDEA创建Maven项目全流程（十四）

[架构之美]IntelliJ IDEA创建Maven项目全流程&#xff08;十四&#xff09; 摘要&#xff1a;本文将通过图文结合的方式&#xff0c;详细讲解如何使用IntelliJ IDEA快速创建Maven项目&#xff0c;涵盖环境配置、项目初始化、依赖管理及常见问题解决方案。适用于Java开发新手及…...

编程日记 2025/7/30 9:05:06

SpringBoot学习(上) , SpringBoot项目的创建(IDEA2024版本)

目录 1. SpringBoot介绍 SpringBoot特点 2. SpringBoot入门 2.1 创建SpringBoot项目 Spring Initialize 第一步: 选择创建项目 第二步: 选择起步依赖 第三步: 查看启动类 2.2 springboot父项目 2.3 测试案例 2.3.1 数据库 2.3.2 生成代码 1. SpringBoot介绍 Spring B…...

编程日记 2025/7/30 1:21:25

《Python星球日记》 第51天：神经网络基础

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、引言&#xff1a;走进神经网络的世界二、神经元与激活函数1. 神经元&#x…...

编程日记 2025/8/1 9:57:35

MindSpore框架学习项目-ResNet药物分类-模型评估

目录 4.模型评估 4.1模型预测 4.1.1加载模型 4.1.2通过传入图片路径进行推理 单张图片推理代码解释 4.2图片推理 4.2.1构造可视化推理结果函数 可视化推理结果函数代码解释 4.2.2进行单张推理 参考内容&#xff1a; 昇思MindSpore | 全场景AI框架 | 昇思MindSpore社区…...

编程日记 2025/7/30 9:05:00

Visual Studio Code 前端项目开发规范合集【推荐插件】

文章目录 前言代码格式化工具&#xff08;Prettier&#xff09;1、下载 prettier 相关依赖&#xff1a;2、安装 Vscode 插件&#xff08;Prettier&#xff09;&#xff1a;3、配置 Prettier&#xff08;.prettierrc.cjs&#xff09;&#xff1a; 代码规范工具&#xff08;ESLin…...

编程日记 2025/8/1 7:26:51

uniapp-商城-48-后台 分类数据添加修改弹窗bug

在第47章的操作中&#xff0c;涉及到分类的添加、删除和更新功能&#xff0c;但发现uni-popup组件存在bug。该组件的函数接口错误导致在小程序中出现以下问题&#xff1a;1. 点击修改肉类名称时&#xff0c;回调显示为空&#xff0c;并报错“setVal is not defined”&#xff0…...

编程日记 2025/7/30 9:04:56

OpenLayers 精确经过三个点的曲线绘制

OpenLayers 精确经过三个点的曲线绘制 根据您的需求&#xff0c;我将提供一个使用 OpenLayers 绘制精确经过三个指定点的曲线解决方案。对于三个点的情况&#xff0c;我们可以使用 二次贝塞尔曲线 或 三次样条插值&#xff0c;确保曲线精确通过所有控制点。 实现方案 下面是…...

编程日记 2025/7/30 9:04:55

uniapp小程序中实现无缝衔接滚动效果

组件滚动通知只能实现简单的滚动效果&#xff0c;不能实现滚动内容中的字进行不同颜色的更改&#xff0c;下面实现一个无缝衔接的滚动动画&#xff0c;可以根据自己的需要进行艺术化的更改需要滚动的内容&#xff0c;也可以自定义更改滚动速度。 <template><view cla…...

编程日记 2025/7/30 9:04:53

【Docker 新手入门指南】第四章：镜像加速

【Docker 新手入门指南】系列文章目录 【Docker 新手入门指南】第一章&#xff1a;前言【Docker 新手入门指南】第二章&#xff1a;架构概述【Docker 新手入门指南】第三章&#xff1a;快速安装【Docker 新手入门指南】第四章&#xff1a;镜像加速 文章目录 &#x1f680;【Doc…...

编程日记 2025/7/30 9:04:51

k8s删除pv和pvc后，vg存储没释放分析

原因是pv对应的lvm没删除 pv如下&#xff1a; local-068e2cac-22de-40f3-af90-efd151d043c8 100Gi RWO Retain Released sase-ops/alertmanager-kube-prometheus-stack-alertmanager-db-alertmanager-kube-prometheus-stack-alertmanager-0 …...

编程日记 2025/7/31 20:28:54

Ubuntu 22.04（WSL2）使用 Docker 安装 Zipkin 和 Skywalking

Ubuntu 22.04&#xff08;WSL2&#xff09;使用 Docker 安装 Zipkin 和 Skywalking 分布式追踪工具在现代微服务架构中至关重要&#xff0c;它们帮助开发者监控请求在多个服务之间的流动&#xff0c;识别性能瓶颈和潜在错误。本文将指导您在 Ubuntu 22.04&#xff08;WSL2 环境…...

编程日记 2025/7/30 9:04:48

【DLF】基于语言的多模态情感分析

作者提出的不足​​ ​​模态平等处理导致冗余与冲突​​ ​​问题​​：现有MSA方法对所有模态（语言、视觉、音频）平等处理，忽略模态间贡献差异（如语言为主导模态）。​​后果​​：跨模态交互引入冗余信息（如视觉和音频中与情感无关的噪声），甚至模态对间双向信息传递（…...

编程日记 2025/7/30 4:51:07

window 显示驱动开发-线性伸缩空间段

线性伸缩空间段类似于线性内存空间段。 但是&#xff0c;伸缩空间段只是地址空间&#xff0c;不能容纳位。 若要保存位&#xff0c;必须分配系统内存页&#xff0c;并且必须重定向地址空间范围以引用这些页面。 内核模式显示微型端口驱动程序&#xff08;KMD&#xff09;必须实…...

编程日记 2025/7/30 5:26:37

[Linux网络_71] NAT技术 | 正反代理 | 网络协议总结 | 五种IO模型

目录 1.NAT技术 NAPT 2.NAT和代理服务器 3.网线通信各层协议总结 补充说明 4.五种 IO 模型 1.什么是IO&#xff1f;什么是高效的IO&#xff1f; 2.有那些IO的方式&#xff1f;这么多的方式&#xff0c;有那些是高效的&#xff1f; 异步 IO &#x1f3a3; 关键缺陷类比…...

编程日记 2025/7/30 9:04:43

免费5个 AI 文字转语音工具网站！

一个爱代码的设计师在运营,不定时分享干货、学习方法、效率工具和AIGC趋势发展。个人网站&#xff1a;tomda.top 分享几个好用的文字转语音、语音转文字的在线工具&#xff0c;麻烦需要的朋友保存。 01. ChatTTS 中英文智能转换&#xff0c;语音自然流畅&#xff0c;在线免费…...

编程日记 2025/7/30 4:36:35

【入门】数字走向II

描述 输入整数N&#xff0c;输出相应方阵。 输入描述 一个整数N。&#xff08; 0 < n < 10 ) 输出描述 一个方阵&#xff0c;每个数字的场宽为3。 #include <bits/stdc.h> using namespace std; int main() {int n;cin>>n;for(int in;i>1;i--){for(…...

编程日记 2025/7/30 9:04:40

Linux基础(文件权限和用户管理)

1.文件管理 1.1 文件权限 文件的权限总共有三种&#xff1a;r&#xff08;可读&#xff09;&#xff0c;w&#xff08;可写&#xff09;&#xff0c;x&#xff08;可执行&#xff09;&#xff0c;其中r是read&#xff0c;w是write&#xff0c;x是execute的缩写。 我们…...

编程日记 2025/8/3 3:51:34

【BYD_DM-i技术解析】

关键词&#xff1a;构型、能量流、DM-i 一、发展历史&#xff1a;从DM1到DM5的技术跃迁 比亚迪DM&#xff08;Dual Mode&#xff09;技术始于2008年&#xff0c;其发展历程可划分为五代&#xff0c;核心目标始终围绕“油电协同”与“高效节能”展开&#xff1a; DM1&#xf…...

编程日记 2025/7/31 1:32:20

React Hooks 精要：从入门到精通的进阶之路

Hooks 是 React 16.8 引入的革命性特性，它让函数组件拥有了类组件的能力。以下是 React Hooks 的详细使用指南。 一、基础 Hooks 1. useState - 状态管理 import { useState } from react;function Counter() {const [count, setCount] = useState(0); // 初始值为0return …...

编程日记 2025/8/3 4:33:03

为什么选择 FastAPI、React 和 MongoDB？

在技术日新月异的今天，全栈开发需要兼顾效率、性能和可扩展性。FastAPI、React 和 MongoDB 这三者的组合，恰好构成了一个覆盖前后端与数据库的技术黄金三角。它们各自解决了开发中的核心痛点，同时以轻量化的设计和强大的生态系统，成为现代 Web 开发的首选方案。以下将从架构…...

编程日记 2025/7/30 8:05:41

01背包类问题

文章目录 [模版]01背包1. 第一问: 背包不一定能装满(1) 状态表示(2) 状态转移方程(3) 初始化(4) 填表顺序(5) 返回值 2. 第二问: 背包恰好装满3. 空间优化 416.分割等和子集1. 状态表示2. 状态转移方程3. 初始化4. 填表顺序5. 返回值 [494. 目标和](https://leetcode.cn/proble…...

编程日记 2025/7/30 8:05:39

重复的子字符串

28. 找出字符串中第一个匹配项的下标 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例 1&#…...

编程日记 2025/7/30 8:05:37

Spark MLlib网页长青

一、实验目的 1．掌握Spark SQL中用户自定义函数的编写。 2. 掌握特征工程的OneHotEncoder、VectorAssembler。 3. 熟悉决策树算法原理，能够使用Spark MLlib库编写程序 4. 掌握二分类问题评估方法 5. 能够使用TrainValidation和crossValidation交叉验证找出最佳模型。 6…...

编程日记 2025/7/30 1:21:25

详解多协议通信控制器

详解多协议通信控制器 在上文中，我们使用Verilog代码实现了完整的多协议通信控制器，只是讲解了具体原理与各个模块的实现代码，但是为什么这么写？这么写有什么用？模块与模块之间又是怎么连接相互作用的？今天我们就来处理这些问题。 为什么不能直接用 FPGA 内部时钟给外设？…...

编程日记 2025/8/1 1:25:31

JavaWeb基础

七、JavaWeb基础 javaWeb&#xff1a;完整技术体系&#xff0c;掌握之后能够实现基于B/S架构的系统 1. C/S和B/S 1.1 C/S&#xff08;Client/server&#xff09; C/S&#xff1a;客户端与服务器 本质&#xff1a;本地上有代码&#xff08;程序在本机上&#xff09;优点&#…...

编程日记 2025/8/2 13:19:03

localStorage和sessionStorage

localStorage和sessionStorage localStorage是指在用户浏览器中存储数据的方式&#xff0c;允许Web应用程序将少量的数据保存在用户设备上&#xff0c;便于页面之间、关闭浏览器后的数据持久化&#xff0c;他不会随着HTTP请求发送道服务器&#xff0c;减少带宽消耗&#xff0c…...

编程日记 2025/8/2 4:30:36

c++类【高潮】

类继承 和直接复制源代码修改相比&#xff0c;继承的好处是减少测试。 基类&#xff1a;原始类&#xff0c; 派生类&#xff1a;继承类&#xff0c;基于基类丰富更多内容的类。 继承一般用公有继承&#xff0c;class 派生类名 : public 基类名{……}&#xff1b; 公有继承&…...

编程日记 2025/8/1 16:33:35

C++进阶--AVL树的实现续

文章目录 C进阶--AVL树的实现双旋AVL树的查找AVL树的检验结语 很高兴和搭大家见面&#xff0c;给生活加点impetus&#xff0c;开启今天的比编程之路&#xff01;&#xff01; 今天我们来完善AVL树的操作&#xff0c;为后续红黑树奠定基础&#xff01;&#xff01; 作者&#x…...

编程日记 2025/7/31 11:14:35

1 2 3 4 5顺序插入，形成一个红黑树

红黑树的特性与优点 红黑树是一种自平衡的二叉搜索树&#xff0c;通过额外的颜色标记和平衡性约束&#xff0c;确保树的高度始终保持在 O(log n)。其核心特性如下&#xff1a; 每个节点要么是红色&#xff0c;要么是黑色。根节点和叶子节点&#xff08;NIL节点&#xff09;是…...

编程日记 2025/7/30 8:05:21