- 博客(115)
- 收藏
- 关注
RSS订阅原创 你的网页只用了 30 个字，却背着一套 58MB 的字库
做网站的人大概都经历过：页面上线了，用户甩一句「怎么这么慢」。你查服务器、查图片、查接口，最后发现——就是字体。设计师发来思源黑体，17MB；再配个标题字体，几个字库加起来。你为了几十个字显示正常，把整套字库丢上 CDN。用户点开页面，得先等字库下载完，页面才敢开始渲染。3G 用户直接秒退，4G 也得干等好几秒。你再数数页面上用到了几个字。banner 一句 slogan、导航几个词、一个按钮——
2026-08-26 18:57:28
320
原创 端口无虞 macOS 版上线：查端口、杀进程，Mac 上也能一键搞定
端口无虞 PortSafe 推出 macOS 版，提供与 Windows 版一致的轻量级端口管理功能。该工具可快速查询端口占用情况并一键终止相关进程，解决开发中常见的端口冲突问题。macOS 版仅 80KB，无第三方依赖，支持终端直接运行。操作简单三步：输入端口号查看占用进程，输入"1"强制终止。支持跨平台使用，适合需要频繁处理端口问题的开发者。现已提供双平台免费下载。
2026-08-24 23:41:32
283
原创 端口被占用？这个 1MB 的小工具帮你一键搞定
这篇文章介绍了一个名为"端口无虞(PortSafe)"的小工具，用于快速解决开发中常见的端口占用问题。该工具具有以下特点： 功能简单高效：输入端口号即可查看占用进程，输入"1"可一键终止所有占用进程 轻量便捷：仅1.1MB大小，无依赖，双击即用 跨平台支持：Windows和macOS操作逻辑一致 解决常见场景：本地开发调试、容器映射、服务重启等端口冲突问题 工具使用仅需三步：启动程序→输入端口号→选择终止或退出，大幅简化了传统通过任务管理器或命令行处理端口占用的复杂流程，适合开发者提升调试效率。
2026-08-24 16:13:08
149
原创 网页慢，八成是图的问题：瞬图优化把一组产品图从 24.5MB 压到 3.9MB，我只点了一下
网页加载缓慢往往源于图片过大，瞬图优化工具能一键将24.5MB图片压缩至3.9MB（节省84%）。这款免费本地工具支持智能优化，自动选择最佳格式（如转WebP保留质量），保留原图尺寸，处理速度快且不上传数据。支持Windows/macOS，适用于照片、PNG、GIF等格式，批量处理文件夹并保留目录结构。下载即用，无需配置，帮助开发者轻松提升页面性能。 关键词： 图片压缩、网页优化、瞬图优化、WebP、本地工具
2026-08-22 07:19:42
161
原创 一个中文字体 18.8MB，你却只用了 30 个字：字域引擎 GlyphCore，连 Windows 系统自带的字体集合都能直接拆
字域引擎 GlyphCore 是一款免费本地化字体子集化工具，专为解决中文 Web 项目中字体体积过大问题设计。它能自动提取字体文件中实际用到的字符（如仅保留页面中的30个字），将原始字体（如18.8MB的微软雅黑）压缩至KB级（如4.4KB），减少99%以上体积。最新版本支持直接处理Windows系统.ttc字体集合文件，无需手动拆分。工具支持批量处理、多格式输出（TTF/WOFF/WOFF2），保留目录结构且不覆盖源文件，适用于前端开发、设计、游戏等多个场景，跨平台（Windows/macOS）
2026-08-20 14:08:09
235
原创 瞬图优化 v1.2.0 发布：让图片处理更简单，批量优化效率更高
在开发项目的过程中，经常会遇到一个问题：图片越来越多，项目体积越来越大。之前也尝试过一些在线图片压缩工具，但当图片数量比较多时，需要反复上传下载，而且一些项目素材并不适合上传到第三方服务。所以做了一个本地图片优化工具——。它的目标很简单：让图片更轻，同时保持足够好的视觉效果。目前 v1.2.0 版本正式发布，继续优化图片处理体验。
2026-08-06 08:41:36
181
原创 我挑战做一个没人愿意做的免费软件
独立开发者打造免费图片压缩工具，解决市面工具广告多、收费高的问题。经过算法研究和反复测试，该工具能在压缩图片大小的同时保持画质，现已开放使用。支持多种图片格式，无任何限制。欢迎体验并关注开发者，下载地址已附。点赞收藏支持原创，感谢关注！✿✿ヽ(°▽°)ノ✿
2026-07-31 22:27:11
20
原创 @giszhc/vips-thumbnail 高性能缩略图工具
@giszhc/vips-thumbnail 是一个高性能 Node.js 图片缩略图生成库，适用于 GIS 平台、图片管理系统等场景。它能有效解决大尺寸图片加载慢、带宽消耗等问题，支持自定义尺寸和比例保持。文章介绍了基本使用方法、常见开发陷阱（如内存管理、图片比例处理）以及 Docker 部署注意事项。该工具支持多尺寸缩略图批量生成，显著提升系统性能。项目已开源，可通过 npm/pnpm 安装使用。
2026-07-30 10:45:22
241
原创 @giszhc/vue-page-motion：Vue3 路由动画怎么做才“丝滑”？（附在线示例）
Vue3 路由动画常因过渡生硬、方向混乱或缓存问题影响体验。@giszhc/vue-page-motion 提供解决方案，通过三层设计（路由层、动画层、渲染层）实现动态动画控制。
2026-04-16 14:00:49
380
原创 @giszhc/shapefile：前端Shapefile和GeoJSON相互转换，这才是更优解（附在线示例）
@giszhc/shapefile 是一个实现 Shapefile 和 GeoJSON 格式双向转换的 JavaScript 库。支持多种输入方式（文件、ArrayBuffer、URL等）将 Shapefile 转换为 GeoJSON，并提供丰富的配置选项将 GeoJSON 转换为 Shapefile ZIP 包，包括自定义文件名、压缩方式和坐标系定义。该库还提供在线演示页面，可直接在浏览器中体验功能转换效果。
2026-04-10 17:49:37
202
原创 前端/Node.js操作Excel实战：使用@giszhc/xlsx（导入+导出全流程）
本文介绍了使用@giszhc/xlsx库进行Excel操作的完整流程。首先说明为何选择@giszhc/xlsx替代已停止维护的xlsx库，详细展示了JSON数据导出、列顺序控制、列宽设置等基础功能，以及浏览器和Node.js环境下的Excel文件导入方法。
2026-04-07 11:48:46
354
原创 xlsx 已停止维护且存在漏洞！推荐一个可直接替代的 npm 库
原xlsx库已停止维护且存在安全风险，推荐使用@giszhc/xlsx作为替代方案。该库基于xlsx能力维护扩展，修复安全问题，API高度兼容，可直接替换。替换方式简单，只需修改导入语句，其余代码无需改动，适用于前端/Node.js处理Excel数据。
2026-04-07 11:45:11
716
原创 @giszhc/sse-client：前端SSE（Server-Sent Events）通讯神器，这才是更优解（附在线示例）
SSE Client：轻量级浏览器端SSE通信库 专为浏览器端实时数据订阅设计，基于HTTP长连接，适合流式数据、日志推送、AI输出等场景。
2026-04-04 09:12:46
449
原创 @giszhc/worker-client：前端Web Worker神器，这才是更优解（附在线示例）
Worker Client 是一个零配置、类型安全的 Web Worker 通信库，通过函数式调用简化多线程编程。它自动封装 Worker 通信，支持 Promise 调用和完整 TypeScript 类型推断，无需单独创建 worker 文件。
2026-04-03 08:33:59
505
原创 我用 @giszhc/worker-client + OpenLayers，硬是把 100 万点数据干流畅了（附在线示例）
本文介绍了如何通过Web Worker优化OpenLayers加载百万级点数据的性能问题。作者指出地图卡顿的主因并非渲染，而是主线程承担过多数据处理任务。
2026-04-03 08:33:42
529
原创 CSS Grid 布局参数详解（超细化版）+ 中文注释 Demo
CSS Grid 布局核心要点 核心概念： Grid 是二维布局系统，通过定义规则而非感觉驱动布局 主要包含容器属性（定义网格结构）和项目属性（定位项目）
2026-04-02 10:11:18
444
原创 @giszhc/socket-client：前端web-socket通讯神器，这才是更优解（附在线示例）
Socket Client 是一个功能完善的 WebSocket 通信客户端库，专为浏览器端 WebSocket 连接设计。该库提供自动重连、心跳机制、命名空间隔离等核心功能，使 WebSocket 通信更加简单可靠。主要特性包括：开箱即用的 API、智能重连机制、心跳保活、命名空间隔离、类型安全支持以及轻量无依赖。支持消息订阅和发送，所有消息通过统一格式封装，包含命名空间标识确保隔离性。
2026-04-02 08:46:00
766
原创 @giszhc/iframe-client：前端iframe通讯神器，这才是更优解（附在线示例）
Iframe Client 是一个轻量级的 JavaScript/TypeScript 库，专注于实现 iframe 跨域通信功能。该库提供简单易用的 API，支持父子页面双向消息传递，内置握手协议确保通信可靠性。
2026-04-01 09:17:13
545
原创 前端 Node + WebSocket 通讯，这才是更优解（附完整 Demo）
本文介绍了WebSocket在实时通讯中的优势，对比了轮询方案的不足。文章详细讲解了WebSocket的工作原理，并提供了Node.js服务端和浏览器客户端的完整实现代码。通过WebGIS实时点位更新的实战案例，展示了WebSocket的实际应用价值。
2026-03-31 08:46:59
605
原创 前端 iframe 通讯，这才是更优解（附完整 Demo）
本文介绍了前端iframe通讯的最佳实践——使用postMessage方法。作者通过自身踩坑经历，指出直接操作iframe窗口变量的弊端（跨域、加载时序等问题），并详细讲解了postMessage的安全通信原理。
2026-03-31 08:46:08
536
原创 Web Worker 从 0 到 1 讲明白：别再让你的页面“卡成 PPT”了
Web Worker 是解决 JavaScript 单线程卡顿问题的关键技术，通过创建后台线程处理耗时任务（如大数据计算、空间分析），保持主线程流畅运行。核心原理是通过 postMessage 通信，但需注意：不能操作 DOM、数据需拷贝传输、路径问题易踩坑。
2026-03-31 08:45:34
518
原创 JavaScript进阶避坑指南：这些坑我替你踩过了
《JavaScript进阶避坑指南》总结了JS开发中的常见陷阱：this指向问题、==与===的差异、Promise异步处理误区、数组方法误用、解构赋值报错、闭包内存泄漏、对象引用问题等。文章通过真实案例（如WebGIS开发中的图层更新问题）说明这些陷阱的危害，并给出正确解决方案。
2026-03-30 21:08:37
443
原创 别再写低级JS了：高手都在用的那些骚操作
这篇文章总结了JavaScript开发中的高级技巧与常见误区。对比了新手与高手的代码写法差异，重点介绍了可选链、空值合并、解构赋值、函数式数组处理、Set/Map使用、参数默认值、Promise异步处理等现代JS特性。
2026-03-30 21:03:32
434
原创 @giszhc/kml-to-geojson：kml转换GeoJSON，这才是更优解
kml-to-geojson 工具库简介 一个轻量级 JavaScript/TypeScript 工具库，用于将 KML、GPX、OVKML 和 OVJSN 格式转换为 GeoJSON。
2026-03-26 08:53:51
507
原创 @giszhc/tree-line-style：Element Plus的ElTree组件连接线，看这里
@giszhc/tree-line-style 是一个用于美化 Element Plus el-tree 树组件连接线样式的 CSS 库。该库提供多种自定义选项，包括连接线颜色、宽度、样式（dashed/solid）、节点缩进和横线长度等配置。
2026-03-26 08:50:55
262
原创 手写一个高质量事件管理器（EventEmitter），彻底搞懂前端事件机制
本文深入解析前端事件机制，手写实现一个高质量的EventEmitter事件管理器。文章从发布-订阅模式出发，演示了核心实现：通过对象存储事件，数组保存回调函数。详细讲解了on/emit/off基本功能，并提供了once、多事件绑定等进阶优化方案。
2026-03-26 08:46:31
335
原创 TypeScript Class 详解：不只是语法糖，而是工程能力的分水岭
这篇文章深入探讨了TypeScript中Class的工程价值，指出Class不仅是语法糖，更是类型约束和面向对象建模的核心工具。文章通过对比JS Object的局限性，详细讲解了TS Class的访问控制、继承、抽象类等特性，并强调其在数据封装、业务建模和团队协作中的重要作用。
2026-03-26 08:46:19
548
原创 JS 节流（Throttle）到底是啥？为什么必须做？
本文深入解析JavaScript节流（Throttle）的核心概念与应用场景。节流通过限制函数执行频率（如1000ms内只执行一次），解决高频事件（如scroll、resize）导致的性能问题。与防抖不同，节流按固定节奏执行而非等待停止。
2026-03-26 08:46:07
348
原创 JS 中的防抖（debounce）到底是啥？为什么你必须掌握它
JS防抖（Debounce）核心原理与应用 防抖是一种高频事件优化技术，核心思想是**"只执行最后一次操作"**。它通过定时器机制，在用户持续操作时延迟执行，直到操作停止一段时间（如500ms）后才真正触发。主要解决输入框搜索、窗口resize等场景下的性能问题，避免频繁触发导致的资源浪费。
2026-03-25 08:41:28
304
原创 JS 中的 Object 都能干啥？一篇文章给你讲个通透
本文深入解析JavaScript中Object的核心能力，指出常见误区并给出解决方案。Object不仅是数据容器，更是JS对象系统的基石和元编程入口。文章从对象本质、创建方式、遍历方法、属性控制等方面详细讲解，并提供工程实践和性能优化建议。
2026-03-25 08:41:17
339
原创 JS 中的 indexOf lastIndexOf：你以为只是查找，其实是“隐藏的基础能力”
本文深入解析JS中的indexOf和lastIndexOf方法，揭示其作为线性扫描查找的本质。文章指出常见误区，如错误判断0返回值、无法查找复杂对象和NaN等，并给出正确使用方案。强调这些方法的时间复杂度为O(n)，不适合大数据场景，推荐改用Set/Map等数据结构。
2026-03-25 08:41:05
341
原创 JS 中的 instanceof 和 typeof，到底在判断什么？一篇文章给你讲个通透
本文深入解析了JavaScript中的typeof和instanceof类型判断机制，揭示了它们的底层原理和使用陷阱。文章指出typeof仅能判断基础类型标签，存在null返回object等历史遗留问题；而instanceof通过原型链判断对象类型，但会受跨执行上下文影响。
2026-03-25 08:40:53
543
原创 requestAnimationFrame 到底是什么？一篇文章给你讲个通透
requestAnimationFrame是浏览器提供的动画API，它能在每帧渲染前执行回调，自动对齐屏幕刷新率（60FPS）。相比setTimeout/setInterval，它能避免无效计算和卡顿，确保动画流畅。
2026-03-25 08:40:37
453
原创 Vue React 为什么大量使用 bind 箭头函数？一篇文章给你讲个通透
Vue/React 中频繁使用 bind 或箭头函数的核心原因是 JavaScript 的 this 绑定机制。框架在调用用户函数时（如事件处理），会改变原始调用上下文，导致 this 丢失。解决方案包括： 显式绑定（bind）强制固定 this； 箭头函数利用词法作用域规避 this 问题； 类字段+箭头函数（React 推荐）一劳永逸。
2026-03-24 08:38:12
616
原创 class 语法和原型链到底是什么关系？一篇文章给你讲透
JavaScript 的 class 语法本质是原型链的语法糖，并非真正的类机制。class 中的方法实际挂载在构造函数的 prototype 上，通过 new 操作符建立原型链关系（实例.__proto__ === 构造函数.prototype）。
2026-03-24 08:38:02
345
原创 为什么箭头函数没有 this？一篇文章给你讲透
箭头函数的this并非“没有”，而是静态绑定到定义时的外层作用域，无法通过调用方式改变。与普通函数（动态绑定this）不同，箭头函数适合需要固定this的场景（如回调），但不适合对象方法或需动态this的情况。
2026-03-24 08:37:51
382
原创 JS 中的 bind，本质到底是什么？一篇文章让你彻底记住
JS中的bind方法不仅用于绑定this，还会返回一个新函数，该函数通过闭包和apply实现"硬绑定"和参数预绑定。与call/apply不同，bind不立即执行函数，且支持柯里化（部分参数绑定）。核心原理是保存原函数并包装新函数，处理new调用时优先级更高。
2026-03-24 08:37:36
359
原创 JS 中的 apply，一篇文章让你彻底搞懂（不是会用，是看透本质）
JS中的apply本质是改变函数执行时的this值并以数组形式传参。其原理可拆解为：1）将函数临时挂载到目标对象；2）用该对象调用函数；3）删除临时属性。与call的唯一区别是参数形式（数组 vs 逐个传），性能差异可忽略。
2026-03-24 08:37:07
830
原创 JS 中的 call，到底在“控制什么”？一篇讲清楚，让你想忘都难
JavaScript 中的 call 方法核心解决的是函数执行时 this 的指向问题，其本质是通过临时将函数挂载到目标对象上并调用（obj.fn()），从而强制改变 this。与 bind（绑定返回新函数）和 apply（参数为数组）不同，call 会立即执行。
2026-03-23 22:29:32
380
原创 JS 原型链，一篇文章让你彻底记住（忘都忘不掉）
这篇文章深入浅出地讲解了JavaScript原型链的核心概念。主要内容包括： 原型链的本质：对象访问属性时，会沿着原型链向上查找（就近原则+向上查找机制） 核心概念： 所有对象都有__proto__属性指向其原型 只有函数有prototype属性 原型链的终点是null 常见误区等
2026-03-23 22:18:43
316
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人