企业官网建设流程全解析

打开 GitHub 上一个 5k star 的前端仓库，README 第一段就冒出lexical scope、side effect、immutable；面试时面试官随口问“你讲一下debounce和throttle的区别”，你心里想的是“防抖节流”，嘴上却慢了一拍；调接口报错has been blocked by CORS policy，你隐约知道是跨域，但想跟后端说清楚“加个 header”都要先查一下单词。这种时刻多了之后我才意识到，所谓“前端常用单词”并不是英语课，而是前端开发者的第二语言——它直接决定你读文档、看报错、写注释、过面试的速度。

这篇文章不搞几千词的词表，而是按真实开发流程和场景，把前端工作里真正高频的词拆一遍。每个词我都会放在一个实际会碰到的语境里解释，顺便带上我自己踩过的坑和积累方法。适合英文一般的入门开发者，也适合工作两三年但一直靠翻译插件硬扛、想彻底摆脱“每个词都要查”状态的同学。

1. 前端常用词不是背单词，是解构报错和文档的最小单位

1.1 读不懂报错，常常不是不会写代码，而是解不出关键单词

我见过太多人卡在很基础的问题上，其实逻辑早就想明白了，就差一个词。比如浏览器控制台里最常见的这条：

TypeError: Cannot read properties of undefined (reading 'length')

译文是“无法读取 undefined 的属性，正在读取 'length'”。如果你知道Cannot read properties of undefined就是在说“有一个东西是 undefined，你还在它身上点了个属性”，那么排查方向立刻就有了——某个数组或字符串没拿到值。可新手常常盯着整行红字发呆，甚至截图去问别人，而不是自己翻译。

再比如网络请求报错413 Payload Too Large，payload指的是请求体（接口传输的实际数据部分）。如果我把它翻译成“负载”，很多人还是会懵；但只要理解“payload 就是 POST 出去的那段数据”，就能立刻想到是上传内容超了，该调服务器限制或者压缩文件了。

这个能力说白了就是“词汇转译”。前端代码的语法是英文、框架 API 是英文、报错是英文、文档是英文，你可以在 IDE 里装翻译插件，但翻译插件永远救不了面试和开会。

1.2 很多前端“黑话”本身就是英文直译，源头理解了就不觉得玄

前端圈里有一种很奇妙的氛围：大家喜欢把一些普通词包装成高深概念。比如middleware，你听人讲“中间件”觉得挺抽象，可它翻译过来就是“中间的软件层”。在 Koa 或 Express 里，middleware就是请求从进来到返回之间，逐个执行的那些函数。词根是middle（中间）加ware（件），本质上和“软件”是同一个构造逻辑。

类似的还有：

• polyfill：poly有“多”的意思，fill是填充，合起来就是“用多个补丁把缺失的功能填上”。Array.prototype.includes在老浏览器里没有，你就写个 polyfill 替它补上。
• shim：垫片。某个库不兼容当前环境，用一个薄层把它垫到能跑。和polyfill常被混用，但语义上一个偏向“补 API”，一个偏向“做适配层”。
• cache：缓存。这个太常用了，localStorage、sessionStorage、memory cache、disk cache全和它相关。
• snapshot：快照。测试里的“快照测试”就是把组件渲染结果存一份，对比后续变化。
• session：会话。sessionStorage就是“会话级存储”，关掉标签页就没了。

这些词一旦理解了来源，记忆力会明显提升，因为它不再是随机符号，而是有意义的组合。

2. 从输入 URL 到页面渲染，一条完整链路里的高频词

我学前端那会儿最爱干的一件事，就是在浏览器的 Network 面板里，盯着一条请求从发出到返回的完整过程，把所有字段挨个搜一遍。这个过程比背任何词表都有效，因为每个词背后都对应一个你实际看得见的数据。

2.1 地址栏和请求阶段：protocol、host、path、query、params

当你在地址栏敲入一个网址，浏览器第一件事是解析 URL。很多人每天写接口却从不拆解 URL，其实这里面每一个字段都是一个常用词。

一个典型的接口地址长这样：

https://api.example.com:443/api/user/list?page=1&size=20

