Cloudflare 优化
从 Link 响应头到 Cloudflare 103：静态博客的 Early Hints 实现
以 Next.js 静态导出、构建时 Link 映射、Nginx 响应头和 Cloudflare 为主线，完整实现并验证 HTTP 103 Early Hints。
预计阅读 12 分钟
WRITING INDEX
文章索引
从一次问题的定位，到一套方案的形成。这里收录前端架构、实时协同、性能优化、边缘计算与 AI 工程实践。
2026
5 篇
Cloudflare 优化
Cloudflare 的优选 IP 优化
用 Cloudflare for SaaS、CloudflareSpeedTest 和宝塔计划任务，为同一域名下的博客入口自动选择 Cloudflare IP，并保留可回滚的源站链路。
预计阅读 15 分钟
AI 工程
AI 基础
实践方法
2025
27 篇
React 进阶
图解 React 组件生命周期与 Effect 执行时序：从渲染阶段到 Commit 阶段
深入剖析 React 父子组件在挂载、更新与卸载过程中的函数体执行、useLayoutEffect、DOM 绘制与 useEffect 清理函数的精确时序。
预计阅读 8 分钟
全栈与边缘计算
边缘 WebSocket 实时协同：Deno Deploy 与 Hocuspocus
探索基于 Deno Deploy 与 Hocuspocus (Yjs) 在无服务器边缘环境中构建多人实时协同富文本 WebSocket 服务的架构与部署方案。
预计阅读 8 分钟
前端工程化
可视化动态表单设计器架构实践：拖拽编排、JSON Schema 驱动与组件渲染器
全面解析低代码/零代码表单设计器架构：涵盖拖拽画布（Drag & Drop）、JSON Schema 字段协议定义、右侧属性联动配置与动态渲染引擎实现。
预计阅读 9 分钟
系统架构
企业级云端协同笔记系统架构设计：从状态同步机、目录树到版本快照回滚
全面解析实时协同文档系统的全栈工程架构：涵盖 Yjs 状态同步状态机、千万级文档虚拟目录树、多租户权限控制与历史版本快照差异比对。
预计阅读 10 分钟
系统架构
Jebet 敏捷项目管理平台架构设计：多租户工作区、MobX 响应式状态与 Socket.io 实时协同
全面解析现代团队协作平台的全栈架构设计：涵盖多租户工作区隔离、看板（Kanban）高频拖拽性能治理、MobX 状态中枢与 Socket.io 实时消息总线。
预计阅读 9 分钟
架构设计
LJH-Design 设计系统架构设计：从 Design Tokens、Radix UI 到 AI 辅助生成平台
全面解析现代前端设计系统架构：涵盖原子化 Design Tokens 规范、Headless 无头 UI 原语解耦、深浅主题切换与 AI 辅助界面生成系统的落地实践。
预计阅读 9 分钟
性能调优
大型前端设计平台性能优化实战：从 Fabric.js / Tiptap 重型依赖分包到 SWC 编译调优
全面剖析重型设计系统与画板应用的端到端性能治理：涵盖 Canvas (Fabric.js) 与富文本模块动态懒加载、lodash-es 树摇、关键 CSS 提取与 Core Web Vitals 调优。
预计阅读 9 分钟
网络与运维
全球 CDN 边缘加速原理解析与 Cloudflare 缓存层级调优实战
深入解析 CDN Anycast 任播路由、边缘 PoP 节点缓存分层与 Cloudflare Cache Rules 规则配置，让静态资源实现毫秒级全球触达。
预计阅读 8 分钟
全栈与安全
告别糟糕的图形验证码：Cloudflare Turnstile 无感人机验证全栈集成实践
全面解析 Cloudflare Turnstile 智能人机验证原理，提供 React / Next.js 前端无缝嵌入与 Node.js / Hono 后端 Token 安全校验方案。
预计阅读 8 分钟
前端核心
为什么现代浏览器禁止 a 标签直接在新窗口打开 Data URL？
解析 Chromium 顶级窗口 Data URL 导航限制的安全背景，并提供 Data URL 转 Blob ObjectURL 的无损转换与内存安全释放方案。
预计阅读 6 分钟
性能调优
敏捷协作平台 7MB 巨石应用瘦身实战：ECharts 按需引入、图片压缩与构建分包调优
全面复盘大型中后台协作平台从 7MB 臃肿包体到 1.1MB 极速加载的瘦身历程：涵盖 ECharts 模块化改造、Vite 分包策略、WebP 图片压缩与 Gzip 调优。
预计阅读 8 分钟
网络与 SEO
301 / 302 / 307 / 308 HTTP 重定向状态码深度解析：SEO 权重传递与方法变更陷阱
全面剖析 30X 重定向状态码的规范演进、POST 请求方法被篡改为 GET 的历史包袱、搜索引擎权重传递机制以及 302 网址劫持防御。
预计阅读 8 分钟
性能调优
复杂动态表单系统性能优化实战：从 Excel.js 按需隔离、Iconify 预连接到局部精准重绘
全面剖析大体量动态表单的性能治理链路：涵盖 ExcelJS 重型导出模块动态分包、Iconify 边缘预连接优化、Gzip/Brotli 压缩与输入框卡顿调优。
预计阅读 8 分钟
JavaScript 核心
为什么 Biome / ESLint 推荐用 for...of 替代 forEach？从异步文件上传的踩坑说起
深入剖析 Array.prototype.forEach 无法 await 异步回调的底层机制，对比 for...of 串行执行与 Promise.all 并发控制的最佳实践。
预计阅读 7 分钟
性能调优
协同笔记系统端到端性能调优：SPA 路由 404、Lighthouse 95+、Tree-shaking 与 Bundle 分包实战
全面记录富文本协同 SPA 应用的性能优化闭环：从 Vercel History 路由重定向解决 404，到 lodash-es 树摇、highlight.js 按需语言加载与 Vite 分包瘦身。
预计阅读 9 分钟
建站与专题
基于 Next.js App Router 与 Nextra 4 构建现代静态技术博客全流程
全面剖析基于 Next.js App Router 与 Nextra 4 搭建个人技术博客的架构方案：涵盖 MDX 自定义组件注入、Pagefind 离线全文检索、Sitemap 自动生成与 Docker 多阶段构建部署。
预计阅读 9 分钟
React 进阶
TanStack Query (React Query) 架构与性能优化实战：请求去重、缓存分层与数据预取
全面剖析 TanStack Query 服务端状态管理哲学：对比传统 Axios 封装，详解 QueryKey 缓存分层、并发请求自动合并去重、乐观更新与预取机制。
预计阅读 9 分钟
协同架构
基于 Tiptap + Yjs + Hocuspocus 的企业级多人富文本协同架构实战
详解现代协同编辑器全栈架构：从 Tiptap ProseMirror 节点与 Y.Doc 映射，到 Hocuspocus WebSocket 状态分发、实时光标感知与 Webhook 增量持久化。
预计阅读 9 分钟
前端工程化
为什么开发 TypeScript 库首选 tsup？基于 esbuild 的极速双格式打包实战
全面解析 tsup 核心特性：双格式（ESM + CommonJS）输出、自动生成 d.ts 类型定义、Monorepo 实时监听与 package.json 导出规范。
预计阅读 8 分钟
全栈开发
用 Hono + Zod 在 Next.js 中构建端到端类型安全的 RPC API 路由
告别无类型 fetch 与分散的 Route Handlers：利用 Hono RPC、zValidator 与 hc 客户端在 Next.js 全栈应用中实现从后端到 React Query 的端到端类型推导。
预计阅读 9 分钟
AI 工程
基于 Google Gemini 多模态视觉模型的图像智能识别与结构化提取实战
全面剖析 Gemini 1.5 / 2.0 Flash 视觉模型的多模态能力：涵盖图片 URL 抓取、Multipart 文件流式上传、OCR 票据识别与 JSON 结构化提取。
预计阅读 9 分钟
前端工程化
Markdown/MDX 渲染原理与 Nextra 选型
全面解析现代前端 Markdown 渲染原理：从 remark/rehype 抽象语法树（AST）转换，到 Nextra 与 Fumadocs 等现代文档框架的选型与踩坑实践。
预计阅读 9 分钟
前端图形学
流程图自定义连线算法与吸附计算：基于 React Flow 的 SVG 自定义 Edge 渲染
深入解析流程图与拓扑图中的自定义连线算法：涵盖贝塞尔曲线控制点计算、SVG 动态路径生成、锚点吸附算法与 React Flow Custom Edge 实战。
预计阅读 8 分钟
前端工程化
Biome 与 Git Hooks：前端提交自动校验实践
全面解析现代前端工程化提交流：使用 Rust 编写的极速 Biome 替代 ESLint/Prettier，结合 Simple-Git-Hooks 与 lint-staged 构建毫秒级 Git 预提交强约束。
预计阅读 8 分钟
前端图形学
Web Canvas 2D 图形库选型与性能对比
全面评测主流 Web Canvas 图形库：对比 Fabric.js 的对象模型与 SVG 序列化、Konva 的分层缓存机制、Pixi.js 的 WebGL 极致性能与 Paper.js 的矢量布尔运算。
预计阅读 9 分钟
协同架构
多人实时协同冲突解决算法深度剖析：OT（操作转换）与 CRDT（无冲突复制数据类型）
全面解析分布式与实时协同编辑的核心冲突算法：对比 Google Docs 的 OT 集中式转换矩阵，与 Yjs / Automerge 所采用的 CRDT（状态型与操作型）数学模型及 YATA 算法实现。
预计阅读 10 分钟
AI 工程
Google Gemini API 全栈调用指南：从 Edge 代理、流式传输（SSE）到结构化输出
全面解析 Google Gemini 1.5 / 2.0 Flash 模型的全栈集成方案：涵盖 API Key 申请、Hono 边缘网关代理、流式数据响应与 Function Calling 实战。
预计阅读 9 分钟
2024
4 篇
全栈与边缘计算
后端部署到边缘函数的架构探索：用 Hono 构建零服务器高性能 API
全面剖析传统 Node.js 容器与 Edge Runtime 边缘函数的差异，记录使用 Hono 框架在 Vercel / Cloudflare 边缘环境快速构建和部署轻量后端的完整链路。
预计阅读 9 分钟
前端工程化
Monorepo 实践：pnpm Workspace 与 Turborepo
深度解析前端 Monorepo 架构演进：对比 Lerna 与 Turborepo 的构建管道与哈希缓存，详解 pnpm workspace 依赖拓扑、软硬链接去重与多包统一发版。
预计阅读 10 分钟
前端架构
基于 Zod 模式推导的声明式动态表单（AutoForm）可行性研究与架构实践
深度探索以 Zod Schema 为单一事实来源（Single Source of Truth）自动推导 UI 表单的可行性：涵盖类型反射、字段配置覆盖（fieldConfig）与复杂嵌套校验。
预计阅读 9 分钟
AI 工程
DeepSeek 大模型本地私有化部署实战：从硬件选型、Ollama / LM Studio 到 WebUI 集成
全面剖析开源大模型本地离线运行方案：涵盖量化级别（GGUF Q4/Q8）、显存（VRAM）预算计算、Ollama / LM Studio 极速部署与 OpenAI 兼容 API 接入。
预计阅读 9 分钟