语义化标签

使用 header / nav / main / article / section / aside / footer 表达页面结构，便于辅助技术与搜索引擎理解。

• 避免滥用 div，优先语义元素
• 标题层级 h1-h6 不可跳级

可访问性 (a11y)

为交互元素提供 alt、aria-label、role，保证键盘可操作。

• img 必带 alt
• 表单元素配 label
• focus 状态需可见

Meta 与 SEO

合理设置 viewport、description、Open Graph、canonical。

<meta name="description" content="...">
<meta property="og:title" content="...">

盒模型与 BFC

box-sizing 控制宽高计算方式；BFC 可清除浮动、避免 margin 塌陷。

• 触发 BFC：overflow:hidden、display:flow-root
• 推荐全局 box-sizing: border-box

Flexbox 弹性布局

一维布局首选，主轴/交叉轴方向灵活。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid 网格布局

二维布局利器，适合复杂页面结构。

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
}

响应式设计

媒体查询 + 相对单位 + 弹性图片。

• 移动优先 (min-width)
• clamp() 流体字号
• picture/srcset 适配分辨率

层叠与优先级

理解 specificity、层叠上下文、z-index 规则。

• !important 谨慎使用
• position + z-index 创建层叠上下文

CSS 变量与主题

自定义属性实现动态主题切换。

