前端向架构突围系列

一、 什么是 AST？（代码的 X 光片） 在编译器眼中，你写的代码（源码）并不是一段有意义的逻辑，而是一堆单纯的文本字符串。 为了让计算机理解这段文本，我们需要把它转换成一种树状的数据结构，这就叫

一、 核心指标三巨头：LCP、INP 与 CLS Google 在几十个性能指标中，钦点了三个作为 Core Web Vitals (CWV) 。这不仅关乎用户体验，还直接影响 SEO 排名。 1.1

一、 单线程的谎言：浏览器其实是多线程的 虽然我们常说 JS 是单线程的，但这并不代表浏览器是傻瓜。 JS 引擎（如 V8）确实只有一个主线程（Main Thread），既要跑 JS，又要算 Layo

一、 传统的流水线：主线程的“苦力活” 在浏览器把像素推送到屏幕之前，必须先经过一条被称为 关键渲染路径 (Critical Rendering Path, CRP) 的流水线。这条流水线主要运行在

第二篇：守门——浏览器的资源模型：缓存策略、DNS 与请求优先级 一、 纵深防御：四级缓存体系的决策顺序 当浏览器发起一个请求时（比如 GET /style.css），它绝不会直接发给网络。它会按顺序

一、 TCP 时代：可靠传输的代价 在很长一段时间里，Web 建立在 TCP/IP 协议栈之上。TCP（传输控制协议）的设计初衷是可靠性，而不是速度。这为现代 Web 埋下了最初的隐患。 1.1 三次

AI快速的发展中，可能在未来前后端岗位会发生，但试问一下，如果真到了那个时候，波及到的不会只有互联网行业，而是我们的生活方式同样会发生变化，我们唯有随需而变。

一、 观察者 vs 发布订阅，别再傻傻分不清 虽然这两个模式长得很像，但在架构设计中，它们的应用场景截然不同。 1.1 观察者模式 (Observer Pattern) 角色： Subject（被观察

在封装复杂组件时，习惯使用**“配置对象驱动”**的模式。 > 比如写一个 Tabs 组件，他们会定义一个 `items` 属性，让用户传入一个数组：`[{ title: 'A', content

你是否经历过这样的场景： > 你的团队维护了一个功能强大的 `<SuperSelect />` 组件，集成了搜索、多选、远程加载、虚拟滚动。 某天，产品经理走过来说：“这个下拉框在移动端能不能变成

一、 什么是模块？从“物理文件”到“逻辑单元” 初级工程师看模块，看到的是文件后缀（.js, .vue, .tsx）；架构师看模块，看到的是职责的边界。 1.1 模块化的三个层级 我们的认知通常经历了

我们不抄作业，我们看思路，整理思维，站在高一层级去看待框架、业务和问题，随着团队规模的扩张，我们往往会陷入一个怪圈：代码复用变得越来越难，基建升级变得越来越慢，CI/CD 的排队时间变得越来越长

一、 熵增定律：为什么 Copy-Paste 是万恶之源？ 在没有脚手架体系的团队，新项目的建立通常源于一句：“你去把那个老项目的配置拷贝一份过来。” 这种“细胞分裂”式的工程创建方式，导致了严重的

一、 架构的降维打击：Vite 的 O(1) 启动哲学 Vite（法语意为“快”）的横空出世，给了当时的构建圈一记响亮的耳光。它的核心武器不是算法优化，而是 “偷懒” 。 1.1 从 Eager 到

一、 史前时代的终结：从任务流到模块流 在 Webpack 称霸之前，统治江湖的是 Grunt 和 Gulp。 我们要理解 Webpack 的伟大，首先要理解 Gulp 的局限。 1.1 任务运行器

一、 混沌初开：嵌套结构的物理原罪 时光倒流回 npm v1/v2 的时代。那时候的设计哲学非常简单粗暴： “依赖树长什么样，磁盘文件结构就长什么样。” 假设你的项目依赖了 A，A 又依赖了 B (v

第一篇：基石——JavaScript 模块化演进史与现代最佳实践 一、 混沌与突围：史前时代的架构挣扎 在 Node.js 诞生之前，JavaScript 在浏览器里更像是一种“胶水语言”。那时候没有

这是《前端像架构突围 - 框架设计》系列的最终章。 我们不专门去说框架聊响应式, 我们去学思想、看更上层的东西。 在前六章，我们聊了面向对象的本质、开闭原则的威力、以及接口职责的隔离。

在业务中更新迭代过快时, 可以不去关心这些东西, 但这些东西的输出, 更多的是要去转变你的思维, 让你有一个概念、印象这是一个潜移默化的转变过程, 让你看框架、看问题、看业务时, 能站在上一层。

一、 什么是里氏替换？（别背公式，看人话） 教科书上说： “若对每个类型 S 的对象 o1，都存在一个类型 T 的对象 o2，使得在所有针对 T 编写的程序 P 中，用 o1 替换 o2 后，程序 P