Frontend Fundamentals 是一个面向浏览器层面的前端系统设计参考库，围绕“浏览器如何布局、渲染与合成”以及“如何让 Web 应用变快”组织内容。它采用渐进式披露策略：每个参考文件按需加载，只在任务需要相应深度时读取，而不是一次性全部载入。
核心准则
该参考库给出的 Web UI 应用黄金法则是：不要阻塞主线程（UI 线程）。
参考文件与用途
- references/core-fundamentals.md：盒模型与 box-sizing，盒子类型（block/inline/anonymous），格式化上下文，定位系统与包含块规则。适用于推理布局、尺寸，或分析某个元素为何位于当前位置。
- references/rendering.md：层叠上下文，DOM→渲染树→重排→重绘→合成的管线，GPU 合成动画，渲染层与图形（合成器）层。适用于诊断卡顿、布局/绘制开销，或 z-index 与图层提升行为。
- references/dom-api.md：DOM 类层次结构，查询方法性能表，增删的性能影响，DocumentFragment 与 <template> 批量插入。适用于直接操作 DOM 或构建底层/通用组件。
- references/web-apis-observers.md：Intersection / Mutation / Resize 观察器（含代码）以及 resize 机制决策表。适用于替代轮询、实现懒加载/可见性逻辑，或响应尺寸与 DOM 变化。
- references/virtualisation.md：滑动窗口技术——顶部/底部观察器、元素池、回收与 translateY 定位数学。适用于在不膨胀 DOM 的前提下渲染超长列表或网格。
- references/state-design.md：数据类与属性，规范化（1NF–3NF），在 Web Worker 上的倒排/复合索引，内存卸载，浏览器存储选项。适用于组织大规模客户端状态或添加应用内搜索。
- references/network.md：UDP/TCP 与协议栈，长轮询 vs SSE vs WebSockets（优缺点与适用时机），一个按平台的 API 设计示例，REST 与 GraphQL 的启发式选择。适用于决定客户端如何与服务器通信。
- references/performance.md：Core Web Vitals 目标（LCP/INP/CLS），网络/HTTP，JS 包体积（polyfill、代码分割、preload/prefetch、压缩与最小化），CSS 关键路径，图片格式，字体加载。适用于调优加载与运行时性能。
使用方式
按照参考库的说明，先确定当前问题属于哪个主题，再只读取与之匹配的那一个参考文件，以获得该主题所需的深度。
适用场景与限制
适用场景是前端系统设计层面的问题：布局与定位、渲染管线与卡顿、DOM 操作与观察器、长列表虚拟化、客户端状态结构、网络传输选型与 Web 性能调优。限制方面，资料未提供具体安装命令、代码运行环境、许可与收费信息，暂未提供。