前端黑话术语大全：HTML、CSS、JS、框架、工程化一次看懂
涵盖 HTML/CSS/JavaScript/框架/工程化/性能等领域的常用术语，帮你快速听懂前端黑话。
一、HTML / CSS
术语 解释 语义化 使用正确的 HTML 标签表达内容结构（如用 <nav> 而非 <div class="nav">），利于 SEO 和无障碍访问盒模型 CSS 的盒子模型：content → padding → border → margin。 box-sizing: border-box 是常用修正方案BFC Block Formatting Context（块级格式化上下文），解决外边距折叠、浮动塌陷等布局问题 包含块 (Containing Block) 元素定位（absolute/fixed）时参照的祖先元素 层叠上下文 (Stacking Context) 控制 z-index 生效范围的层级机制，由 position + z-index、opacity < 1、transform 等触发回流/重排 (Reflow) 修改几何属性（宽高、位置）导致浏览器重新计算布局，开销大 重绘 (Repaint) 修改外观属性（颜色、阴影等）但不影响布局，开销小于回流 BEM CSS 命名规范：Block__Element--Modifier，如 .card__title--largeCSS in JS 在 JavaScript 中写 CSS，如 styled-components、Emotion 等方案 Grid / Flexbox 现代 CSS 布局方案：Flexbox 一维弹性布局，Grid 二维网格布局 响应式 (RWD) 同一个页面能适配不同屏幕尺寸，靠媒体查询 + 弹性布局实现 自适应 (AWD) 服务端根据设备类型返回不同布局模板，比 RWD 更重 1px 问题 移动端 Retina 屏下 1px 边框实际显示为 2px 的视觉 bug，常用伪元素 + transform scale 解决 CSS Modules 将 CSS 局部作用域化，自动生成唯一类名避免冲突 Tailwind / Atomic CSS 原子化 CSS：用大量单一功能的工具类组合样式（如 flex items-center gap-2）Houdini CSS 引擎底层 API，允许开发者扩展 CSS 渲染能力 Container Query 容器查询：根据父容器尺寸而非视口尺寸决定样式
二、JavaScript（语言层面）
术语 解释 ES6 / ES2015 ECMAScript 2015，JavaScript 的一个大版本，引入了 let/const、箭头函数、解构、模板字符串、Class、Promise、模块化等闭包 函数 + 其词法环境的组合，函数内可访问外部变量，即使外部函数已执行完毕 原型链 JS 的继承机制： obj.__proto__ → 构造函数.prototype → ... → nullthis 指向 谁调用指向谁；箭头函数的 this 继承自外层作用域；call/apply/bind 可显式绑定Event Loop 事件循环：宏任务（setTimeout/setInterval/I/O）→ 微任务（Promise.then/MutationObserver）→ 渲染 宏任务 / 微任务 宏任务每轮只取一个执行；微任务在当前宏任务执行完后清空队列 Promise / async-await 异步编程方案：Promise 链式调用，async-await 是 Promise 的语法糖 generator function* + yield，可暂停/恢复的函数，async-await 的底层基础Proxy / Reflect Proxy 拦截对象操作并自定义行为；Reflect 提供默认的对象操作方法 WeakMap / WeakSet 键为弱引用（不阻止 GC），常用于缓存或私有数据存储 Symbol 唯一的原始类型值，常用于对象私有属性键 Iterator / Iterable 可迭代协议：实现 [Symbol.iterator] 的对象可用 for..ofBigInt 处理超出 Number.MAX_SAFE_INTEGER 的大整数TC39 制定 ECMAScript 标准的技术委员会
三、TypeScript
术语 解释 类型体操 用 TS 的高级类型（泛型、条件类型、映射类型、infer 等）实现复杂类型推导，类似编程的"类型游戏" 泛型 (Generics) 参数化类型，如 Array<T>，让类型更灵活条件类型 T extends U ? X : Y，类型层面的三元运算infer 在条件类型中推断内部类型，如 T extends Promise<infer R> ? R : never映射类型 基于已有类型生成新类型，如 Readonly<T>、Partial<T>类型守卫 (Type Guard) typeof、instanceof、is 关键字等，在运行时缩小类型范围声明文件 (.d.ts) 为 JS 库提供类型描述，不对应运行时代码 三斜线指令 /// <reference path="..." />，声明文件间引用strict 模式 strict: true 开启所有严格检查（noImplicitAny、strictNullChecks 等）any / unknown / never any 逃逸类型检查；unknown 安全版的 unknown，使用前需收窄；never 表示永不存在的值（如抛异常、死循环）
四、框架 / 库
React 生态
术语 解释 VDOM 虚拟 DOM：用 JS 对象模拟 DOM 树，diff 后批量更新真实 DOM Hooks 函数式组件中管理状态和副作用：useState、useEffect、useMemo、useCallback 等 Fiber React 16+ 的重构架构，支持可中断的异步渲染和优先级调度 Suspense 组件在数据/代码加载完成前显示 fallback 内容 Server Components (RSC) React 服务端组件：在服务端渲染，无需客户端 JS，减小打包体积 hydrate 水合：客户端 JS 接管服务端渲染的静态 HTML，绑定事件和交互 并发模式 (Concurrent Mode) React 18+ 的新渲染机制，允许中断低优先级更新 reconciliation 调和：React 通过 diff 算法计算新旧 VDOM 差异的过程 状态提升 (Lifting State Up) 把多个组件的共享状态提升到最近的公共祖先组件管理 受控组件 / 非受控组件 受控：表单值由 React state 控制；非受控：由 DOM 自身维护（ref 取值） Portals ReactDOM.createPortal，将子节点渲染到 DOM 树的任意位置高阶组件 (HOC) 接收一个组件返回一个新组件，用于逻辑复用（已被 Hooks 部分取代） Redux / Zustand / Jotai 状态管理方案：Redux 单向数据流+中间件；Zustand 轻量化；Jotai 原子化 Flux / 单向数据流 数据从 Store → View → Action → Dispatcher → Store 单向循环
Vue 生态
术语 解释 响应式 数据变化自动更新视图，Vue 2 用 Object.defineProperty，Vue 3 用 Proxy SFC (单文件组件) .vue 文件，含 <template>、<script>、<style>Composition API Vue 3 的组合式 API：setup、ref、reactive、watch、computed 等 Options API Vue 2 风格的选项式 API：data、methods、computed、watch 等 v-model 双向绑定语法糖， v-model:propNameVuex / Pinia Vue 状态管理：Vuex（Vue 2 官方）、Pinia（Vue 3 推荐的下一代方案） Teleport Vue 3 的 <Teleport>，将内容渲染到 DOM 树的指定位置slot 插槽：父组件向子组件传递模板内容，支持具名插槽和作用域插槽
跨端 / 小程序
术语 解释 Taro / uni-app 一套代码编译到多端小程序 + H5 的框架 React Native / Flutter 跨端原生方案：RN 基于 React 桥接原生；Flutter 自绘引擎 WXML / WXSS 微信小程序的模板语言和样式语言 Skyline 微信小程序的新渲染引擎，替代 WebView 方案 WebView / JSBridge WebView 内嵌网页，JSBridge 是 JS 与原生通信的桥梁
其他
术语 解释 SSR 服务端渲染（Server-Side Rendering）：首屏 HTML 在服务端生成 SSG 静态站点生成（Static Site Generation）：构建时生成所有页面为静态 HTML ISR 增量静态再生（Incremental Static Regeneration）：Next.js 特性，按需重新生成单页 CSR 客户端渲染（Client-Side Rendering）：空白 HTML + JS 接管一切 MPA / SPA 多页应用（跳转刷新）vs 单页应用（前端路由无刷新切换） 微前端 (Micro Frontends) 将前端应用拆分为独立可部署的微应用，qiankun / Module Federation 等方案 JAMstack JavaScript + API + Markup，前端纯静态，数据走 API Svelte 编译时框架，无 VDOM，构建阶段将组件编译为高效原生 JS
五、性能
术语 解释 FCP / LCP / FID / CLS / TBT / TTI / INP Web 核心性能指标：FCP 首次内容绘制；LCP 最大内容绘制；FID/INP 首次输入延迟/交互延迟；CLS 布局偏移；TBT 总阻塞时间；TTI 可交互时间 白屏 / 首屏 白屏：页面空白阶段；首屏：用户看到第一屏内容的时刻 TTFB Time to First Byte：浏览器发出请求到收到第一个字节的时间 FP / FMP FP 首次绘制（任何像素）；FMP 首次有意义绘制 Lighthouse Google 的网页质量评测工具，跑分指标含 Performance / SEO / A11y / Best Practices Tree Shaking 摇树优化：打包时去除未使用的代码（依赖 ES Module 静态分析） Code Splitting 代码分割：按路由/组件拆分 bundle，按需加载 Lazy Loading 懒加载：推迟加载非关键资源（如图片、组件）， loading="lazy" / React.lazy骨架屏 (Skeleton Screen) 内容加载前用灰色占位块模拟页面结构，提升感知速度 预加载 / 预取 <link rel="preload"> 当前页必用资源；prefetch 下页可能用到的资源；preconnect 提前建立连接HTTP/2 多路复用 单 TCP 连接并发多个请求，不再需要雪碧图/域名分片 Service Worker 浏览器后台脚本，支持离线缓存（PWA 核心）、推送通知 Web Worker 在后台线程执行 JS，避免阻塞主线程 长任务 (Long Task) 执行超过 50ms 的任务，会阻塞交互，需拆分或移到 Worker requestIdleCallback 在浏览器空闲时执行低优先级任务 debounce / throttle 防抖：一定时间内只执行最后一次；节流：固定间隔执行一次 will-change 提前告知浏览器哪些属性会变化，创建独立图层以优化动画 GPU 加速 使用 transform: translateZ(0) 等触发 GPU 合成层，避免回流
六、工程化
术语 解释 Bundler 打包工具：Webpack / Vite / Rollup / esbuild / Turbopack / Rspack Loader / Plugin Webpack 中：Loader 负责转换文件（如 css-loader）；Plugin 扩展构建能力（如 HtmlWebpackPlugin） HMR 热模块替换（Hot Module Replacement）：修改代码后无需刷新页面即可看到变化 Source Map 源码映射：调试时将压缩后的代码还原到原始源码位置 Babel JavaScript 编译器，将新语法转为兼容旧浏览器的代码 SWC / esbuild 基于 Rust/Go 的极速 JS/TS 编译器，替代 Babel PostCSS CSS 后处理器，Autoprefixer 是其最常用插件 ESLint / Prettier 代码规范：ESLint 检查代码质量；Prettier 统一格式 lint-staged / husky Git 工作流：husky 管理 git hooks；lint-staged 仅对暂存文件执行检查 CI / CD 持续集成 / 持续部署：自动化构建→测试→部署流水线 Monorepo 单仓库管理多个包，工具：pnpm workspace / Turborepo / Nx / Lerna 包管理器 (npm / yarn / pnpm) 管理依赖：npm（官方）、yarn（并行安装）、pnpm（硬链接节省磁盘） Semver 语义化版本： 主版本.次版本.修订号（如 2.3.1）lock 文件 package-lock.json / yarn.lock / pnpm-lock.yaml，锁定依赖版本sideEffects package.json 中声明文件是否有副作用，影响 Tree ShakingDLL (已过时) Webpack 预先编译不常变动的依赖加速构建，已被 HardSource / 持久化缓存替代 联邦模块 (Module Federation) Webpack 5 特性，运行时共享模块，微前端的关键技术
七、网络 / 安全
术语 解释 CORS (跨域) 跨源资源共享：浏览器限制不同源之间的请求，需服务端设置 Access-Control-Allow-OriginXSS 跨站脚本攻击：注入恶意脚本，防范：输出转义 + CSP CSRF 跨站请求伪造：诱导用户点击发起恶意请求，防范：Token 校验、SameSite Cookie CSP 内容安全策略：HTTP 头限制页面可以加载的资源来源 SRI 子资源完整性：校验 CDN 资源的哈希值防止篡改 HTTPS / SSL / TLS HTTP + 加密层，保证传输安全 Cookie / Session / Token 认证方式：Cookie 浏览器存储；Session 服务端存储；Token 无状态（常用 JWT） JWT JSON Web Token，三段 Base64（Header.Payload.Signature），无状态认证 OAuth 2.0 / SSO OAuth 第三方授权登录；SSO 单点登录 DNS 预解析 <link rel="dns-prefetch"> 提前解析域名，减少连接延迟CDN 内容分发网络：就近提供静态资源，加速访问 缓存策略 强缓存（Cache-Control: max-age）→ 协商缓存（ETag / Last-Modified） BFF Backend For Frontend：为前端定制的中间层服务，聚合后端接口
八、前端黑话 / 行话
术语 解释 切图 / 切页面 把设计稿还原成 HTML+CSS 页面 像素眼 对 UI 细节极度敏感，能发现 1px 偏移的人 打日志 console.log 调试（笑） 祖传代码 没人敢动、没人能解释的遗留代码 屎山 极其糟糕、难以维护的代码仓库 面向魔法编程 不清楚原理只知道"这样写就行"的编程方式 拍黄片 Photoshop（谐音梗，指设计稿） 蓝湖 / Figma 设计协作工具，前端从中取标注和切图 联调 前后端接口对接调试 996 / 007 加班模式（早上9点到晚上9点，一周6天 / 0点到0点一周7天） P0 / P1 / P2 Bug 优先级：P0 线上事故紧急修复，P1 重要，P2 普通 灰度发布 新版本先给一小部分用户使用，稳定后再全量 AB 实验 将用户随机分组对比不同版本的效果 改需求 / 需求又变了 前端最怕听到的话 这个很简单 PM 最常用的谎言 兼容 IE 前端 PTSD 触发词（好在 IE 已退役） 样式污染 CSS 全局作用域导致的样式冲突噩梦 JS 疲劳 前端技术栈更新太快导致的学习焦虑 换个框架重写 技术决策层面的推倒重来，通常杀伤力巨大 复盘 线上事故后的事后分析会 KPI 项目 技术看起来很炫但对业务没啥用的项目 重复造轮子 不直接用已有方案，自己重新实现一遍 银弹 不存在的一劳永逸解决所有问题的方案
九、调试 / 工具
术语 解释 DevTools 浏览器开发者工具（F12） 断点调试 在代码某一行暂停执行，逐步查看变量状态 抓包 用 Charles / Whistle / Wireshark 拦截并查看网络请求 Whistle 基于 Node.js 的跨平台抓包调试代理工具 代理 将请求转发到不同环境（如本地→测试服务器），用于联调 真机调试 手机连接电脑，在移动端浏览器/WebView 中调试 vConsole / Eruda 移动端页面内嵌的控制台调试工具 Performance Panel Chrome DevTools 中的性能分析面板，录帧分析 Coverage DevTools 中分析代码/样式使用率的功能 Memory / Heap Snapshot 内存快照，用于排查内存泄漏 复现 根据用户描述重新制造 Bug 出现场景 本地复现不了 经典甩锅用语（手动狗头）
