钟智的博客

全栈项目需要理解数据建模、索引、缓存和 ORM。本文整理关系型数据库、NoSQL、ORM 与 Prisma 实践。 关系型数据库MySQL 与 PostgreSQL关系型数据库用表、行、列和约束组织数据，适合结构清晰、事务要求高的业务。MySQL 使用广泛，生态成熟；PostgreSQL 类型系统、扩展能力和复杂查询能力强。 关系型数据库适合订单、用户、支付、权限等需要强一致性、事务、复杂查询和结构化约束的场景。 事务与 ACID事务保证一组操作要么全部成功，要么全部失败。ACID 分别是原子性、一致性、隔离性、持久性。隔离级别越高，并发问题越少，但性能成本越高。 事务能保证关键业务状态一致，比如下单时扣库存、生成订单、写流水必须作为一个整体处理，不能只成功一半。 索引索引本质是用额外数据结构加速查询。MySQL InnoDB 常用 B+Tree 索引。索引不是越多越好，写入和更...

Node.js 是工程化、服务端渲染、BFF 和全栈能力的关键补充。本文整理运行机制、网络服务、并发与稳定性。 运行机制EventLoopNode 的事件循环由 libuv 驱动，包含 timers、pending callbacks、idle/prepare、poll、check、close callbacks 等阶段。setTimeout 在 timers 阶段，setImmediate 在 check 阶段，Promise 微任务会在当前阶段结束后尽快清空。 setTimeout 和 setImmediate 谁先执行不一定。顶层代码里受定时器精度和事件循环进入时机影响；如果在 I/O 回调里，setImmediate 通常先于 setTimeout。 BufferBuffer 用来处理二进制数据。Node 在网络、文件、加密场景中经常需要直接操作字节，...

工程化是把项目从「能跑」带到「可维护、可构建、可发布、可协作」。本文整理构建工具、编译、规范、CI/CD 与 Monorepo。 构建工具ViteVite 开发环境基于原生 ESM，按需转换模块，所以冷启动快。生产构建默认使用 Rollup，负责打包、代码分割和资源优化。 Vite 比 Webpack 开发启动快的原因：Webpack 开发时通常要先构建依赖图并打包；Vite 利用浏览器原生 ESM，源码按需编译，依赖预构建后缓存，启动成本更低。 Webpack、Rollup 与 RspackWebpack 生态成熟，适合复杂业务和历史项目。Rollup 更擅长库打包，输出更干净。Rspack 用 Rust 实现，目标是兼容 Webpack 生态并提升性能。 Loader 处理单个模块的转换，比如 TS、CSS、图片；Plugin 参与构建生命周期，可以做资源优化、HT...

Vue3 从 API 用法到源码原理：响应式如何追踪依赖、组件如何更新、虚拟 DOM 如何 diff、编译器做了什么优化。本文整理核心机制与实践。 响应式系统Proxy、track 与 triggerVue3 用 Proxy 拦截对象读取和修改。读取时通过 track 收集当前副作用函数，修改时通过 trigger 通知相关副作用重新执行。依赖关系通常可以理解成 target -> key -> effects。 Vue3 用 Proxy 替代 Object.defineProperty 的原因：Proxy 能拦截新增、删除、数组索引、Map/Set 等更多操作，不需要递归劫持所有属性，能力更完整。 ref、reactive 与 computedreactive 用于对象响应式，ref 用于包装任意值，模板里会自动解包。computed 有缓存，只有依赖变化...

