一位前端架构师的技术博客，深度记录前端工程化、性能优化、现代 Web 平台与大模型 AI 应用的工程实践。https://blog.zhangsong.site/zh-CNhttps://blog.zhangsong.site/blog/becoming-frontend-architect/https://blog.zhangsong.site/blog/becoming-frontend-architect/架构师与资深工程师的差异不在代码量，而在思维方式。本文谈谈从工程师到架构师的关键转变。Thu, 22 Oct 2026 00:00:00 GMT成长架构一舟https://blog.zhangsong.site/blog/frontend-security-xss-csp/https://blog.zhangsong.site/blog/frontend-security-xss-csp/梳理前端最常见的三大安全威胁 XSS、CSRF 与 CSP 防御，附可落地的防护清单。Thu, 22 Oct 2026 00:00:00 GMT安全一舟https://blog.zhangsong.site/blog/bff-layer-design/https://blog.zhangsong.site/blog/bff-layer-design/理解 BFF（Backend for Frontend）在微服务架构中的价值，以及如何为前端设计专属的服务聚合层。Wed, 21 Oct 2026 00:00:00 GMT架构一舟https://blog.zhangsong.site/blog/frontend-testing-strategy/https://blog.zhangsong.site/blog/frontend-testing-strategy/用「测试金字塔」指导前端测试投入，讲清单元、组件、端到端测试的分工与取舍。Tue, 20 Oct 2026 00:00:00 GMT质量一舟https://blog.zhangsong.site/blog/typescript-type-gymnastics/https://blog.zhangsong.site/blog/typescript-type-gymnastics/从条件类型、映射类型到类型推断，掌握 TS 类型编程的核心工具，写出类型安全的通用代码。Mon, 19 Oct 2026 00:00:00 GMTTypeScript一舟https://blog.zhangsong.site/blog/frontend-a11y-guide/https://blog.zhangsong.site/blog/frontend-a11y-guide/可访问性不仅是合规要求，更是产品质量的一部分。本文给出语义化、键盘、ARIA 的实用清单。Sun, 18 Oct 2026 00:00:00 GMT质量一舟https://blog.zhangsong.site/blog/design-system-tokens/https://blog.zhangsong.site/blog/design-system-tokens/构建一套可维护的设计系统：设计 Token 的层级设计、组件库的工程化与文档化交付。Sat, 17 Oct 2026 00:00:00 GMT架构CSS一舟https://blog.zhangsong.site/blog/micro-frontend-module-federation/https://blog.zhangsong.site/blog/micro-frontend-module-federation/梳理微前端的适用场景与主流方案，重点解读 Module Federation 2.0 带来的运行时共享新能力。Fri, 16 Oct 2026 00:00:00 GMT架构一舟https://blog.zhangsong.site/blog/ai-observability-eval/https://blog.zhangsong.site/blog/ai-observability-eval/大模型应用的「不确定性」要求新的质量保障手段。本文讲清 AI 应用如何做评估、监控与持续改进。Thu, 15 Oct 2026 00:00:00 GMTAI质量一舟https://blog.zhangsong.site/blog/lora-qlora-finetuning/https://blog.zhangsong.site/blog/lora-qlora-finetuning/理解为什么需要微调、全参微调为何昂贵，以及 LoRA/QLoRA 如何用极低成本实现高效微调。Wed, 14 Oct 2026 00:00:00 GMTAI一舟https://blog.zhangsong.site/blog/function-calling-tool-use/https://blog.zhangsong.site/blog/function-calling-tool-use/理解 Function Calling 的原理与实现，让大模型从「只会说话」变成「能做事」的智能体。Tue, 13 Oct 2026 00:00:00 GMTAI一舟https://blog.zhangsong.site/blog/ai-assisted-coding-workflow/https://blog.zhangsong.site/blog/ai-assisted-coding-workflow/跳出「自动补全」的思维定式，构建一套以 AI 为协作伙伴的编程工作流：设计、生成、审查、测试。Mon, 12 Oct 2026 00:00:00 GMTAI工程化一舟https://blog.zhangsong.site/blog/langgraph-multi-agent/https://blog.zhangsong.site/blog/langgraph-multi-agent/从单 Agent 到多 Agent 协作，理解 LangGraph 的图式编排思想，构建可控、可观测的智能体系统。Sat, 10 Oct 2026 00:00:00 GMTAI一舟https://blog.zhangsong.site/blog/vector-database-semantic-search/https://blog.zhangsong.site/blog/vector-database-semantic-search/从向量、相似度到索引，讲清语义搜索的底层原理，以及向量数据库与普通数据库的区别。Fri, 09 Oct 2026 00:00:00 GMTAI一舟https://blog.zhangsong.site/blog/ai-agent-frontend-ui/https://blog.zhangsong.site/blog/ai-agent-frontend-ui/AI 应用有独特的交互需求：流式输出、工具调用可视化、过程透明与可干预。本文梳理 Agent 前端的设计范式。Thu, 08 Oct 2026 00:00:00 GMTAI架构一舟https://blog.zhangsong.site/blog/webllm-browser-inference/https://blog.zhangsong.site/blog/webllm-browser-inference/探索在浏览器端运行大模型的可行性：WebLLM、WebGPU 加速、量化模型与隐私优势。Wed, 07 Oct 2026 00:00:00 GMTAI浏览器一舟https://blog.zhangsong.site/blog/prompt-engineering-handbook/https://blog.zhangsong.site/blog/prompt-engineering-handbook/从零样本到思维链再到结构化输出，系统梳理提示工程的实用技巧，附可复用的模板。Mon, 05 Oct 2026 00:00:00 GMTAI一舟https://blog.zhangsong.site/blog/transformer-attention/https://blog.zhangsong.site/blog/transformer-attention/用前端工程师能懂的语言，讲清楚 Transformer 的注意力机制到底在做什么，以及它为什么强大。Sat, 03 Oct 2026 00:00:00 GMTAI一舟https://blog.zhangsong.site/blog/llm-rag-architecture/https://blog.zhangsong.site/blog/llm-rag-architecture/深入讲解检索增强生成（RAG）的完整架构：文档切分、向量化、检索与生成，附工程实现要点。Thu, 01 Oct 2026 00:00:00 GMTAI架构一舟https://blog.zhangsong.site/blog/frontend-ai-transition/https://blog.zhangsong.site/blog/frontend-ai-transition/在大模型时代重新审视前端工程师的价值定位，梳理从「写 UI」到「构建 AI 应用」的转型路径与技能地图。Tue, 29 Sep 2026 00:00:00 GMTAI成长一舟https://blog.zhangsong.site/blog/edge-cdn-optimization/https://blog.zhangsong.site/blog/edge-cdn-optimization/理解 CDN 的加速原理与边缘计算的兴起，以及如何利用边缘能力进一步优化前端性能。Sun, 27 Sep 2026 00:00:00 GMT性能架构一舟https://blog.zhangsong.site/blog/code-splitting-lazy-load/https://blog.zhangsong.site/blog/code-splitting-lazy-load/从路由级、组件级到库级，系统讲解代码分割的粒度选择与懒加载的正确姿势，附避坑指南。Thu, 24 Sep 2026 00:00:00 GMT性能一舟https://blog.zhangsong.site/blog/memory-leak-devtools/https://blog.zhangsong.site/blog/memory-leak-devtools/用 Chrome DevTools 的 Memory 面板定位前端内存泄漏，从堆快照到时间线分析的完整排查流程。Mon, 21 Sep 2026 00:00:00 GMT性能质量一舟https://blog.zhangsong.site/blog/frontend-monitoring-rum/https://blog.zhangsong.site/blog/frontend-monitoring-rum/从真实用户监控（RUM）入手，搭建前端性能、错误与业务指标的可观测性体系。Fri, 18 Sep 2026 00:00:00 GMT性能质量一舟https://blog.zhangsong.site/blog/image-optimization-avif/https://blog.zhangsong.site/blog/image-optimization-avif/图片是网页体积的大头，本文从格式选择、响应式尺寸、懒加载到压缩管线，给出完整优化方案。Tue, 15 Sep 2026 00:00:00 GMT性能一舟https://blog.zhangsong.site/blog/core-web-vitals-2026/https://blog.zhangsong.site/blog/core-web-vitals-2026/系统梳理三大核心 Web 指标 LCP、INP、CLS 的测量口径与优化手段，附可落地的检查清单。Sat, 12 Sep 2026 00:00:00 GMT性能一舟https://blog.zhangsong.site/blog/browser-cache-strategy/https://blog.zhangsong.site/blog/browser-cache-strategy/梳理 HTTP 缓存头、Service Worker 的 Cache API 与内存/磁盘缓存的层次，构建高效的缓存体系。Sun, 06 Sep 2026 00:00:00 GMT性能浏览器一舟https://blog.zhangsong.site/blog/inp-optimization/https://blog.zhangsong.site/blog/inp-optimization/INP 取代 FID 成为交互响应核心指标，本文讲解它的测量原理、常见瓶颈与针对性优化策略。Mon, 31 Aug 2026 00:00:00 GMT性能一舟https://blog.zhangsong.site/blog/css-grid-subgrid-masonry/https://blog.zhangsong.site/blog/css-grid-subgrid-masonry/从 Grid 的二维布局，到 Subgrid 的嵌套对齐，再到原生 masonry 瀑布流，梳理现代 CSS 布局能力。Tue, 25 Aug 2026 00:00:00 GMTCSS一舟https://blog.zhangsong.site/blog/browser-rendering-pipeline/https://blog.zhangsong.site/blog/browser-rendering-pipeline/拆解浏览器从解析 HTML 到屏幕绘制的完整流程：DOM、CSSOM、渲染树、布局、绘制与合成。Wed, 19 Aug 2026 00:00:00 GMT浏览器性能一舟https://blog.zhangsong.site/blog/wasm-worker-multithread/https://blog.zhangsong.site/blog/wasm-worker-multithread/用 Web Worker 与 WebAssembly 把重计算任务移出主线程，讲解两者的分工、通信与实战案例。Thu, 13 Aug 2026 00:00:00 GMT浏览器性能一舟https://blog.zhangsong.site/blog/webgpu-intro/https://blog.zhangsong.site/blog/webgpu-intro/了解 WebGPU 如何释放 GPU 并行计算能力，以及它与 WebGL 的本质区别和典型应用场景。Fri, 07 Aug 2026 00:00:00 GMT浏览器性能一舟https://blog.zhangsong.site/blog/css-container-queries-has/https://blog.zhangsong.site/blog/css-container-queries-has/告别「基于视口」的媒体查询，用容器查询与 :has() 选择器构建真正组件化的响应式布局。Sat, 01 Aug 2026 00:00:00 GMTCSS一舟https://blog.zhangsong.site/blog/view-transitions-api/https://blog.zhangsong.site/blog/view-transitions-api/无需引入动画库，用原生 View Transitions API 实现 SPA 与 MPA 的页面切换动画，附关键 API 与踩坑。Sun, 26 Jul 2026 00:00:00 GMT浏览器CSS一舟https://blog.zhangsong.site/blog/mini-react-scheduler/https://blog.zhangsong.site/blog/mini-react-scheduler/用几十行代码实现一个带优先级与时间切片的任务调度器，理解 React 并发渲染的核心机制。Mon, 20 Jul 2026 00:00:00 GMTReact一舟https://blog.zhangsong.site/blog/suspense-streaming-ssr/https://blog.zhangsong.site/blog/suspense-streaming-ssr/理解 Suspense 在服务端渲染中的作用，以及流式 SSR 如何让页面「边渲染边输出」，显著改善感知性能。Tue, 14 Jul 2026 00:00:00 GMTReact性能一舟https://blog.zhangsong.site/blog/react-compiler/https://blog.zhangsong.site/blog/react-compiler/解读 React Compiler 的自动记忆化原理，以及它如何替代 useMemo、useCallback 的繁琐手动优化。Wed, 08 Jul 2026 00:00:00 GMTReact性能一舟https://blog.zhangsong.site/blog/react-rendering-fiber/https://blog.zhangsong.site/blog/react-rendering-fiber/从栈调和到 Fiber 架构，理解 React 如何实现可中断的渲染，以及并发特性背后的调度原理。Thu, 02 Jul 2026 00:00:00 GMTReact性能一舟https://blog.zhangsong.site/blog/state-management-2026/https://blog.zhangsong.site/blog/state-management-2026/从「服务端状态 vs 客户端状态」的分类出发，重新审视 2026 年主流状态管理方案的适用边界。Fri, 26 Jun 2026 00:00:00 GMTReact一舟https://blog.zhangsong.site/blog/nextjs-cache-guide/https://blog.zhangsong.site/blog/nextjs-cache-guide/梳理 App Router 中四层缓存的边界与失效策略，解决「改了数据页面却不更新」这一高频困惑。Sat, 20 Jun 2026 00:00:00 GMT框架React一舟https://blog.zhangsong.site/blog/react-19-actions-optimistic/https://blog.zhangsong.site/blog/react-19-actions-optimistic/用表单提交与乐观更新两个典型场景，讲清 React 19 的 Server Actions、useActionState 与 useOptimistic。Sun, 14 Jun 2026 00:00:00 GMTReact框架一舟https://blog.zhangsong.site/blog/react-server-components/https://blog.zhangsong.site/blog/react-server-components/抛开语法糖，从「组件在哪运行」这一根本问题出发，讲清 RSC 的心智模型与客户端/服务端组件边界。Mon, 08 Jun 2026 00:00:00 GMTReact框架一舟https://blog.zhangsong.site/blog/pnpm-hardlink-ghost-deps/https://blog.zhangsong.site/blog/pnpm-hardlink-ghost-deps/揭开 node_modules 的底层机制：pnpm 如何用硬链接与符号链接同时实现省磁盘与防幽灵依赖。Tue, 02 Jun 2026 00:00:00 GMT工程化一舟https://blog.zhangsong.site/blog/frontend-cicd-pipeline/https://blog.zhangsong.site/blog/frontend-cicd-pipeline/设计一条前端专属的 CI/CD 流水线：质量门禁、构建产物、多环境部署与回滚，附完整流程拆解。Wed, 27 May 2026 00:00:00 GMT工程化质量一舟https://blog.zhangsong.site/blog/bundle-analysis-optimization/https://blog.zhangsong.site/blog/bundle-analysis-optimization/从看懂 bundle 分析报告开始，系统性地给出压缩首屏体积的七种实用手段，附每种手段的适用场景与收益。Thu, 21 May 2026 00:00:00 GMT性能工程化一舟https://blog.zhangsong.site/blog/webpack-to-rspack-migration/https://blog.zhangsong.site/blog/webpack-to-rspack-migration/记录一次真实的生产环境迁移：如何在不影响业务的前提下，把构建时间从 8 分钟压到 1 分钟以内。Fri, 15 May 2026 00:00:00 GMT工程化一舟https://blog.zhangsong.site/blog/monorepo-pnpm-turborepo/https://blog.zhangsong.site/blog/monorepo-pnpm-turborepo/以 pnpm 的硬链接依赖管理与 Turborepo 的增量任务调度为核心，搭建一套可落地的 Monorepo 工程规范。Sat, 09 May 2026 00:00:00 GMT工程化一舟https://blog.zhangsong.site/blog/esm-http-build-impact/https://blog.zhangsong.site/blog/esm-http-build-impact/从模块化演进史讲起，厘清 ESM 与 CommonJS 的本质差异，以及 HTTP/2、HTTP/3 如何重塑打包策略。Sun, 03 May 2026 00:00:00 GMT工程化浏览器一舟https://blog.zhangsong.site/blog/vite-rolldown-evolution/https://blog.zhangsong.site/blog/vite-rolldown-evolution/Vite 从 esbuild+Rollup 双引擎走向 Rolldown 统一内核，本文解读这一技术路线背后的动机与对插件生态的影响。Tue, 28 Apr 2026 00:00:00 GMT工程化一舟https://blog.zhangsong.site/blog/turbopack-rspack-2026/https://blog.zhangsong.site/blog/turbopack-rspack-2026/从 Webpack 一家独大到 Turbopack 与 Rspack 双雄并立，梳理 2026 年主流构建工具的演进脉络与选型依据。Wed, 22 Apr 2026 00:00:00 GMT工程化性能一舟