- 博客(77)
- 收藏
- 关注
RSS订阅原创 二维码复制内容
{html,body {margin: 0;body {Arial,sans-serif;button,textarea {button {.app {.header {gap: 20px;margin: 0;gap: 12px;border: 0;.main {
2026-10-08 19:13:57
233
原创 人脸在框检测
this.modelPath = 'https://你的静态配置中心/face-detector/model/blaze_face_short_range.tflite'this.wasmPath = 'https://你的静态配置中心/face-detector/wasm''MediaPipe JS 加载成功，但缺少 FaceDetector API''人脸检测 WASM 加载超时''人脸检测 WASM 加载失败''人脸检测器已经销毁，无法重新初始化''MediaPipe JS 加载超时'
2026-08-18 21:19:05
222
原创 前端截屏方案封装
[captureDom] 截图成功: canvas=${canvas.width}x${canvas.height}, scale=${scale.toFixed(2)}, base64=${base64Length} chars, size≈${(estimatedBytes / 1024).toFixed(2)} KB`error : new Error('[captureDom] video 克隆处理失败');error : new Error('[captureDom] 截图失败');
2026-08-14 14:23:55
181
原创 前端音频播放器封装
'[AudioPlayer] ArrayBuffer 音频必须提供 mimeType''[AudioPlayer] TypedArray 音频必须提供 mimeType''[AudioPlayer] 纯 Base64 音频必须提供 mimeType''[AudioPlayer] 创建 Blob URL 失败：参数不是 Blob''[AudioPlayer] Blob 未提供 MIME 类型''[AudioPlayer] 释放 Blob URL 失败:','[AudioPlayer] 重置播放进度失败:',
2026-08-13 10:41:21
197
原创 屏幕录制类开发
"当前状态不允许开始屏幕共享，请确保 start() 是由用户操作直接触发","[ScreenRecorder] 自动停止录制失败","[ScreenRecorder] 用户停止了屏幕共享""屏幕共享参数无法满足当前设备要求","无法读取用户选择的屏幕共享源","[ScreenRecorder] 录制完成","[ScreenRecorder] 开始录制""用户拒绝了屏幕共享权限","没有可用的屏幕共享源","用户取消了屏幕共享","屏幕共享参数不合法","未获取到屏幕录制流"
2026-08-11 23:56:05
240
原创 音频h5录制开发
message: "targetElement必须是HTMLElement"message: "当前环境不支持麦克风，请使用HTTPS访问"message: "当前浏览器不支持MediaRecorder"message: "当前浏览器不支持getUserMedia"message: "当前浏览器没有支持的音频录制格式"new Error("录音发生异常")// 某些浏览器检测MIME时可能直接抛异常。new Error("未获取到录音数据")// 告诉业务：用户取消了录音。* 获取浏览器支持的录音格式。
2026-08-11 17:59:52
219
原创 音频录制sdk开发
@param {number} options.maxDuration 最大录音时长，单位ms，默认60000。result.reason = "当前浏览器不支持navigator.mediaDevices";* @param {number} options.minDuration 最小录音时长，单位ms，默认500。result.reason = "当前浏览器不支持MediaRecorder";* @param {Function} options.onDuration 录音时长变化。
2026-08-11 14:06:20
242
原创 视频录制测试页
console.log(`[Recorder] 压缩后大小: ${(blob.size / 1024 / 1024).toFixed(2)} MB`);fileInfo.textContent = `大小: ${(blob.size / 1024).toFixed(2)} KB | 类型: ${blob.type}`;console.log(`[Recorder] 原始文件大小: ${(blob.size / 1024 / 1024).toFixed(2)} MB`);/* 淡红色背景 */
2026-07-10 16:13:33
273
原创 人脸偏移检测
debugMsg += `人脸中心(归一化): x=${faceCenterNormX.toFixed(3)}, y=${faceCenterNormY.toFixed(3)}\n`;debugMsg += `框大小(归一化): w=${box.width.toFixed(3)}, h=${box.height.toFixed(3)}\n`;"上" : "下";"左" : "右";// ========== 1. 初始化 MediaPipe ==========
2026-07-03 14:14:26
800
原创 页面性能监听react hooks
addMetric('白屏时间', entry.startTime);// ---------------- 输出 ----------------'%c🚀 页面性能',
2026-07-02 11:25:10
217
原创 中国省市区json数据
{"北京市":{"市辖区":["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云区","延庆区"]},"天津市":{"市辖区":["和平区","河东区","河西区","南开区","河北区","红桥区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","滨海新区","宁河区","静海区","蓟州区"]},"河北省":{"石家庄市":["长安区","桥西区","
2026-06-11 10:15:59
403
原创 网络调试的艺术：利用浏览器Network工具优化你的网站
在现代Web开发中，理解和优化网络请求是提升网站性能和用户体验的关键。本文将带你深入了解浏览器Network面板的强大功能，从基础的操作到高级调试技巧，教你如何分析和优化HTTP请求与响应，定位并解决加载时间过长的问题，确保你的网站既快速又可靠
2025-06-26 21:36:46
1290
原创 前端性能优化利器：深入解读 window.performance
window.performance 是浏览器提供的用于获取网页性能数据的接口，帮助开发者分析页面加载速度、资源请求时间、脚本执行效率等关键指标。
2025-06-26 20:37:24
1397
2
原创 懒加载革命：用 IntersectionObserver 实现零性能损耗的图片加载
IntersectionObserver 是一个现代的浏览器 API，用于异步监听目标元素与其祖先元素或视口（viewport）的交叉状态变化。它解决了传统滚动检测的性能问题，特别适用于实现懒加载、无限滚动、广告曝光统计等场景
2025-06-17 14:35:51
943
原创 JavaScript事件循环机制(Eventloop)：从调用栈到任务队列的完整架构
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）
2025-06-16 22:56:14
1163
原创 HTTP 缓存策略：强缓存与协商缓存的深入解析
本文将深入探讨HTTP缓存策略中的强缓存和协商缓存，包括它们的运作原理、优势和适用场景。通过理解这两种缓存策略，我们可以更好地优化网页性能和改善用户体验。
2025-06-14 16:11:15
1725
原创 WebView工作原理全解析：如何实现混合开发的无缝衔接
Webview 容器是现代移动应用和桌面应用中一个至关重要的组件，它本质上是一个内嵌在原生应用中的轻量级浏览器引擎。它允许开发者在原生应用中无缝地渲染和交互 Web 内容（HTML、CSS、JavaScript）
2025-06-13 22:32:05
2489
原创 三次握手建立连接，四次挥手释放连接——TCP协议的核心机制
TCP协议的三次握手（Three-way Handshake）和四次挥手（Four-way Handshake）是建立和终止可靠网络连接的核心机制,它们确保了通信双方能够同步状态并安全地交换数据;
2025-06-12 21:26:47
1458
原创 图片切割工具：智能分割长图并控制文件大小
这是一个直观易用的图片切割工具，用户上传长图后自动分割成多个不超过5MB的片段，保持原始宽度不变,自己用的,顺带发表一下,不喜勿喷!
2025-06-06 21:15:18
906
1
原创 图解浏览器多进程渲染：从DNS到GPU合成的完整旅程
浏览器在历史发展过程中，其进程架构做了哪些调整，为什么这样调整，以及解决了哪些问题？从用户在地址栏输入 URL，到页面渲染完成这之间发生了什么？回流和重绘是如何对浏览器性能造成影响的？
2025-06-04 21:28:44
1372
原创 从零开始手写一个Promise，彻底理解异步编程的核心原理
Promise使得处理异步代码变得更加直观和易于管理，尤其是在需要组合多个异步操作或者处理异常的时候。Promise 提供了一种比传统的回调函数更好的解决方案来处理异步编程中的复杂性
2025-05-30 11:22:04
382
原创 性能优化关键:link、script和meta的正确打开方式
深入解析 <link> 如何引入外部资源（如 CSS、图标），以及 <script> 如何驱动动态交互，二者如何协作构建现代网页
2025-05-25 11:24:45
1489
原创 前端必知的网络协议指南：从HTTP到WebSocket的深度剖析
梳理HTTP、WebSocket、WebRTC等11大前端核心协议，深入解析其工作原理、安全机制及性能优化策略，通过代码案例与协议对比，助你全面掌握网络通信的底层逻辑，解决实时性、安全性等开发痛点，打造更高效的Web应用
2025-05-24 14:57:24
1390
原创 Web 安全进阶：前端信封加解密技术详解
深入解析分层加密架构在前端的应用实践，通过Web Crypto API实现高效安全的『数据加密+密钥保护』双保险，为HTTPS传输、敏感信息存储提供企业级解决方案
2025-05-24 10:57:21
1851
原创 前端图片上传组件实战：从动态销毁Input到全屏预览的全功能实现
项目由于历史原因,使用的原生js开发,为了让代码更加优雅且具有可维护性,所以封装了这么一个组件,这个组件在当前很多的组件库面前不算什么,只能说适合的就是最好的;大家根据实际情况自行选择;封装必要性分析解决原生Input的体验缺陷原生样式不可定制、交互生硬需要隐藏原生控件并自定义可视化上传入口需处理多浏览器兼容性问题（如accept属性差异）统一管理复杂交互逻辑文件数量动态控制预览图与上传按钮的共存逻辑全屏预览的显示/隐藏状态管理内存管理需求自动释放Blob URL防止内存泄漏。
2025-05-18 11:11:13
1100
原创 从装饰器看前端工程化：如何优雅地增强代码能力？
装饰器（Decorator）是一种通过语法结构在类（Class）或其成员（方法、属性等）定义时修改其行为的编程模式。它通过@符号后接表达式的方式附加在目标对象上，能够增强代码的声明性、复用性和可维护性;
2025-05-18 09:56:21
1134
原创 深入理解 requestIdleCallback：浏览器空闲时段的性能优化利器
requestIdleCallback 是浏览器提供的一个API，用于将非关键任务延迟到浏览器空闲时段执行，从而避免阻塞用户交互、动画等关键任务，提升页面性能体验
2025-05-17 23:11:21
3056
原创 从零开始认识 Node.js：异步非阻塞的魅力
Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境，用于在服务器端运行 JavaScript 代码。它的设计目标是让开发者能够用 JavaScript 构建高性能、可扩展的网络应用。
2025-05-17 22:12:16
1029
原创 前端二进制数据指南：从 ArrayBuffer 到高级流处理
常用API包括ArrayBuffer（存储原始二进制数据）、TypedArray（按字节操作数据）、Blob（表示文件类数据）、FileReader（读取本地文件内容）和Canvas（操作图像像素数据）。二进制操作的优势在于性能更高、功能更强、节省带宽。通过合理使用这些API，前端开发者可以高效处理复杂的二进制数据任务。
2025-05-17 21:41:34
1334
原创 理解npm的工作原理：优化你的项目依赖管理流程
npm（Node Package Manager）是JavaScript世界的包管理工具，它不仅允许开发者轻松地安装、更新、卸载以及管理项目中所依赖的各种开源代码库和工具包，还提供了一个巨大的公共仓库，包含了成千上万可重用的代码包，支持通过简单的命令行操作就能实现项目的构建与维护。通过npm，开发者可以快速共享自己的代码，并利用社区的力量加速开发进程。无论是前端还是后端的JavaScript项目，npm都是不可或缺的工具。
2025-04-24 07:39:29
1434
原创 WeakSet：JavaScript 中容易被忽视的“弱集合”
WeakSet 的优势在于通过弱引用机制自动管理对象内存，避免内存泄漏，特别适合需要临时跟踪对象（如 DOM 元素）且不干扰垃圾回收的场景
2025-04-22 22:29:12
701
原创 JavaScript 模块化江湖：CommonJS、AMD、CMD、UMD 与 ESM 的终极对决
在JavaScript的模块化江湖里，CommonJS、AMD、CMD、UMD与ESM各自以不同的方式处理模块的定义和加载，上演了一场关于同步与异步、浏览器与服务器端适用性的终极对决，而ESM（ECMAScript Modules）作为官方标准，正逐渐统一这个纷争不断的领域
2025-04-22 21:59:43
1195
原创 为什么你需要 Babel？深入解析 JavaScript 转译
探索Babel的核心功能与高级配置，学习如何将现代JavaScript转换为兼容所有浏览器的代码，提升你的前端开发效率
2025-04-21 21:50:21
1547
原创 解锁前端开发高阶技能：全面掌握23种核心设计模式
在前端开发中，设计模式被广泛应用，它们为解决各种挑战提供了行之有效的策略。恰当地使用这些模式不仅能增强代码的可维护性、扩展性和复用性，还能更高效地组织和管理代码结构，从而显著提升开发效率。无论是应对全局状态管理、创建多样化的对象实例、封装复杂的业务逻辑，还是促进对象间的通信与交互，不同的设计模式均能提供针对性的解决方案。因此，在前端项目中熟练掌握并灵活应用这些设计模式，根据具体需求选择最合适的模式，对于提高代码质量及开发效率至关重要。
2025-04-20 21:00:10
1178
原创 AST：代码的“DNA 解码器”，如何用它读懂程序的生命？
AST 是前端开发中处理代码、优化构建、提高代码质量和实现跨语言支持的核心工具之一。它帮助前端工具深入理解代码结构，从而对代码进行高效的转换、优化和分析。通过 AST，前端开发者能够更轻松地进行代码转换、静态检查、压缩和混淆等操作，从而提升开发效率和应用性能
2025-04-18 22:04:05
1297
OpenHarmony设备开发指南：从环境搭建到复杂应用场景的实战教程
2025-03-03
前端开发必备：offsetWidthclientHeightscrollTop等属性深度解析
2025-03-18
鸿蒙操作系统关键技术解析与实践应用案例汇总
2025-03-03
鸿蒙操作系统关键技术解析与面试指南
2025-03-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人