• protocol：协议，https://这一段。
• host：主机名，也就是域名指向的服务器位置，api.example.com。
• port：端口，:443，https 默认走 443，http 默认走 80，也可以显式写其他端口。
• path：路径，/api/user/list，表示服务器上哪个资源。
• query：查询参数，?后面的page=1&size=20，通常用于 GET 请求的过滤、分页等。
• params：在 axios 这类库里，params特指会被拼到 URL 上的参数，而data或body是指请求体。

这个拆分看起来简单，但坑就在这儿：我见过不少人在 GET 请求里用data传参数，后端收不到，查半天。因为 GET 的请求没有 body 概念，参数要么在params，要么拼在 URL 上。反过来，POST 请求里你把参数放params，同样会让后端懵。搞清楚query和body的区别，很多传参问题就直接消失。

2.2 响应阶段：response、status、header、body、cache、resource

点开任意一条请求，响应信息里全是高频词：

• response：响应，也就是服务器返回给你的整体数据对象。
• status：状态码。200 OK、301 Moved Permanently、304 Not Modified、400 Bad Request、401 Unauthorized、403 Forbidden、404 Not Found、500 Internal Server Error。304值得单独说一句，它的意思是“资源没有修改，直接用缓存吧”，前端很多缓存优化就是要让它生效。
• header/headers：请求头/响应头。这里存的是元信息，比如Content-Type（返回的是什么类型）、Authorization（身份凭证）。有一次我调后端接口一直 401，查了半天发现是 headers 里忘了放token，这个词不熟，排查时你连该搜什么都不知道。
• body：响应体，真正回来的数据。注意和payload的细微差别：payload更侧重“传输的有效载荷”，body更侧重“内容的实体部分”，实际沟通时经常互换。
• resource：资源。前端性能优化里的Resource Timing API、preload、prefetch都是围绕资源加载做文章。

2.3 渲染与交互阶段：render、layout、paint、event、throttle、debounce

拿到数据后就要上屏，这阶段的高频词几乎全来自浏览器渲染原理：

• render：渲染，把数据变成可见 UI 的过程。React 里有render方法，Vue 里有render function，面试必问。
• layout：布局，计算每个元素的位置和尺寸。Reflow（回流）指的就是重新执行 layout。
• paint：绘制，把布局结果画到屏幕上。Repaint（重绘）是只改颜色等视觉属性时的操作。
• composite：合成，把多层位图合到一起。性能优化里常说“避免强制同步布局”，这个词组是forced synchronous layout。
• event：事件。click、keydown、scroll都是事件。
• throttle：节流，限制“一段时间内最多执行一次”。
• debounce：防抖，限制“只有停止触发后再等一段时间才执行”。

这两个词面试频率高得吓人。我面试过一个人，让他实现“搜索框输入完成后自动查询”，他写了个setTimeout就交了，根本没有区分输入过程中的每次触发和结束后的触发。其实debounce背后那个“客厅等电梯”的类比特别好记：电梯关门后，如果又有人来，门会重新打开并再等一段时间；搜索框防抖就是“停止输入后 300ms 才发送请求”。

3. 代码里全是命名暗语，看懂单词等于看懂了函数意图

前端项目的代码可读性，很大程度取决于你能不能“望文生义”。我接手老项目时最怕的不是逻辑复杂，而是命名乱来——data1、flag2、xixi，这种代码没人敢动。反过来，如果命名规范，你根本不需要看实现就能理解七八成。

3.1 函数命名的动词前缀：is、has、can、should、on、handle、get、set、to

前端函数的命名习惯非常固定，动词前缀就是最大的线索：

• get：获取。getUserList就是拿用户列表，通常有返回值。
• set：设置。setLoading(true)就是改状态。
• is：判断“是不是”。isActive、isVisible、isLoading，一般返回布尔值。
• has：判断“有没有”。hasPermission，检查权限。
• can：判断“能不能”。canSubmit，表单能不能提交。
• should：判断“应不应该”。shouldUpdate，常用于组件更新逻辑。
• on：事件处理。onClick、onChange、onSubmit，代表“在某某事件发生时”。
• handle：处理。handleClick和onClick的差异很微妙：onClick更多是绑定在 DOM 上，handleClick是内部定义的处理函数。
• to：转换。toString（转字符串）、toJSON（转 JSON）、toFixed（保留小数）。

这个列表看起来简单，但实际收益非常大。比如event.target和event.currentTarget，面试八股文常考：target是真正触发事件的元素，currentTarget是绑定监听器的元素。理解target是“目标”、current是“当前的”，再加上一个冒泡场景，就能记住。

