__Mustang?-CSDN博客

原创前端图片上传优化：使用 Canvas 实现客户端压缩

前端图片上传优化：使用Canvas实现客户端压缩本文介绍了使用Canvas技术在前端实现图片压缩的方法，以减少上传时间、流量消耗和服务器压力。主要内容包括：基本原理：通过Canvas缩小图片尺寸并重新编码，生成压缩后的文件技术流程：从文件读取到最终上传的完整步骤核心实现：图片校验与加载保持宽高比计算目标尺寸绘制到Canvas并导出Blob 最佳实践：推荐使用toBlob而非toDataURL 根据场景选择适当压缩质量正确处理Object URL资源释放该方法适用于头像、相册、商品图片等上

2026-07-01 11:08:21 166

原创前端性能优化：如何避免重排（Reflow）和重绘（Repaint）

前端性能优化：重排与重绘的避免策略本文系统介绍了浏览器渲染流程中重排(Reflow)和重绘(Repaint)的概念及其性能影响。主要内容包括：浏览器渲染流程：Style→Layout→Paint→Composite四个关键阶段重排与重绘的定义及区别：重排影响几何属性，重绘影响外观属性常见触发重排的操作：修改尺寸、位置、DOM结构、display属性等强制同步布局问题：读取offsetWidth等属性会迫使浏览器立即计算布局布局抖动(Layout Thrashing)现象：读写操作频繁交替导致性能

2026-06-30 15:51:20 304

原创前端性能优化：彻底搞懂防抖（Debounce）与节流（Throttle）

浏览器中的很多事件都属于高频事件，例如：下面以滚动事件为例：当用户滚动页面时，这段回调可能在一秒内执行几十次。如果回调中包含以下操作：就可能产生以下问题：因此，我们需要控制函数的执行频率。防抖的核心思想是：假设等待时间为 500ms：典型应用场景：节流的核心思想是：假设执行间隔为 500ms：典型应用场景：可以简单记忆：使用示例：当用户持续输入时，定时器会不断被清除并重新创建。只有用户停止输入 500ms 后，才会执行。下面这种写法存在问题：它会丢失两个重要信息：正确写法：其中：示例：输

2026-06-29 16:40:05 371

原创 Vue 工程中 WebSocket 封装：自动重连、固定 3 秒重连、心跳检测、假死检测、请求超时完整方案

断开后自动重连固定 3 秒重连防止重复连接主动 ping / pong 心跳检测假死连接onerror立即重连请求超时页面销毁自动清理支持 Vue 组合式 Hook 使用支持全局单例连接对于实际项目来说，不建议直接在页面里裸写。WebSocketClient 核心类业务页面调用这样后续维护、排查问题、统一调整心跳和重连策略都会更方便。

2026-05-29 09:30:00 350 2

原创 Vue 工程中 Axios 二次封装：统一请求拦截、响应处理、取消请求的新旧两种方案

本文介绍了在Vue项目中封装Axios的两种方案，重点推荐使用AbortController的新方案。文章详细讲解了baseURL的作用、Vite环境下的配置方式，以及如何实现请求拦截、响应处理和取消请求功能。新方案通过pendingMap管理请求状态，提供cancelRequest和cancelAllRequest方法控制请求取消，并支持自定义cancelKey。同时给出了请求拦截器添加token、响应拦截器统一处理错误等最佳实践。对于旧项目，也提供了基于CancelToken的兼容方案。全文结构清晰，代

2026-05-26 15:37:50 395

原创国内无需 Claude 账号和海外代理：使用 DeepSeek API Key 接入 Claude Code，并用 CC Switch 管理模型

最近很多人想用 Claude Code 做项目开发，但又不想登录 Claude / Anthropic 账号。使用 DeepSeek API Key 接入 Claude Code。准确来说：可以不登录 Claude / Anthropic 账号，用 DeepSeek API Key 接入 Claude Code；但你仍然需要 DeepSeek 平台账号和 API Key。Claude Code 本身是一个运行在终端里的 AI 编程助手，可以读取项目、分析代码、修改文件、执行命令；

2026-05-08 17:16:58 1394

原创 Codex 接入 Ant Design MCP Server：让 AI 写 AntD 代码不再靠猜

真正容易踩坑的地方主要在 Codex 的配置格式和 Windows 命令解析上。Codex 当前使用的是，配置项是；Windows 中如果antdnpmnpx无法直接执行，可以分别尝试antd.cmdnpm.cmdnpx.cmd。配置成功后，Codex 在编写 Ant Design 页面时就能实时查询官方组件文档、API、示例和版本变更，能明显降低组件用法写错、API 过时、样式 Token 乱猜的问题。

2026-05-05 17:28:29 589

原创 Windows 和树莓派之间传输文件，一条 SCP 命令就够了

Windows 和树莓派之间传文件，最推荐的方式就是使用scp。这个方法不需要额外安装 FTP 工具，也不用开共享文件夹，只要树莓派开启了 SSH，就可以直接使用。对于树莓派、Home Assistant、Linux 服务器日常维护来说，scp是一个非常实用的命令。

2026-04-29 14:21:45 374

原创《轻松搭建智能家居：在Docker上完美部署Home Assistant》

Home Assistant是一个开源的智能家居平台，它允许用户在本地控制和自动化智能家居设备。它支持多种设备和服务，具有强大的自动化规则引擎，同时能通过各种设备（如手机、计算机等）进行控制。Home Assistant的优势在于它完全运行在本地，没有云服务的依赖，确保了隐私和数据安全。通过Docker部署Home Assistant，你可以方便快捷地在各种环境中搭建智能家居平台，轻松享受自动化控制带来的便利。在Docker上运行Home Assistant不仅提高了部署效率，还增强了管理的灵活性。

2025-10-08 17:43:40 1398

原创利用原生 JavaScript 实现 MQTT 通信

MQTT 是一个基于发布/订阅模式的轻量级通信协议。发布者（Publisher）：发送消息。订阅者（Subscriber）：接收消息。消息代理（Broker）：负责接收、过滤、和转发消息到相应的订阅者。它使用的是TCP/IP协议，适合低带宽、高延迟的网络环境，非常适合物联网应用和实时通信。在这篇文章中，我们通过一个简单的例子展示了如何在浏览器中使用原生 JavaScript 实现 MQTT 通信，并且通过 WebSocket (ws或wss协议) 来与 MQTT 服务器建立连接。

2025-09-08 18:52:24 1268

qq_45798791的博客