TypeScript 的重点是用类型系统表达约束、减少运行时错误，并理解类型推导的边界。本文整理类型基础、泛型、高级类型与工程实践。 类型系统基础any、unknown 与 neverany 会关闭类型检查，适合迁移期兜底但不建议滥用。unknown 表示未知类型，使用前必须做类型收窄，更安全。never 表示永远不会出现的值，常用于穷尽检查和抛错函数。 any 可以赋值给任意类型，也可以任意访问属性，等于放弃检查；unknown 只能赋值给 unknown 或 any，使用前必须判断类型。 类型推断与类型收窄TS 会根据初始化值、函数返回值、控制流判断推导类型。常见收窄方式包括 typeof、instanceof、in、判空、字面量判断、自定义类型守卫。 类型守卫是在运行时做判断，并让 TS 在分支内收窄类型的机制。比如 function isString(x: unknown...

前端算法不必追求竞赛难度，核心是拆问题、分析复杂度、写出稳定代码。本文整理常用数据结构与算法思想。 数据结构数组与链表数组支持随机访问，按索引读取是 O(1)，但中间插入删除通常是 O(n)。链表插入删除节点方便，但查找需要遍历。数组常配合双指针、滑动窗口、前缀和；链表常考反转、快慢指针、环检测、合并。 判断链表是否有环：用快慢指针。慢指针每次走一步，快指针每次走两步。如果有环，两者一定会相遇；如果快指针走到空，说明无环。 栈与队列栈是后进先出，适合括号匹配、单调栈、函数调用、撤销操作。队列是先进先出，适合 BFS、任务调度。双端队列常用于滑动窗口最大值。 有效括号：遇到左括号入栈，遇到右括号就看栈顶是否匹配。最后栈为空才合法。关键是提前处理栈空和类型不匹配。 树与图树题重点是递归定义：一棵树的问题通常可以拆成当前节点和左右子树。图题重点是建图、访问标记和遍历策略。无权最短路用 ...

网络协议是前端底层能力，需要从协议特性落到页面加载、接口稳定性和安全。本文整理 HTTP、TCP、TLS、DNS 与 CDN。 HTTPHTTP/1.1HTTP/1.1 支持长连接、管线化、缓存控制和 Host 头。它的问题是队头阻塞：同一个连接上的请求响应必须按顺序返回，所以浏览器通常会为同一域名开多个连接。 HTTP/1.1 的性能问题：请求头重复、连接数量有限、队头阻塞明显。优化手段包括连接复用、资源合并、缓存、域名分片，但这些在 HTTP/2 时代不一定仍然适合。 HTTP/2 与 HTTP/3HTTP/2 使用二进制分帧、多路复用、头部压缩和服务端推送。它解决了 HTTP 层队头阻塞，但 TCP 层丢包仍会影响整个连接。HTTP/3 基于 QUIC 和 UDP，减少握手成本，并改善 TCP ...

浏览器原理覆盖页面从输入 URL 到展示、交互、优化的完整链路。本文整理多进程模型、渲染流水线、V8 执行、存储与安全。 浏览器架构多进程模型现代浏览器通常包含浏览器进程、网络进程、GPU 进程、渲染进程、插件进程等。每个标签页一般会有独立渲染进程，隔离页面执行环境，提高稳定性和安全性。 浏览器采用多进程主要是稳定性、安全性和性能隔离。某个页面崩溃不至于拖垮整个浏览器，不同站点之间也能做更好的安全隔离。 从输入 URL 到页面展示核心流程是：URL 解析、缓存检查、DNS 解析、TCP/TLS 握手、发送 HTTP 请求、接收响应、解析 HTML、构建 DOM 和 CSSOM、合成 Render Tree、Layout、Paint、Composite。 完整链路要从网络（缓存、重定向、HTTPS）讲到渲染（关键渲染路径、性能优化点），不要只背步骤。 渲染流水线DOM、C...

JavaScript 的核心是理解「代码为什么这样执行」。本文整理执行上下文、闭包、this、原型链、异步调度与常见手写实现。 执行机制数据类型与类型转换JS 有 7 种原始类型：string、number、bigint、boolean、undefined、symbol、null，以及引用类型 object。typeof null 返回 object 是历史遗留问题，不代表 null 是对象。 类型转换重点看三类：转布尔、转数字、转字符串。对象参与运算时会先走 ToPrimitive，优先调用 valueOf 或 toString，不同运算符的偏好不同。 === 不做隐式类型转换，类型和值都相同才返回 true。== 会做隐式转换，规则复杂，容易出现 [] == false、'' == 0 这类反直觉结果。工程里默认用 ===，只有明确需要兼容宽松输入时才考虑 =...

HTML & CSS 是前端基础，但容易追到工程意识、浏览器机制和可维护性。本文整理语义化、布局、响应式与 CSS 工程实践。 HTML语义化标签语义化不是把 div 换成看起来更高级的标签，而是让页面结构对浏览器、搜索引擎、读屏软件和团队维护者都更清晰。常见标签包括 header、nav、main、article、section、aside、footer、h1 到 h6。 语义化的价值分三层： 对机器友好：搜索引擎更容易理解页面主次。 对无障碍友好：读屏软件能更准确地跳转和朗读。 对团队友好：结构自解释，降低维护成本。 article 表示一块可以独立分发、独立理解的内容，比如博客文章、评论、新闻条目。section 表示页面中的一个主题分区，通常需要有标题，但不一定能独立存在。 SEO 优化前端 SEO 的重点是让搜索引擎更快、更准地理解页面内容。基础项包括唯一的...