3.2 组件和属性的高频语义：placeholder、disabled、readonly、loading、visible、selected

写 UI 组件的时候，有一批属性名是行业共识，基本所有组件库都遵循：

• placeholder：占位提示文本，在 input 里显示浅色的提示文字。
• disabled：禁用，让组件不可操作。注意前端禁用只是交互限制，数据安全不能靠它。
• readonly：只读，值在但不可编辑。和disabled的区别是 readonly 字段仍可聚焦、仍会随表单提交。
• loading：加载中状态，常见于按钮、表格、页面切换。
• visible/show/open：显示相关。Element Plus 的 Dialog 用v-model控制，但很多配置项里会写visible。
• selected：选中状态。
• multiple：多选模式。
• clearable：可清除。词根clear（清空）加-able（能被…的），这类词很有规律：clickable、scrollable、collapsible、editable、selectable。

这里有一个实战场景：Element Plus 的el-select要想支持搜索，配置项叫filterable，直译是“可过滤的”。第一次用的时候我记了很久，后来发现前端属性里大量-able结尾的词，都是“可…”的意思，editable可编辑、searchable可搜索。记住这个后缀，一猜一个准。

3.3 框架生态里的高频词：props、state、ref、computed、watch、emit、provide/inject

再以 Vue 为例，很多人刚开始看不懂文档，是因为这些词不是英语问题，而是“框架语义”问题：

• props：属性简写，父组件传下来的数据。单词全称是properties，但在框架语境里就是“外部传入的参数”。
• state：状态，组件内部可变的数据。Vue 的data就是 state 的一种。
• ref：引用的简写，reference。ref可以拿到 DOM 实例或组件实例，Vue 3 的ref还会包装成响应式对象。
• computed：计算属性，由其他状态推导出的值。核心特征是“依赖变化才重新计算”。
• watch：侦听，主动观察某个值的变化并执行副作用的回调。
• emit：触发/发射，子组件往外抛事件。emits: ['change']表示子组件要触发一个 change 事件。
• slot：插槽，把内容“塞进”组件预留的位置。
• provide/inject：提供/注入，实现跨层级传值，不需要逐层透传 props。
• reactive：响应式的，reactive()把一个普通对象变成响应式对象。
• unref：解开 ref 的包装直接取值。这个“un-”前缀也很有用：unsubscribe（取消订阅）、unmount（卸载）。

以前端组件库心智模型来说，props是“输入”，emit是“输出”，slot是“可替换区域”，state是“内部记忆”，这套模型几乎适配所有现代框架。把这些词放对位置，Vue、React、甚至小程序都能很快上手。

4. 工具链和协作场景里的高频词，不写代码也在用

前端开发不只是写组件，还有一整套工具链和协作流程。每天要敲的命令、要看的 CI 日志、要处理的 git 冲突，满屏都是英文。

4.1 命令行和脚本命令：init、dev、build、preview、lint、test、format

现在的项目基本都是 Vite、Webpack 这类工具驱动的，package.json 里的 scripts 几乎都是这几个词：

npm init npm run dev npm run build npm run preview npm run lint npm run test

• init：初始化，生成一个新项目骨架。
• dev：development 的缩写，开发模式。特点是带热更新，速度快。
• build：构建/打包，把源码压缩、转译成生产环境可用的产物。
• preview：预览，本地预览构建产物。
• lint：静态检查，检查代码风格和潜在错误。ESLint 里的Lint本意是“线头”，引申为找茬。
• test：测试。
• format：格式化，prettier --write就是自动整理代码格式。

这里有个很实际的坑：npm run dev和npm run serve的区别。serve更多是“启动一个静态服务”的意思，而dev强调“开发模式”。如果你看老项目跑的是npm run serve，不用惊慌，它只是把开发服务这个名字叫成了“服务”。

4.2 Git 协作词汇：clone、commit、push、pull、merge、rebase、stash、revert

Git 是前端协作的必备工具，这些词的语义高度自洽：

