LEARN / EXPLORE / WRITE
Notes.
把理解写下来，让思考更清晰。
关注 AI 系统、Web 内部机制与软件设计的深入探索。记录实现，也记录设计背后的权衡。
大模型推理基础
大模型推理基础（一）：一次大模型推理是怎么完成的
什么是大模型 模型是一种从大量数据中学习规律，并根据输入预测输出的概率系统。 大模型的“大”，一方面体现在参数规模大。现代大模型的参数量通常以 B（Billion，十亿）为单位，一些模型甚至已经达到 T（Trillion，万亿）级别。例如 Kimi K 3 的总参数量达到了 2.
工程化篇
Vue2 渐进式升级Vue3指南
总体设计 任何框架底层核心都是围绕运行时和编译时设计开发，因此针对 vue 2 项目升级 vue 3，也应该从这两方面入手。 vue 运行时包含调度系统、响应式系统、API 层等，vue 3 相较于 vue 2 做了底层架构上的调整优化，比如在响应式机制上，使用 Proxy 替代
框架篇 / React
深入React原理I：设计哲学
React 设计哲学 React 是由 Facebook（Meta） 于 2013 年开源的 革命性 JavaScript 库，专注于构建用户界面（UI）。它通过 组件化架构 与 声明式编程模型，彻底改变了开发者构建 Web 应用的方式，使复杂 UI 的开发变得高效、可维护且性能
深入React原理II：调度系统与优先级模型
引言 在浏览器单线程模型中，JavaScript 执行、垃圾回收（GC）、用户交互响应与 UI 渲染竞争同一主线程资源。用户屏幕以 60Hz 刷新率运行时，主线程必须在 16.6ms 内完成每帧渲染任务——一旦 JavaScript 执行超时，将触发渲染帧丢失（Dropped F
深入React原理III：Fiber架构革命
引言 React 更新可以划分两个大的阶段，即 render 阶段和 commit 阶段，React 采用“先计算、后提交”的思路：用 Fiber 树（内部的可调度工作结构）来组织 UI 更新，通过新旧 Fiber 对比（调和）找出差异，并在 commit 阶段把差异应用到真实
框架篇 / Vue
Diff算法：Vue 2 Vs Vue3
Diff算法：Vue 2 Vs Vue3 设计思想 无论是Vue2还是Vue3，Vue的diff算法都是基于Virtual DOM的展开计算的，并且diff都只计算同一层的节点，不会出现跨层级的diff。通过这种方式，diff算法的时间复杂度可以降到O(n^2)，其中n为节点数量
浏览器篇
深入浏览器引擎 I：从多进程架构到渲染引擎
浏览器的多进程架构 浏览器本身是由多个进程共同组成的系统，浏览器的多进程架构分为以下几个主要部分： 渲染器进程：负责将网页内容绘制到屏幕上，这是前端开发者最常接触的部分。 GPU进程：专注于图形渲染任务，提升动画和视觉效果的性能。 浏览器进程：作为总指挥，协调其他进程并管理用户界
深入浏览器引擎 II：HTML 解析全流程——从字节流到 DOM 构建
HTML解析器 前端的核心在于 HTML、CSS 和 JavaScript，这三者共同构成了现代前端技术体系。其中，HTML 作为入口文件通常首先被浏览器请求加载，因此，浏览器渲染页面的首要任务就是解析 HTML 文件。无论浏览器采用何种渲染引擎，都需要遵循 HTML 规范。按照
深入浏览器引擎 III：Chromium分层合成 vs Firefox WebRender的GPU革命
渲染管线 将 HTML 从源代码转化成屏幕像素这一过程称为渲染管线，不同渲染引擎的实现方式有所区别，但是大体上都可以分为五个步骤： 解析 样式计算 布局 绘制 合成 & 渲染 解析 HTML 解析器将 HTML 文档源代码转换为 文档对象模型（DOM）。DOM 具有两个关
深入浏览器引擎 IV：V8 垃圾回收机制
引言 与某些语言不同，JavaScript 采用隐式垃圾回收机制。这意味着 JavaScript 无法通过 API 直接触发垃圾回收操作，由JavaScript引擎内部完成垃圾回收工作。此外，由于GC通常运行在主线程中，会阻塞JS执行，因此对GC性能要求非常高。当主线程未能在 1
深入JavaScript篇
深入JavaScript I：从规范中看JavaScript运行时机制
同步：执行栈与执行上下文 执行栈与执行上下文（Execution Contexts and Execution Contexts Stack） JavaScript 执行上下文（Execution Contexts）是 JavaScript 运行时的一种环境概念，包含当前代码运行
用 JavaScript 实现 V8 的垃圾回收：从MinorGC到MajorGC
引言 JavaScript 无需手动管理内存，也未提供显式 GC API，内存回收完全由引擎自动处理。但这不意味着可以忽视内存问题——闭包、事件监听、缓存或组件状态等常见场景仍可能导致内存泄漏。作为前端开发者，理解引擎的内存模型与 GC 机制（如引用计数、标记清除、分代回收），有
系统设计篇
多页面多形态动态表单架构设计与反思
业务背景 最近需要实现一个动态表单系统，该表单会被多个页面使用，并且存在形式多样（新增表单、修改表单、查看表单、筛选表单等），并且该表单需要支持动态配置。 用户可以在配置页面进行表单配置，可以控制表单展示的组件、名称、是否必填、正则校验等配置信息，这些配置信息会映射到实际业务场景
用“三段式”构建一个高可靠的实时语音转录系统
引言 最近实现了一套实时录音录入的系统，通过“三段式”的系统设计，最终成功交付，并抗住了线上高峰，记录一下设计思路。 三段式：定边界、划层级、找流向 需求 简述下需求：业务上需要实现一套实时语言转录的系统，通过大模型进行语音转文字，并且大模型那边对音频流的要求比较严格： 以音频流
在前端实现事务：概念、方案与应用场景
事务 什么是事务 事务（Transaction）本质上是一种“成组操作的执行单元”。它把一系列步骤打包成一个整体，并保证这些步骤在执行结果上满足一个核心原则： 要么全部成功生效，要么出现错误就全部撤销，不留下中间状态。 事务这个概念在数据库层面提到的比较多，因为数据库天然承担着“
性能篇
前端性能优化六层模型
引言 在当今用户体验至上的数字时代，前端性能已不仅仅是技术指标，更是直接影响用户留存、转化率和产品口碑的关键因素。然而，面对层出不穷的性能优化文章和碎片化的优化技巧，很多开发者陷入了”知其然而不知其所以然”的困境——我们熟悉各种优化手段，却难以构建系统化的性能认知体系。 本文旨在
微前端场景下 Vue Devtools 导致的内存泄漏排查：一次 4GB 内存爆炸的深度追踪
问题背景 在接手某个微前端项目后，遇到了一个极其棘手的问题。 在持续操作页面一段时间后，Chrome 浏览器的内存占用会偶发性突破 4GB+，最终达到浏览器限制，导致页面卡死甚至直接闪退。 并且具有下面几个特征： 问题只出现在开发环境 问题无法稳定复现 生产环境未反馈类似问题 本
AI Code
当代码变得廉价：架构优先的 AI Code 思考与实践
引言：AI 时代下程序员角色的转变 在传统程序开发中，工程师的成长路径往往被划分得非常清晰。业内也一直流传着一句很经典的话：初级前端写页面，中级前端写业务，高级前端写架构。 这套分工逻辑在过去长期存在，主要原因是因为“写代码”的门槛很高，越高级的工程师越需要把精力投入在更稀缺的能
AI Coding 不会拉开差距，Harness 才会
引言 当我们使用 Cursor、Claude Code、Codex 等 AI Coding Agent 的时候，经常会遇到一种情况： 为什么别人使用 AI Coding 写出的代码又快又好，代码优雅、结构清晰、可维护性强？ 而我们让 AI 生成的代码虽然能跑，却总是伴随着各种问题
AI System
长对话角色一致性的工程方法论：从提示词技巧到 Persona Harness 架构
长对话角色漂移：一个尚未被系统化解决的问题 几乎所有做过角色对话 AI 的人都会遇到同一个现象：前 5 轮回复还能保持人设，10 轮后开始出现明显偏差，轮数越多，角色行为就越不可预测。 这通常被归为「提示词写得不够好」或「模型能力不足」。然而在我看来，这本质上是一个系统设计问题。