记录架构思考、开发者体验与高效交付。
写作
2026年3月4日
Hybrid 架构 H5 视频播放：自动播放、全屏适配与埋点实践
在 Hybrid App 的 H5 场景中实现视频播放，开发者常面临自动播放被拦截、全屏 API 碎片化、埋点语义难以对齐等工程痛点。本文从真实业务实践出发，系统梳理了原生 `<video>` 与 Canvas 方案的选型边界，深入剖析 iOS/Android 双端在自动播放降级策略、全屏状态检测、事件语义映射等关键环节的技术细节，并提供完整的 TypeScript 实现方案与 WebKit 扩展 API 的类型补全策略，助你构建稳定可靠的跨端视频播放能力。
2026年3月3日
编译期魔法：自定义 Webpack Loader 将函数调用结果"内联"为静态字符串
通过自定义 Loader 将 getDocsLink 调用在构建阶段折叠为 URL 字面量，避免大 JSON 映射进入首屏包体，实现零运行时开销与更好的 Tree Shaking。
2026年3月2日
从白屏到降内存87%：二开ECharts图表库的V8级优化复盘
通过 V8 底层机制分析，揭示了不合理的数据结构的内存陷阱，并采用数组转置、类型分离与 Dataset 架构重构三项策略，将内存占用降低87%。文章包含详细的 %DebugPrint 内存分析、优化前后的实测数据对比，适合关注前端性能优化与大数据可视化的开发者阅读。
2026年3月1日
我的 Monorepo 实践经验：从基础概念到最佳实践
涵盖了 Monorepo 的关键概念、库包策略、如何管理跨包依赖、共享配置的最佳做法，以及使用 Turborepo 提高构建效率的技巧。同时，探讨了如何配置 npmrc 和 pnpm-workspace 来优化包管理，帮助团队实现更高效、可持续的前端工程化。
2026年2月28日
这一招让 Node 后端服务启动速度提升 75%！三种 ts 启动方式对比
在这篇文章中，我们深入探讨了三种常见的 Node 后端服务启动方式：tsx、tsc 和 esbuild，并通过实际测试展示了它们在冷启动时间、吞吐量和资源占用方面的差异。特别是在冷启动场景下，esbuild 通过提前打包大大提升了启动速度，最高可提高 75%。无论你是开发人员还是系统架构师，本文将帮助你选择最适合自己项目的启动方式，从而在优化开发体验和生产环境性能之间找到最佳平衡。
2026年2月27日
React Server Components 全链路解析：Next.js 构建产物、导航流程与 Payload 格式
结合 Next.js 源码与构建产物，梳理 RSC 的打包结构、路由导航链路与 payload（数据包）格式，并说明其与水合和模块边界的关系。
2026年2月23日
Span 时间线树表格实现复盘：关键卡点与设计要点
梳理 Span 时间线树表格在数据建模、树渲染、布局、高亮导航、样式优先级与复用抽象上的关键卡点与落地方案。
2026年2月5日
如何实现一个软键盘弹起状态检测 Hook
使用 useSyncExternalStore 实现一个支持"预告"机制的软键盘状态检测 Hook，解决移动端键盘弹起时的时序问题。
2026年1月28日
iOS Webview 输入框自动聚焦滚动与定位错乱的相关问题
解决 iOS Webview 中输入框聚焦时页面自动滚动、定位元素错位等问题的工程化方案。
2025年7月17日
了解 React18 Concurrent渲染
深入理解 React 18 并发渲染机制，包括时间切片、优先级调度、Tearing 问题以及 useSyncExternalStore 的原理与源码分析。