• clone：克隆，把远程仓库完整复制一份到本地。
• commit：提交，把改动记录在本地版本历史里。常说“提交一个 commit”。
• push：推送，把本地提交推送到远程仓库。
• pull：拉取，把远程更新拉到本地。
• merge：合并，把一个分支的改动合并到当前分支。
• rebase：变基，把一个分支的提交“重放到”另一个分支之上。很多人怕 rebase，其实理解“base（基底）”就能记：换一个基底重新放。
• stash：暂存，把当前未提交的改动临时藏起来。字面意思就是“藏匿”。
• cherry-pick：摘樱桃，挑一个特定的 commit 应用到当前分支。
• revert：还原，通过新增一个反向提交来撤销之前的提交。

协作时最容易懵的场景是合并冲突。控制台会显示CONFLICT (content)。conflict就是冲突，content是内容，也就是说内容的合并有冲突。并不难，但如果你不知道conflict这个词，光看到一个红色大写单词就容易慌。

4.3 项目配置里的高频词：config、alias、proxy、plugin、exclude、include、minify

打开 Vite 或 Webpack 的配置文件，高频词又换了一批：

• config：配置，vite.config.js就是 Vite 的配置文件。
• alias：别名，给路径起一个短名字。@指向src就是最常见的 alias 配置。
• proxy：代理，解决开发环境跨域。Vite 里配置 server.proxy，把/api开头的请求转发到目标服务器。
• plugin：插件，扩展工具能力的模块。
• exclude/include：排除/包含。这两个看似简单，但理解错了会踩坑。比如 eslint 配置里exclude了某个目录，那你改了那个目录的文件 lint 也不会报错。
• minify：压缩/最小化，去掉空格换行和缩短变量名。minified就是压缩后的文件。
• bundle：打包产物，多个模块合并之后的文件。code splitting（代码分割）就是把它拆成多个更小的包，按需加载。
• tree-shaking：摇晃树，把没用到的代码像枯叶一样摇掉。这是前端打包优化里一个高频词，词本身很形象。

我在配置 proxy 的时候，第一次看到rewrite: (path) => path.replace(/^\/api/, '')完全不知道在干嘛。后来理解了rewrite是“重写”，replace是“替换”，立刻明白这一段的作用是把请求路径里的/api前缀剥掉再转发给后端。这种词不需要背，遇到一次、翻译一次、想明白一次，就彻底记住了。

5. 面试和进阶术语：翻译成中文全会，变成英文就懵

前端面试有一个非常微妙的现象：很多概念中文描述头头是道，面试官换个英文说法，就卡住了。比如：

• 中文说“闭包”，大家点头。
• 英文说closure，有人反应不过来其实是同一个东西。

这不是技术问题，是词汇映射没形成。我整理几个面试高频词的英文表达和中文的对应关系，帮助大家把“双通道”打通。

5.1 事件循环相关：event loop、microtask、macrotask、call stack

Event Loop是面试绕不开的题目，但很多人的记忆点只有“事件循环”四个字，英文拼写都不熟。这里有几个连带词：

• event loop：事件循环，JS 单线程处理异步任务的核心机制。
• call stack：调用栈，当前正在执行的函数调用链。
• microtask：微任务，Promise.then、queueMicrotask、MutationObserver属于这类。
• macrotask：宏任务，setTimeout、setInterval、MessageChannel、I/O属于这类。
• callback queue/task queue：任务队列，宏任务排队的队列。

这个知识点最经典的面试题就是“输出打印顺序”。用过 Node.js 的人都知道一个缩写process.nextTick，它就是“下一个时钟周期再执行”，优先级比Promise.then还高。英文里tick是“滴答一声”，对应一轮循环的节拍。

5.2 作用域和原型链：closure、hoisting、lexical scope、prototype

• closure：闭包。核心定义是“函数加上它声明时的词法环境”。注意lexical scope（词法作用域）是理解闭包的前提：函数能访问的变量范围，在书写代码的位置就确定了，和调用位置无关。
• hoisting：提升。var声明的变量会被“提升”到作用域顶部，所以你会看到undefined而不是ReferenceError。hoist本义是“吊起来/升起”。
• prototype：原型。prototype chain（原型链）是 JS 实现继承的机制。__proto__是实例指向原型的指针。
• this：这个，指向调用时的上下文对象。面试题“this 指向谁”考的就是这个。
• new：构造新对象的关键字。
• instanceof：判断“是否为某个构造函数的实例”。

一个容易混淆的细节：hoisting提升的是“声明”不是“赋值”，所以console.log(a); var a = 1;输出的是undefined而不是报错。如果你听懂面试官的英文问题里带hoisting，就能快速对应到“变量提升”，不会一句话答偏。

