主题文章
前端
从语言、浏览器和框架内部机制走向构建、质量、性能、安全与跨端工程。先按专题建立机制地图，再沿文章中的执行轨迹和实验验证细节。104 篇文章重学前端
重学前端：学习方法以规范、运行时和工程实践三条线重建前端知识体系HTML 标准与语言设计从源码到 DOM，理解 HTML 的解析、容错与元素行为DOCTYPE、DTD 与标准模式从一次布局差异理解现代 DOCTYPE 和历史兼容模式HTML Head 与元数据从浏览器加载顺序理解标题、编码、资源和搜索元数据语义化 HTML从用户任务出发，选择自带正确行为的 HTML 元素ARIA 与可访问性语义从一个切换按钮理解角色、名称、状态和键盘行为链接、资源与嵌入内容从 URL 解析到 iframe 隔离，理解浏览器如何加载外部内容CSS At-rules 与规则系统从判断对象理解媒体、容器、能力、层叠和资源规则CSS 选择器与伪元素从匹配目标理解组合、优先级、状态伪类和生成内容CSS 布局与格式化上下文从正常流、包含块和内容约束选择 Flex、Grid 与定位Web 色彩系统从颜色空间、透明度和对比度理解网页色彩CSS 动画与过渡从状态变化理解 transition、animation、性能和减弱动态效果CSS 与文档资源理解 link、样式表加载、资源提示和超链接关系JavaScript 类型系统掌握语言类型、转换、相等性和数值边界JavaScript 对象模型从属性描述符理解对象、访问器、内建能力和函数调用原型与继承从属性查找理解 [[Prototype]]、new、class 与组合JavaScript 函数从调用方式理解 this、普通函数、箭头函数、生成器和异步函数作用域与闭包从词法环境和生命周期理解闭包、var、let 与 Realm事件循环与任务队列用两次浏览器实验理解任务、微任务、渲染和异步竞态JavaScript 语法结构区分脚本、模块、声明、语句和表达式JavaScript 词法系统理解空白、标识符、字面量、模板和正则的分词边界自动分号插入用解析规则而不是代码风格争论理解 ASICompletion Record 与控制流从规范完成记录理解 return、throw、break、finally 和表达式求值浏览器网络与 HTTP从一次导航理解请求、缓存、HTTPS、HTTP/2 与 HTTP/3HTML 解析与 DOM 构建从字节流理解 tokenizer、tree builder、容错与脚本阻塞CSSOM 与样式计算区分声明、层叠、计算值、实际几何和 CSSOM ViewDOM API 与节点操作从节点身份理解创建、移动、克隆、Range 与变更观察DOM 事件系统从点击一个嵌套按钮开始，观察事件目标、捕获、冒泡、默认行为和事件委托。浏览器布局与格式化上下文从 display、包含块、行盒、定位、浮动、Flex 和 Grid 理解几何浏览器样式与布局过程从样式失效理解层叠、布局、绘制与合成的触发关系浏览器绘制与合成理解 paint order、display list、layer、raster 与 compositor前端架构与组件化从职责、依赖和变化频率设计组件边界持续集成方法让自动检查成为可重复的质量反馈回路性能工程方法从指标、预算、测量到回归建立性能验证流程前端工程系统设计围绕开发、构建、发布和观测搭建工程系统前端工具链方法基于反馈周期和可替换性选择工具前端常见问题与判断框架用规范、最小实验和工程约束回答前端开放问题
基础与手写
现代前端：语言与运行时
TypeScript
TypeScript 类型关系与结构化类型系统从赋值兼容进入子类型、结构化类型、对象新鲜度、联合与交叉，解释 TypeScript 有意保留的不健全边界。TypeScript 收窄、类型守卫与 satisfies沿控制流图解释 typeof、in、instanceof、自定义守卫、可辨识联合、穷尽检查和 satisfies 的保真校验。TypeScript 泛型、keyof 与索引访问类型从输入输出关系推导类型参数、约束、默认参数、keyof、typeof 和 T[K]，避免无意义泛型与宽化。条件类型、infer、映射类型与模板字面量把联合分发、infer 匹配、键重映射和递归类型拆成可计算步骤，并控制复杂类型的性能与可读性。函数重载、协变逆变与组件回调类型从回调替换安全进入参数逆变、返回值协变、strictFunctionTypes、重载解析和 React/Vue 事件回调设计。TypeScript 装饰器、初始化顺序与元数据边界基于标准装饰器语义解释类、方法和字段装饰过程，区分旧实验装饰器、元数据提案与运行时反射。模块解析、声明文件与 Project References从一次“类型存在但运行时找不到模块”进入 Node/Bundler 解析、package exports/types、.d.ts、路径别名和增量工程图。
现代前端：框架内部机制
React
JSX、React Element 与组件渲染模型从 JSX 编译结果进入不可变 Element、组件调用、Props、Children 和渲染纯度，区分元素、组件实例与 DOM。React Reconciliation、Key 与列表身份从列表输入框错位现象推导 type/key 身份、同层比较、复用、删除和移动，解释索引 key 的真实风险。React Work Loop、Scheduler 与 Lanes沿一次更新进入 update lane、root 调度、beginWork、completeWork、时间切片、中断恢复、饥饿提升和 lane 纠缠。React Render、Commit、Flags 与 Effect 执行从工作树完成进入 before mutation、mutation、layout 与 passive 阶段，解释 DOM、Ref、布局 Effect 和被动 Effect 的时序。Hooks、状态更新队列与闭包快照从连续 setState 和过期闭包进入 Hook 链、Update Queue、批处理、函数式更新和 render snapshot。Effect 生命周期、依赖与资源清理把 Effect 视为外部系统同步过程，解释依赖比较、cleanup、竞态、Strict Mode 检查和无需 Effect 的场景。React 并发、Transition、Suspense 与 Hydration从输入卡顿和流式页面进入并发渲染、transition、deferred value、Suspense 边界、流式 SSR 与选择性 Hydration。React 组件边界、状态架构与可访问性从难复用弹窗和复杂表单进入受控/非受控、状态归属、组合、Context、Reducer、焦点管理和语义契约。React 性能、Profiler 与分层测试从无证据的 memo 优化进入渲染原因、Profiler、结构共享、缓存成本、虚拟列表、单元测试和用户行为测试。
现代前端：框架内部机制
Vue
Vue 组件、生命周期、Props、Emits 与 Slots从父子数据混乱进入单向数据流、组件实例生命周期、事件契约、插槽作用域和资源清理。Vue 调度器、computed、watch 与 nextTick从同步修改多次只渲染一次进入 Job Queue、去重排序、微任务刷新、computed 脏标记和 watch flush 时机。Vue 模板编译：Parse、Transform 与 Codegen把模板从字符串转换为 AST、转换上下文和渲染函数，解释静态提升、PatchFlag、Block Tree 与编译错误定位。Vue VNode、Renderer 与 Keyed Diff从 render 结果进入 patch、组件 Effect、前后缀同步、索引映射和最长递增子序列，解释 DOM 移动最小化。Composition API、Pinia 与 Vue Router 状态边界从大型 setup 拆分组合函数，区分局部状态、跨组件 Store 和 URL 状态，并处理导航守卫与异步竞态。Vue 性能诊断与组件测试从重复渲染和长列表进入 Vue Devtools、性能标记、shallowRef、v-memo、异步组件、虚拟化和用户行为测试。Vue SSR、流式渲染与 Hydration沿服务端 HTML、客户端状态和事件绑定解释 SSR 生命周期、数据隔离、Hydration 不匹配及仅客户端能力边界。
现代前端：构建工具
构建工具
Webpack 模块图、Loader、Plugin 与 Runtime从入口解析进入 Resolver、Loader Pipeline、Compilation、Chunk、Runtime 和 HMR，解释 Tapable 插件如何介入构建生命周期。Bun Runtime、包管理器、测试器与构建工具从执行 TypeScript 到安装依赖、运行测试和打包，区分 Bun 的 Runtime 能力、兼容层和团队迁移边界。Vite、Webpack、Rollup、esbuild 与 Bun 如何选沿开发服务器、转换、打包、运行时和插件生态比较五种工具，建立应用、库和全栈项目的选型矩阵。npm、Yarn、pnpm、Lockfile 与 Monorepo从幽灵依赖和重复安装进入依赖树、内容寻址、Peer Dependency、Workspace、锁文件合并与版本发布。前端 CLI、脚手架与插件系统设计从一次 create 命令进入参数解析、模板、虚拟文件树、幂等修改、插件钩子、冲突处理和升级策略。前端 CI/CD、制品、灰度与回滚把提交检查、锁文件安装、测试、构建、Source Map、不可变制品、环境提升、灰度和回滚串成可审计流水线。
现代前端：语言与运行时
现代前端：工程体系
现代前端：安全与通信
现代前端：插件开发
浏览器与网络
从输入 URL 到页面可交互发生了什么沿导航、DNS、连接、请求、解析、脚本、样式、布局、绘制、合成和 Hydration 建立完整浏览器链路。HTTP/1.1、HTTP/2、HTTP/3 与连接演进从队头阻塞、连接复用和加密握手解释各版本帧模型、流、优先级、QUIC 迁移及前端优化策略变化。HTTP 缓存、浏览器缓存与资源提示从一次刷新进入新鲜度、验证器、Vary、内存/磁盘缓存、preload、prefetch、preconnect 和缓存失效。Web Worker、消息传递与主线程预算从长任务阻塞输入进入 Worker 隔离、结构化克隆、Transferable、SharedWorker、取消协议和任务拆分成本。白屏、卡顿与内存泄漏的证据化诊断从用户现象建立加载、渲染、主线程、内存和框架五层证据，使用 Performance、Memory、Coverage 和错误日志缩小范围。
安全与认证
工程专题
微前端架构：隔离、通信、路由与发布从多团队独立交付需求判断是否需要微前端，再比较 Module Federation、运行时加载、iframe 和 Web Components。前端质量体系：静态检查、测试与变更门禁把类型、Lint、单元、组件、契约、E2E、可访问性和视觉回归按反馈速度与风险分层。前端观测平台：错误、性能、行为与 Release从一次压缩报错进入采集 SDK、上下文、采样、去重、聚合、Source Map、Release、告警和隐私治理。前端性能交付：预算、资源、渲染与回归从业务页面建立实验基线，把 Core Web Vitals、资源预算、关键渲染路径、图片、字体、代码分割和 CI 回归连接起来。前端请求客户端：契约、取消、重试与一致性从重复提交和旧响应覆盖进入请求分层、类型校验、AbortSignal、超时、幂等键、退避、认证刷新和错误模型。