前端向架构突围系列

一、 传统的流水线：主线程的“苦力活” 在浏览器把像素推送到屏幕之前，必须先经过一条被称为 关键渲染路径 (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

一、 场景：一次痛苦的“技术升级” 想象一下，你负责一个复杂的 B 端系统。半年前，为了快速上线，你直接在业务 Hooks 里引入了 Axios，并散落到了项目的各个角落： 噩梦开始了： 由于公司架构

什么是开闭原则 (OCP)？ 开闭原则，听起来很高大上，其实说人话就是八个字： 对扩展开放，对修改关闭。 对扩展开放 (Open for extension) ：当有新需求来了，你应该能通过“增加新代

你有没有过这种经历：新接手了一个项目，产品经理让你把一个按钮往左移 5 像素。你心想：“这不有手就行？” 什么是“设计臭味”？ “代码臭味”（Code Smell）这个词不是说代码真的有味儿（虽然有时