5.3 性能和工程相关：tree-shaking、code splitting、memory leak、garbage collection

• tree-shaking：字面意思是“摇树”，具体指打包时移除未引用的代码。为什么叫摇树？就像你摇一棵树，枯死的叶子会掉下来。实现依赖 ES Module 的静态分析能力。
• code splitting：代码分割。按路由或按组件拆分 bundle，让首屏只加载必要代码。
• lazy load：懒加载/按需加载。图片懒加载、路由懒加载里的lazy都是这个。
• memory leak：内存泄漏。没用的内存没有释放，越积越多，页面越来越卡。
• garbage collection：垃圾回收。JS 引擎自动回收不再使用的内存。GC是缩写。
• closure的副作用：闭包本身容易造成内存泄漏，因为被闭包引用的变量无法被垃圾回收。这两个词串起来，正好构成一道综合面试题。

我在面试里还经常听到closure和currying（柯里化）被搞混。currying是把多参数函数拆成一串单参数函数，closure是作用域保留机制。虽然俩词长得像，但完全是两个东西。建议把所有长得像的术语都专门做一张对照表，面试前过一遍。

6. 用查一个词的时间，学十个词：我的日常积累方法

最后分享一个我一直用的方法，不枯燥，而且特别适合英语基础一般的人。

6.1 把报错信息当成免费词库

每次浏览器或终端报错，不要急着复制到搜索引擎，先自己读三遍，把每个词都过一遍。我举例：

GET http://localhost:8080/api/user 401 (Unauthorized)

翻译路径是：GET（请求方法）+localhost:8080（本地地址）+/api/user（接口路径）+401（状态码）+Unauthorized（未授权）。读完之后你要形成一个完整的句子：“对本地 8080 端口的 /api/user 发起了 GET 请求，返回 401 未授权。”一旦你能把报错完整翻译成中文句子，排查方向就明确多了：检查 token、检查登录态、检查 headers。

Console 里的每个报错几乎都是这样一类“填空式翻译”。你坚持读一周，常见的报错词基本全认识了。

6.2 看源码时做“语境化笔记”

我不建议生背单词表，而是建议在代码里做情景笔记。看到不认识的关键词，随手在注释里写一句这个词出现的场景。

举个例子，Vue 3 的computed不知道什么意思时，我就会写：

// computed: 根据依赖自动计算的值，依赖变了它也跟着变 const fullName = computed(() => firstName.value + lastName.value)

下次再看到computed，我想到的不只是“计算属性”四个字，还有这个“姓名拼接”的代码画面。词汇脱离了上下文很容易忘，但挂在代码场景里就忘不掉。

再比如 Element Plus 组件里你看到一个属性popper-class，popper是弹层组件，class是样式类。你会顺手查一下popper到底是什么，然后发现它来自 Popper.js——一个专门做弹层定位的库。你从一个属性名出发，最后面能扯出一整条知识链。

6.3 用面试题反向背词

准备面试的时候，不要只刷中文题，把经典问题换成英文关键词来记。比如：

• “数组去重” 对应unique array
• “深拷贝和浅拷贝” 对应deep copy/shallow copy
• “防抖节流” 对应debounce/throttle
• “事件冒泡与捕获” 对应event bubbling/event capture
• “跨域” 对应cross-origin/CORS
• “前端路由模式” 对应history mode/hash mode
• “虚拟 DOM” 对应virtual DOM
• “响应式原理” 对应reactivity
• “依赖收集” 对应dependency collection

这些词别看简单，面试时从中文脑切换到英文嘴，是需要练习的。你可以做一个小训练：每看完一个知识点，就用自己的话把英文关键词和中文概念放在一起说一遍，比如“debounce是防抖，它和throttle节流的区别在于……”。说到这里你不会卡壳，面试就稳了。

我自己的体会是，“前端常用单词”根本不应该被当成一门额外功课，它就是平时工作中随手可见的东西。你不会的每个词，都在报错里、在源码里、在组件属性里反复出现。只要你每次多看一眼、多翻译一次，而不是复制粘贴去搜索，积累速度会非常快。等哪一天你发现自己看文档不再需要切翻译软件，读报错第一眼就能锁定问题方向，那时候你收获的不只是词汇量，还有整个学习和排障效率的提升。