[!info] related notes

• 前置笔记:
• 相关 MOC:
• 相关资源:

如何学习前端底层原理

目标

“学底层”不是把源码读得越多越好。

目标是形成一套能迁移到新问题的机制模型：

现象
→ 判断属于哪一层
→ 找到该层真实机制
→ 实验验证
→ 形成可复用判断

第一步：从真实问题开始

比起无目标地读大型源码，优先选择真实疑问：

• 为什么两个请求会发生竞态？
• 为什么 SSE 被代理后不再流式？
• 为什么组件重复渲染？
• 为什么某个布局触发重排？
• 为什么一个模块在 Node 能解析，在 bundler 中行为不同？

问题给学习提供边界。

第二步：定位抽象层

先判断问题主要发生在哪一层：

语言语义
框架
浏览器
网络协议
构建系统
操作系统 / Runtime
业务状态模型

不要用框架名替代根因层。

例如“React 页面卡”可能真正发生在：

• JavaScript long task；
• layout；
• network waterfall；
• state ownership；
• Effect 重复同步。

第三步：按证据强度学习

常见顺序：

1. 建立当前假设；
2. 查官方文档 / 规范；
3. 必要时进入源码；
4. 写最小实验；
5. 观察真实输出 / trace / network / call stack；
6. 修正模型。

源码是证据源之一，不是“学得深”的仪式。

第四步：做最小实验

好的实验一次只区分一个假设。

例如事件循环：

预测输出
→ 运行
→ 修改一个调度条件
→ 再预测
→ 解释差异

比复制十段经典题更能形成机制模型。

第五步：沉淀四类内容

学完一个原理，至少能留下：

• 机制：它为什么这样工作；
• 边界：什么时候不适用；
• 证据：如何验证；
• 迁移：遇到相似问题怎么判断。

这比“记住一个最佳实践”更稳定。

一个通用循环

真实问题
→ 抽象层定位
→ 机制假设
→ 官方资料 / 源码
→ 最小实验
→ 解释结果
→ 写成 concept / synthesis / debug
→ 间隔后重新推导

无提示执行检查

不看正文，拿最近遇到的一个前端问题完成：

1. 用一句话描述现象，禁止直接把猜测当根因。
2. 列出它可能属于的 2–4 个抽象层。
3. 为每个主要假设写一个能区分它的证据或实验。
4. 指出什么时候需要看框架源码，什么时候官方文档/浏览器 DevTools 已经足够。
5. 做一个只改变一个变量的最小实验。
6. 不看资料解释实验结果，并写出机制与边界。
7. 找一个不同场景，说明这个模型如何迁移过去。