- 博客(58)
- 收藏
- 关注
RSS订阅原创 图片切割工具：智能分割长图并控制文件大小
这是一个直观易用的图片切割工具，用户上传长图后自动分割成多个不超过5MB的片段，保持原始宽度不变,自己用的,顺带发表一下,不喜勿喷!
2025-06-06 21:15:18
262
原创 图解浏览器多进程渲染：从DNS到GPU合成的完整旅程
浏览器在历史发展过程中，其进程架构做了哪些调整，为什么这样调整，以及解决了哪些问题？从用户在地址栏输入 URL，到页面渲染完成这之间发生了什么？回流和重绘是如何对浏览器性能造成影响的？
2025-06-04 21:28:44
1111
原创 从零开始手写一个Promise，彻底理解异步编程的核心原理
Promise使得处理异步代码变得更加直观和易于管理，尤其是在需要组合多个异步操作或者处理异常的时候。Promise 提供了一种比传统的回调函数更好的解决方案来处理异步编程中的复杂性
2025-05-30 11:22:04
262
原创 性能优化关键:link、script和meta的正确打开方式
深入解析 <link> 如何引入外部资源（如 CSS、图标），以及 <script> 如何驱动动态交互，二者如何协作构建现代网页
2025-05-25 11:24:45
1180
原创 前端必知的网络协议指南：从HTTP到WebSocket的深度剖析
梳理HTTP、WebSocket、WebRTC等11大前端核心协议，深入解析其工作原理、安全机制及性能优化策略，通过代码案例与协议对比，助你全面掌握网络通信的底层逻辑，解决实时性、安全性等开发痛点，打造更高效的Web应用
2025-05-24 14:57:24
993
原创 Web 安全进阶：前端信封加解密技术详解
深入解析分层加密架构在前端的应用实践，通过Web Crypto API实现高效安全的『数据加密+密钥保护』双保险，为HTTPS传输、敏感信息存储提供企业级解决方案
2025-05-24 10:57:21
1069
原创 前端图片上传组件实战：从动态销毁Input到全屏预览的全功能实现
项目由于历史原因,使用的原生js开发,为了让代码更加优雅且具有可维护性,所以封装了这么一个组件,这个组件在当前很多的组件库面前不算什么,只能说适合的就是最好的;大家根据实际情况自行选择;封装必要性分析解决原生Input的体验缺陷原生样式不可定制、交互生硬需要隐藏原生控件并自定义可视化上传入口需处理多浏览器兼容性问题（如accept属性差异）统一管理复杂交互逻辑文件数量动态控制预览图与上传按钮的共存逻辑全屏预览的显示/隐藏状态管理内存管理需求自动释放Blob URL防止内存泄漏。
2025-05-18 11:11:13
907
原创 从装饰器看前端工程化：如何优雅地增强代码能力？
装饰器（Decorator）是一种通过语法结构在类（Class）或其成员（方法、属性等）定义时修改其行为的编程模式。它通过@符号后接表达式的方式附加在目标对象上，能够增强代码的声明性、复用性和可维护性;
2025-05-18 09:56:21
1006
原创 深入理解 requestIdleCallback：浏览器空闲时段的性能优化利器
requestIdleCallback 是浏览器提供的一个API，用于将非关键任务延迟到浏览器空闲时段执行，从而避免阻塞用户交互、动画等关键任务，提升页面性能体验
2025-05-17 23:11:21
1305
原创 从零开始认识 Node.js：异步非阻塞的魅力
Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境，用于在服务器端运行 JavaScript 代码。它的设计目标是让开发者能够用 JavaScript 构建高性能、可扩展的网络应用。
2025-05-17 22:12:16
802
原创 前端二进制数据指南：从 ArrayBuffer 到高级流处理
常用API包括ArrayBuffer（存储原始二进制数据）、TypedArray（按字节操作数据）、Blob（表示文件类数据）、FileReader（读取本地文件内容）和Canvas（操作图像像素数据）。二进制操作的优势在于性能更高、功能更强、节省带宽。通过合理使用这些API，前端开发者可以高效处理复杂的二进制数据任务。
2025-05-17 21:41:34
984
原创 理解npm的工作原理：优化你的项目依赖管理流程
npm（Node Package Manager）是JavaScript世界的包管理工具，它不仅允许开发者轻松地安装、更新、卸载以及管理项目中所依赖的各种开源代码库和工具包，还提供了一个巨大的公共仓库，包含了成千上万可重用的代码包，支持通过简单的命令行操作就能实现项目的构建与维护。通过npm，开发者可以快速共享自己的代码，并利用社区的力量加速开发进程。无论是前端还是后端的JavaScript项目，npm都是不可或缺的工具。
2025-04-24 07:39:29
854
原创 WeakSet：JavaScript 中容易被忽视的“弱集合”
WeakSet 的优势在于通过弱引用机制自动管理对象内存，避免内存泄漏，特别适合需要临时跟踪对象（如 DOM 元素）且不干扰垃圾回收的场景
2025-04-22 22:29:12
436
原创 JavaScript 模块化江湖：CommonJS、AMD、CMD、UMD 与 ESM 的终极对决
在JavaScript的模块化江湖里，CommonJS、AMD、CMD、UMD与ESM各自以不同的方式处理模块的定义和加载，上演了一场关于同步与异步、浏览器与服务器端适用性的终极对决，而ESM（ECMAScript Modules）作为官方标准，正逐渐统一这个纷争不断的领域
2025-04-22 21:59:43
871
原创 为什么你需要 Babel？深入解析 JavaScript 转译
探索Babel的核心功能与高级配置，学习如何将现代JavaScript转换为兼容所有浏览器的代码，提升你的前端开发效率
2025-04-21 21:50:21
1191
原创 解锁前端开发高阶技能：全面掌握23种核心设计模式
在前端开发中，设计模式被广泛应用，它们为解决各种挑战提供了行之有效的策略。恰当地使用这些模式不仅能增强代码的可维护性、扩展性和复用性，还能更高效地组织和管理代码结构，从而显著提升开发效率。无论是应对全局状态管理、创建多样化的对象实例、封装复杂的业务逻辑，还是促进对象间的通信与交互，不同的设计模式均能提供针对性的解决方案。因此，在前端项目中熟练掌握并灵活应用这些设计模式，根据具体需求选择最合适的模式，对于提高代码质量及开发效率至关重要。
2025-04-20 21:00:10
957
原创 AST：代码的“DNA 解码器”，如何用它读懂程序的生命？
AST 是前端开发中处理代码、优化构建、提高代码质量和实现跨语言支持的核心工具之一。它帮助前端工具深入理解代码结构，从而对代码进行高效的转换、优化和分析。通过 AST，前端开发者能够更轻松地进行代码转换、静态检查、压缩和混淆等操作，从而提升开发效率和应用性能
2025-04-18 22:04:05
948
原创 原生JavaScript DOM操作指南：元素、内容、类名与自定义属性全解析
本文将系统讲解JavaScript操作文档对象模型的核心方法，涵盖元素增删改查、内容渲染控制、类名动态管理、自定义属性操作及滚动行为检测五大模块，通过30+可交互代码示例，揭示从基础API到现代方案的完整知识体系
2025-04-15 08:34:08
854
原创 JavaScript 实现 WiFi 信号强度模拟类
一个基于 JavaScript/TypeScript 的类，用于模拟无线信号（WiFi）的强度变化
2025-04-11 13:51:46
185
原创 WeakMap 剖析：为什么它能避免内存泄漏
WeakMap 在前端开发中特别适合用于需要与对象生命周期绑定的数据存储场景，可以有效避免内存泄漏问题
2025-04-10 20:44:31
806
原创 JavaScript中Reflect对象指南：更智能的对象操作
Reflect 是 ES6 (ECMAScript 2015) 引入的一个内置对象，它提供了一系列静态方法来操作对象，这些方法与 JavaScript 的元编程特性密切相关
2025-04-09 23:22:41
1298
原创 探索原生JS的力量：自定义实现类似于React的useState功能
本方案特别适合希望在历史遗留的原生JavaScript项目中实现简单轻量级数据驱动机制的开发者。无需引入任何框架或第三方库，即可按照此方法封装出类似于React中useState的功能，轻松为项目添加状态管理能力，既保持了项目的轻量性，又提升了开发效率
2025-04-09 22:45:14
454
1
原创 webrtc实现私有化会议系统
上节我们学了如何通过浏览器的 API 去操控电脑上的摄像头、麦克风、屏幕分享桌面，这些是我们实现会议系统必备的基础知识，接下来我们就要去思考如何实现一个会议系统，以及如何将我们学到的基础 API 和WebRTC组合。清晰的逻辑和流程对于解决任何事情，都可以事半功倍。所以同样的，我们也得首先构思下应该以什么样的方式或流程去实践这项技术，完成这个功能。第一步，我们必须得知道WebRTC是如何将远端的两个浏览器关联起来的，因为只有建立关联关系，接下来才有多媒体通信的基础。
2025-04-07 22:51:24
561
原创 WebRTC技术简介及应用场景
WebRTC（Web Real-Time Communication） 是一项开源技术，允许浏览器和移动应用直接进行实时音视频通信和数据传输，无需安装插件或第三方软件。它由 Google 发起，现已成为 W3C 和 IETF 的标准
2025-04-03 22:20:27
1069
原创 Nginx 核心配置详解与性能优化最佳实践
Nginx 是一个高性能的 Web 服务器和反向代理服务器。它轻量、高效，被广泛用于现代 Web 开发中。
2025-04-02 21:50:36
1257
原创 深入理解 dispatchEvent：前端事件触发的艺术
dispatchEvent 是 DOM 元素的一个方法，用于手动触发/派发一个事件。这个方法允许开发者以编程方式触发事件，而不是等待用户交互或浏览器自动触发
2025-03-28 22:08:06
873
原创 Canvas渲染管线解析：从API调用到像素落地的全过程
Canvas 是 HTML5 提供的一个通过 JavaScript 来绘制图形的元素。它提供了一个空白的绘图区域，开发者可以使用 JavaScript 脚本在其中绘制各种图形、动画、游戏画面等
2025-03-28 21:33:59
1180
原创 深入 SVG：矢量图形、滤镜与动态交互开发指南
SVG（Scalable Vector Graphics） 是一种基于 XML 的矢量图形格式，用于描述二维图形
2025-03-25 23:33:11
1228
原创 Chrome Performance 面板完全指南：从卡顿到丝滑的终极调试术
前端性能调试是优化网页加载速度和运行效率的关键步骤，Chrome DevTools 的 Performance 面板 是核心工具;
2025-03-24 21:26:49
1968
原创 lrz 源码核心篇剖析：如何实现高效、兼容的图片压缩？
lrz` 通过以下优化实现了高效的图片压缩：1. 异步处理：避免阻塞主线程。2. 分块处理：减少内存占用。3. 设备优化：根据设备性能调整策略。4. EXIF 方向修正：避免额外的计算和绘制。5. 压缩质量与尺寸优化：动态调整图片尺寸。6. 内存释放：避免内存泄漏。
2025-03-22 12:49:02
1611
原创 无阻塞UI：通过Web Worker提升用户体验的新途径
Web Worker 是浏览器提供的 JavaScript 多线程解决方案，允许在主线程之外运行脚本，执行耗时任务而不阻塞用户界面, 适用于处理耗时任务，避免阻塞主线程，提升用户体验。通过和onmessage实现主线程与 Worker 的通信.实际工作场景：使用单独的worker.js文件编写 Web Worker 逻辑，便于维护和调试。复杂计算任务：通过矩阵乘法模拟复杂计算任务，展示 Web Worker 的性能优势。返回数据给主线程：Worker 可以通过将计算结果返回给主线程。
2025-03-22 07:29:00
799
原创 流畅如丝：利用requestAnimationFrame优化你的Web动画体验
告别卡顿：使用requestAnimationFrame提升Web动画性能的最佳实践
2025-03-21 20:53:54
1226
原创 Iframe深度实践：应用场景详解、兼容性问题及跨域通信实战
<iframe>（内联框架）是 HTML 中的一个标签，用于在当前网页中嵌入另一个网页。它允许你在一个网页中显示另一个网页的内容，类似于在一个页面中嵌套另一个页面
2025-03-20 22:00:51
1465
原创 打破同源策略：前端跨域的全面解析与应对策略
跨域（Cross-Origin）指浏览器出于安全考虑，限制网页脚本向不同源（协议、域名、端口）的服务器发起 HTTP 请求。这是由浏览器的同源策略（Same-Origin Policy）引起的安全机制
2025-03-19 21:51:21
963
原创 前端开发进阶：虚拟滚动如何大幅提升列表渲染性能？
虚拟滚动的目标是解决大量数据渲染时的性能问题。传统方式是一次性渲染所有数据，而虚拟滚动只渲染用户当前可见的部分数据，其余部分通过占位符代替。
2025-03-18 22:52:11
410
1
OpenHarmony设备开发指南：从环境搭建到复杂应用场景的实战教程
2025-03-03
前端开发必备：offsetWidthclientHeightscrollTop等属性深度解析
2025-03-18
鸿蒙操作系统关键技术解析与实践应用案例汇总
2025-03-03
鸿蒙操作系统关键技术解析与面试指南
2025-03-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人