学习笔记

传统响应式依赖视口宽度，但组件常嵌套在未知容器中。CSS 容器查询让组件“感知自身宽度”。

.card { container-type: inline-size; }
@container (min-width: 400px) {
  .title { font-size: 1.5rem; }
}

支持：Chrome 105+、Firefox 110+。适用于卡片、仪表盘等独立组件。

使用多阶段构建，仅复制必要产物到最终镜像：

FROM node:18 AS builder
...
RUN npm run build

FROM node:18-alpine
COPY --from=builder /app/dist ./dist
CMD ["node", "dist/index.js"]

镜像体积从 1.2GB → 120MB。

• 强缓存：Cache-Control: max-age=31536000（不发请求）
• 协商缓存：ETag + If-None-Match（返回 304）

静态资源加指纹，HTML 用 no-cache。

1. React.memo 避免子组件重渲染
2. useCallback 缓存函数引用
3. useMemo 缓存计算结果
4. 虚拟滚动处理长列表
5. React.lazy + Suspense 代码分割

闭包 = 函数 + 其词法环境。即使外部函数执行完毕，内部函数仍可访问其变量。

function makeCounter() {
  let count = 0;
  return () => ++count;
}

GC 会回收无引用的闭包，不会必然导致内存泄漏。

JSONB 以二进制存储，支持索引和高效查询：

CREATE INDEX idx_data ON logs USING GIN (metadata jsonb_path_ops);
SELECT * FROM logs WHERE metadata @> '{"user_id": 123}';

适合半结构化日志、配置等场景。

结合哈希表（O(1) 查找） + 双向链表（O(1) 插入/删除）实现。

操作： get → 移至头部； put → 更新或插入，超容删尾。

Python 可用 OrderedDict，但面试建议手写。

常见问题：

• 未验证签名算法（alg=none 攻击）
• Token 无法主动失效（需配合短期有效期 + Redis 黑名单）
• 敏感信息明文存储

建议：使用短期 Token + Refresh Token 机制。

条件类型根据类型关系动态推导：

type NonNullable = T extends null | undefined ? never : T;
type Result = NonNullable; // string

配合 infer 可提取泛型参数，如 ReturnType。

调度器分两阶段：

1. 过滤（Filtering）：排除不满足资源、亲和性等条件的节点
2. 打分（Scoring）：对剩余节点评分，选最高分

可通过 nodeSelector、affinity、taints/tolerations 控制调度。

• 穿透：查不存在的 key → 布隆过滤器 or 缓存空值
• 击穿：热点 key 过期瞬间大量请求 → 互斥锁 or 逻辑过期
• 雪崩：大量 key 同时过期 → 随机过期时间

使用 Emscripten 将 C++ 编译为 WASM：

// add.cpp
int add(int a, int b) { return a + b; }

编译：emcc add.cpp -o add.js -s EXPORTED_FUNCTIONS='["_add"]'

在浏览器中调用 Module._add(2, 3)，性能接近原生。

• 授权码模式：Web 应用（最安全）
• 隐式模式：已废弃（SPA 曾用）
• 密码模式：信任客户端（如自家 App）
• 客户端凭证模式：服务间通信

现代 SPA 推荐使用 PKCE + 授权码模式。

聚合性能关键：

• 尽早使用 $match 过滤数据
• 在 $sort 前建立索引
• 避免在 $project 中使用复杂表达式

用 explain() 分析执行计划。

Hystrix 已停更，推荐 Resilience4j（轻量、函数式、支持响应式）。

CircuitBreaker cb = CircuitBreaker.ofDefaults("api");
Supplier decorated = CircuitBreaker
  .decorateSupplier(cb, () -> callExternalService());

配合降级逻辑提升系统韧性。

• Merge：保留完整历史，适合公共分支（如 main）
• Rebase：线性历史，适合本地私有分支整理提交

原则：**绝不 rebase 已推送的公共分支**。

Grid 子项也可成为 grid 容器，并继承父 grid 轨道：

.parent { display: grid; grid-template-columns: repeat(4, 1fr); }
.child { display: grid; grid-template-columns: subgrid; }

解决卡片内元素与外层不对齐的问题。支持：Firefox 71+、Safari 16+、Chrome 117+。

推荐：雪花算法（如 Twitter Snowflake 或美团 Leaf）。

执行顺序：

1. 执行当前宏任务（script、setTimeout）
2. 清空所有微任务（Promise.then、queueMicrotask）
3. 渲染（如有）
4. 下一宏任务

微任务总在宏任务之间执行完。

倒排索引 = 词项 → 文档列表。

文档1: "hello world"
文档2: "hello alice"

倒排索引:
hello → [1, 2]
world → [1]
alice → [2]

支持快速全文检索，配合 TF-IDF 或 BM25 评分。

三次握手：同步双方初始序列号，防止历史连接初始化。

四次挥手：因 TCP 全双工，需分别关闭两个方向。

TIME_WAIT 状态持续 2MSL，确保最后 ACK 到达，防止旧连接数据干扰新连接。

Vite 插件基于 Rollup，但扩展了 HMR 和 SSR 钩子。

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (id.endsWith('.md')) return compileMarkdown(code);
    }
  };
}

常用钩子：configResolved, transform, handleHotUpdate。

CAP 不可兼得，实际系统通常：

• CP：ZooKeeper、Etcd（强一致）
• AP：Cassandra、DynamoDB（高可用）

注意：CAP 仅适用于网络分区场景，平时可同时满足 CA。

现代项目优先使用 ESM。