:root { --primary: #4f6df5; }
.btn { color: var(--primary); }

数据类型与类型判断

7 种原始类型 + object；准确判断类型的方法。

• typeof 判断原始类型
• instanceof 判断对象
• Object.prototype.toString 最准确

作用域与闭包

词法作用域决定变量查找；闭包是函数与其词法环境的组合。

function counter() {
  let n = 0;
  return () => ++n;
}

原型与继承

每个对象有 __proto__，函数有 prototype，构成原型链。

• class 是语法糖
• extends 实现原型链继承

this 指向

取决于调用方式：默认、隐式、显式 (call/apply/bind)、new。

• 箭头函数继承外层 this
• 严格模式默认 this 为 undefined

事件循环

宏任务与微任务的执行顺序决定异步代码时序。

console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
// 输出：1 3 2

异步编程

Promise → async/await 是现代异步主流写法。

• Promise.all / allSettled / race
• try/catch 捕获 await 错误
• 并发控制：手写 limit

ES6+ 关键特性

解构、展开、模板字符串、Map/Set、可选链、空值合并。

const { a = 1 } = obj;
const name = user?.name ?? '匿名';

模块化

ESM 是浏览器原生标准，CommonJS 用于 Node。

• import 是静态引用，可 tree-shaking
• import() 动态导入

基础类型

string / number / boolean / array / tuple / enum / never / unknown。

• unknown 比 any 更安全
• never 用于穷尽检查

接口与类型别名

interface 可声明合并，type 更灵活（联合、交叉）。

type User = { id: number; name: string };
interface User { age?: number }

泛型

让类型成为参数，实现可复用的类型工具。

function first<T>(arr: T[]): T {
  return arr[0];
}

类型工具

Partial / Required / Pick / Omit / Record / ReturnType。

• keyof 获取键的联合
• typeof 从值推导类型

类型守卫

in / typeof / instanceof / 自定义谓词收窄类型。

function isStr(x: unknown): x is string {
  return typeof x === 'string';
}

核心概念

JSX、虚拟 DOM、Diff 算法、Fiber 架构。

• setState 异步批处理
• key 提升列表 diff 效率

Hooks

useState / useEffect / useMemo / useCallback / useRef / useReducer。

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

状态管理

Context 适合低频全局状态；复杂场景用 Zustand / Redux Toolkit / Jotai。

• 状态提升 vs 状态下放
• 派生状态用 useMemo

性能优化

React.memo / useMemo / useCallback / 虚拟列表 / 懒加载。

• 避免在 render 中创建新对象
• 用 React.lazy + Suspense 代码分割

Next.js

React 全栈框架，支持 SSR / SSG / ISR / App Router。

• Server Components 减少客户端体积
• 文件路由约定
• API Routes 后端能力

响应式原理

Vue3 用 Proxy 重写响应式，Vue2 为 Object.defineProperty。

• ref 包装基本类型
• reactive 包装对象

Composition API

setup / ref / computed / watch，逻辑可复用。

const count = ref(0);
const double = computed(() => count.value * 2);

生命周期

onMounted / onUpdated / onUnmounted / onBeforeMount。

• 在 setup 中注册
• 卸载时清理副作用

Nuxt.js

Vue 全栈框架，约定式路由 + SSR/SSG。

Vite

基于 ESM 的极速开发服务器，生产用 Rollup 打包。

• dev 期无打包，按需编译
• 插件机制兼容 Rollup

Webpack

entry/output/loader/plugin 四大核心。

• babel-loader 转译 JS
• SplitChunks 分包
• HMR 模块热替换

Tree-shaking

基于 ESM 静态分析，剔除未使用代码。

• sideEffects 标记纯模块
• 避免整体导入工具库

Babel / SWC

JS 转译器，SWC 基于 Rust，速度更快。

• @babel/preset-env 按目标环境转译
• polyfill 与转译的区别

渲染流水线

DOM → CSSOM → Layout → Paint → Composite。

• 回流 (Layout) 必触发重绘
• transform/opacity 走合成层

事件机制

捕获 → 目标 → 冒泡三阶段。

• addEventListener 第三参数
• 事件委托利用冒泡

存储机制

Cookie / localStorage / sessionStorage / IndexedDB。

• Cookie 每次请求携带
• IndexedDB 存大量结构化数据

同源策略与跨域

协议+域名+端口相同为同源；跨域方案：CORS、代理、postMessage。

• 预检请求 OPTIONS
• 简单请求 vs 复杂请求

HTTP 版本

HTTP/1.1 持久连接 → HTTP/2 多路复用 → HTTP/3 基于 QUIC。

• HTTP/2 头部压缩 HPACK
• HTTP/2 Server Push 已废弃

状态码

1xx 信息 / 2xx 成功 / 3xx 重定向 / 4xx 客户端 / 5xx 服务端。

• 301 永久 vs 302 临时
• 304 协商缓存命中

缓存策略

强缓存 (Cache-Control/Expires) + 协商缓存 (ETag/Last-Modified)。

Cache-Control: max-age=3600
ETag: "abc123"

HTTPS 与 TLS

TLS 握手建立加密通道，证书验证身份。

• 对称 + 非对称混合加密
• TLS 1.3 简化握手 1-RTT

REST 与 GraphQL

REST 资源导向；GraphQL 按需查询，减少过度获取。

核心指标 (Core Web Vitals)

LCP 最大内容绘制 / FID 首次输入延迟 / CLS 累积布局偏移。

• LCP < 2.5s
• CLS < 0.1

加载优化

减少体积 + 并行化 + 缓存。

• 代码分割、按需加载
• 图片懒加载、WebP/AVIF
• CDN 加速静态资源

渲染优化

避免长任务，利用合成层。

• requestAnimationFrame 而非 setTimeout
• transform/opacity 做动画
• 防抖与节流

度量工具

Lighthouse / Performance 面板 / Web Vitals 库。

代码规范

ESLint + Prettier + TypeScript + Husky + lint-staged。

• commitlint 规范提交信息
• EditorConfig 统一编辑器配置

包管理

npm / yarn / pnpm；pnpm 软链接节省磁盘。

• lock 文件需提交
• semver 语义化版本

CI/CD

GitHub Actions / GitLab CI 自动化测试、构建、部署。

• 自动化测试把关质量
• 蓝绿/灰度发布降低风险

Monorepo

pnpm workspace / Turborepo / Nx 管理多包仓库。

• 共享依赖与配置
• 增量构建提升速度

测试

单元测试 (Jest/Vitest) + 组件测试 (Testing Library) + E2E (Playwright)。