人生进阶指南 JavaScript 英语词表实战详解：从 async 到 webpack 的 28 个前端高频术语

本篇技术指南以《人生进阶指南》仓库中的 JavaScript 词表 为主体，逐词拆解 28 个前端脚本、浏览器 API 与异步流程相关的高价值英文术语：先说清每个词在 JavaScript 语境中的准确含义与读法，再给出高频搭配、可运行示例和易混淆点，最后落回仓库 词汇篇 定义的"从真实任务选词 → 主动回忆 → 语境产出"学习回路。读完你将得到一份既能当速查手册、又能当学习训练脚本的完整清单，并理解词表在仓库中的维护方式与真实语料出处。

一、词表的定位：查阅索引，不是学习数量目标

JavaScript 词表 位于 docs/threads/word-list/ 目录，与 Common.md、Prompt.md、Python.md 等十余个主题词表并列。每个词表页面都带有 front matter 元数据：

---
title: JavaScript 词表
description: JavaScript 主题的高价值英文术语参考表；应从真实任务中选择词条并练习发音、搭配、回忆与语境使用。
updated: 2026-08-16
---

页面正文则是 28 个词条的纯文本清单，末尾明确写着一句方法论提醒："本页是查阅清单，不是学习数量目标"。也就是说，这页不是要求你背完的进度条，而是一个"选词货架"——每次只从当前真实任务里挑 5～8 个词块去练。

在仓库 词汇篇 的"技术词表：从任务里挑词"一节中，这张词表被标注为面向前端脚本、浏览器 API 和异步流程场景。仓库中其他词表也有各自的适用任务入口，例如 Common 面向通用工作、Prompt 面向 AI 任务说明、Python 面向数据处理、Go 面向服务端并发等，可对照该节的选择矩阵按需取用。

该词表还有一个值得注意的工程细节：英文版 docs/en/threads/word-list/JavaScript.md 并非人工翻译的副本，而是由 scripts/sync-word-lists.mjs 从中文源文件自动生成的，其文件头注释明确写着 "Generated by scripts/sync-word-lists.mjs; edit docs/threads/word-list instead."。该脚本会剥离源文件 front matter、抽取 # JavaScript 标题与词条正文，分别拼接成中英文页面，并在 --check 模式下比对同步状态；仓库根目录 package.json 中的 npm run check:navigation 就串联了该脚本的检查模式。这意味着词条在 CI 层面被持续校验，中英文两侧始终来自同一份维护源。

二、28 个词条速查总览

为便于检索，下表按主题给原词表做了归类讲解分组（词条本身一个不落，全部保留）：

术语	类别分组	一句话核心含义
async	异步流程	声明异步函数的关键字，异步函数总是返回 Promise
await	异步流程	在 async 函数中等待一个 Promise 落定的运算符
promise	异步流程	表示"未来才完成的值"的对象，状态为 pending/fulfilled/rejected
event loop	异步流程	JS 单线程的并发模型：排队执行任务与微任务
fetch	异步流程	发起网络请求的 Web API，返回 Promise
runtime	异步流程	代码实际运行的宿主环境（浏览器或 Node.js）
yield	异步流程	生成器函数中暂停执行并向外产出值的关键字
closure	语言机制	函数与其定义时词法作用域的绑定
hoisting	语言机制	var 声明与函数声明被提升到作用域顶部的行为
prototype	语言机制	对象通过原型链共享属性与方法的继承机制
typeof	语言机制	返回操作数类型字符串的一元运算符
undefined	语言机制	已声明但未赋值时的原始值
Infinity	语言机制	表示正无穷的全局属性
JSON	语言机制	与 JavaScript 对象字面量语法相近的数据交换格式
document	DOM 与浏览器 API	代表当前页面的全局文档对象，DOM 的入口
element	DOM 与浏览器 API	DOM 树中的元素节点
animation	DOM 与浏览器 API	动画；Web Animations API 与 CSS 动画均涉及
canvas	DOM 与浏览器 API	提供位图绘制区域的 <canvas> 元素
frames	DOM 与浏览器 API	渲染帧；requestAnimationFrame 在下一帧前回调
decode	DOM 与浏览器 API	解码；如 decodeURIComponent 与 TextDecoder
localStorage	DOM 与浏览器 API	按源持久化字符串键值对的浏览器存储
navigator	DOM 与浏览器 API	描述浏览器与设备信息的全局对象
performance	DOM 与浏览器 API	高精度时间与性能测量 API
prompt	DOM 与浏览器 API	弹出输入对话框的 window.prompt()
screen	DOM 与浏览器 API	描述物理屏幕尺寸的 window.screen
scroll	DOM 与浏览器 API	滚动；scrollIntoView、scroll 事件等
npm	工程生态	Node.js 的包管理器与软件包注册表
webpack	工程生态	前端模块打包器

三、异步流程词条精讲

本组是词表描述里"异步流程"的重点：async / await / promise / event loop / fetch / runtime / yield。它们共同构成现代 JavaScript 写异步代码的最小词汇集。

async（读法 /ˈeɪsɪŋk/，常称 "AY-sink"） async function 声明的函数总是返回 Promise，无论函数体内 return 的是普通值还是 Promise，返回值都会被包进已落定的 Promise。常见搭配：an async function、async/await。

async function loadUser(id) {
  // 无论 return 什么，调用方拿到的都是 Promise
  return await fetch(`/users/${id}`).then((res) => res.json());
}

await（读法 /əˈweɪt/） 只能出现在 async 函数（或支持 top-level await 的 ES 模块）中，作用是把 async 执行暂停到右侧 Promise 落定，并把结果解包给左侧变量。它不会阻塞线程——事件循环仍能处理其他任务。常见搭配：await a promise、await the response。二者在真实语料中几乎总是一起出现，形成固定词块 async/await。

promise（读法 /ˈprɑːmɪs/） Promise 对象有 pending、fulfilled、rejected 三种状态，通过 then/catch/finally 或 async/await 消费。口语里常说 a pending promise、a resolved/rejected promise、a promise chain。写英文注释或评审时，描述一段逻辑可以说：

// Wrap the request so callers can await it as a promise.
function requestData(url) {
  return fetch(url).then((res) => res.json());
}

event loop（读法 /ɪˈvent luːp/） 这是 JS 的并发模型，而不是某个可直接调用的对象。其核心事实是：JS 在单个线程上运行，宏任务（如 setTimeout 回调、用户事件）从任务队列取出执行，其间会清空微任务队列（Promise 回调、queueMicrotask）。因此写"不要阻塞事件循环"可以说 don't block the event loop。它同时也是开发会议里非常高品的口头词块：the event loop is blocked、microtasks run before the next task。

fetch（读法 /fetʃ/） fetch(url) 发起网络请求并返回 Promise<Response>。注意两个高频坑位正好对应两组固定搭配：HTTP 404/500 不会让 promise reject，需要手动检查 response.ok；只有断网等网络层失败才 reject。超时控制要靠 AbortController。常见搭配：make a fetch request、fetch the data、parse the response。

async function getProfile(id) {
  const res = await fetch(`/api/profile/${id}`);
  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
  return res.json(); // 注意：json() 本身也返回 Promise
}

runtime（读法 /ˈrʌntaɪm/） 指代码实际执行的环境：浏览器 runtime 提供 DOM API，Node.js runtime 提供 fs、http 等能力；同层还区分 runtime error（运行时报错）与 compile time。在 package.json 中可以看到本项目对 Node.js 运行时版本的显式约束 "engines": { "node": ">=24 <25" }，这正是"runtime"一词在真实工程里的用法：declare the runtime version、runtime environment。

yield（读法 /jiːld/） 生成器函数（function*）中的关键字：函数执行到 yield 会暂停，把右侧值放进迭代器结果 { value, done } 交给调用方，调用 next() 后恢复。与 async 组合可写异步生成器 async function*。常见说法：yield a value、pause and resume。

function* steps() {
  yield "first";   // 暂停点，产出值
  yield "second";
}
const it = steps();
it.next(); // { value: "first", done: false }

四、语言与数据机制词条精讲

本组覆盖 JS 语言本体中几个最容易在英文讨论里用错或说不清的概念：closure / hoisting / prototype / typeof / undefined / Infinity / JSON。

closure（读法 /ˈkloʊʒər/） 闭包 = 函数 + 它被定义时所处的作用域。内层函数即使在外层函数返回后仍能访问外层变量，由此实现数据私有与工厂函数。写代码注释或技术评审时，the closure captures the variable、create a closure per iteration 都是高频表达。经典例子：

function makeCounter() {
  let count = 0;
  return function increment() {
    count += 1; // increment 通过闭包持有 count
    return count;
  };
}

hoisting（读法 /ˈhɔɪstɪŋ/） "提升"指声明在编译阶段被移到作用域顶部：var 与 function 声明会被提升，其中 function 声明整体可用，var 提升到顶部时初始值为 undefined；而 let/const 虽然也被提升，但在初始化前访问会落入**暂时性死区（temporal dead zone）**抛错。因此在代码评审中常听到：avoid relying on hoisting、var is hoisted but let is not initialized。

prototype（读法 /ˈproʊtətaɪp/） JavaScript 继承通过原型链完成：访问对象上不存在的属性时，会沿 [[Prototype]] 链向上查找，Object.prototype 在链顶；ES6 class 本质仍是基于原型（prototype-based）的语法糖。常见说法：the prototype chain、inherit through the prototype、extend a prototype。安全语境里还有一个固定词块 prototype pollution（原型污染）。

typeof（读法 /ˈtaɪp.əv/） 返回操作数类型字符串的一元运算符，是 JS 中最容易被考到的一个"怪癖词"：typeof null === "object" 是语言的历史遗留 bug，判定数组要用 Array.isArray，而 typeof function(){} 返回 "function"。写断言时常说 check the type with typeof。

typeof "hello";      // "string"
typeof 42;           // "number"
typeof null;         // "object"  <- 经典陷阱
typeof undefined;    // "undefined"

undefined（读法 /ˌʌndɪˈfaɪnd/） 声明但未赋值的变量、函数未 return 时的返回值、不存在的对象属性，得到的都是这个原始值。与 null 的关键区别：undefined 是"系统给的未定义"，null 常表示"开发者主动置空"。常见搭配：an undefined variable、check for undefined。

Infinity（读法 /ɪnˈfɪnəti/） 全局属性，代表正无穷：1 / 0 结果是 Infinity，Number.isFinite() 用于判断是否有限。两个实用注意点：JSON.stringify(Infinity) 会把它序列化成 null；计算中要判断可序列化时须显式处理。常见说法：positive/negative Infinity、a non-finite number。

JSON（读法日常开发常说 /ˈdʒeɪsən/，即 "JAY-son"；也可逐字母读 J-S-O-N） 注意它是数据交换格式而非 JavaScript 对象：键必须双引号、不支持注释与尾逗号。核心动词搭配是成对出现的 parse JSON 与 serialize / stringify to JSON：JSON.parse(text) 把字符串变成值，JSON.stringify(value) 反向序列化。本仓库的 package.json 与 package-lock.json 本身就是最贴近的 JSON 真实语料——整份文件用标准 JSON 声明脚本、依赖与 engines。

五、DOM 与浏览器 API 词条精讲

这组贴合词表对 JavaScript 场景的描述"前端脚本、浏览器 API"：document / element / animation / canvas / frames / decode / localStorage / navigator / performance / prompt / screen / scroll。它们绝大多数是浏览器全局对象与标准 Web API 的名字，看英文文档时出现的频率极高。

document（读法名词 /ˈdɑːkjumənt/，注意不是 "docu-mental"） 代表当前页面的全局对象，是操作 DOM 的入口。高频词块都是方法名搭配：document.querySelector、document.getElementById、document.createElement。描述页面结构时可说 manipulate the document、the document is ready。

element（读法 /ˈelɪmənt/） DOM 树中的元素节点，是 querySelector 等选择器返回的对象类型。常见搭配：a DOM element、attach a listener to the element、an element reference。区分 document（整棵树/页面）与 element（树中的单个节点）本身就是一个高频考试点。

const card = document.querySelector(".card"); // element
card.classList.add("selected");                // 在 element 上操作

animation（读法 /ˌænɪˈmeɪʃn/） 浏览器里的动画实现有多个层面：CSS animation/transition、Web Animations API（element.animate()）、JS 手动驱动的 requestAnimationFrame 循环。英文里 run/trigger an animation、animation frame、animate the element 都是常见词块。

canvas（读法 /ˈkænvəs/） <canvas> 元素提供位图绘制画布，先拿渲染上下文再画：canvas.getContext("2d")。常见说法：draw on a canvas、a canvas context、clear the canvas。它与 SVG 的对比（canvas 像素级 vs SVG 矢量 DOM 节点）也是英文讨论里的常见话题。

frames（读法 /freɪmz/） 在这张浏览器词表里，"帧"主要指渲染帧：浏览器通常按显示器刷新率（常见为 60Hz，具体取决于设备与系统）逐帧绘制页面，requestAnimationFrame 会在下一帧绘制前执行回调，因此被用来做流畅动画。常用表达：the next animation frame、frames per second (fps)、schedule work on the next frame。

function tick() {
  // 在下一渲染帧前回调，适合动画循环
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

decode（读法 /ˌdiːˈkoʊd/） "解码"家族：decodeURIComponent 解码 URL 编码、TextDecoder 把字节流解码为字符串、atob 解码 base64。它与 encode 总是一对：encode/decode the data、decode the response body。读到英文报错 malformed URI sequence 时，就该检查 decode 方向的参数了。

localStorage（读法就按 "local storage" 连读） window.localStorage 提供按**源（origin）**持久化的字符串键值存储，同一源下所有标签页共享，且操作是同步的；配额大小由浏览器实现决定。核心动词三件套：setItem / getItem / removeItem。常说 store the token in localStorage、read from localStorage。注意跨源读取会被安全策略拦截——讨论到登录态存储时这句英文非常常用。

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
localStorage.removeItem("theme");

navigator（读法 /ˈnævɪɡeɪtər/） 浏览器全局对象 navigator，提供运行环境信息与能力入口：navigator.userAgent、navigator.language、navigator.clipboard、navigator.geolocation。功能检测的经典句式就是 feature-detect via the navigator object。

performance（读法 /pərˈfɔːrməns/） 浏览器的高精度时间与性能测量 API。performance.now() 返回比 Date.now() 更高精度的时间戳（常用于测量代码耗时）；performance.mark/measure 与 PerformanceObserver 用于记录与观察性能条目。会议与评审中的高频句：measure the performance、a performance regression、optimise the bottleneck。测量一段函数耗时是它的典型用例：

const start = performance.now();
runExpensiveTask();
console.log(`took ${performance.now() - start} ms`);

prompt（读法 /prɑːmpt/） 在本词表中指浏览器对话框 window.prompt()：弹出输入框并返回用户输入的字符串，用户取消则返回 null，且会阻塞脚本执行。与之容易混淆的是 AI 任务说明意义上的 "prompt"——那部分被仓库单独归入 Prompt.md 词表，挑选词条时注意区分语境（详见下文易混淆对照）。

screen（读法 /skriːn/） window.screen 描述物理屏幕：screen.width、screen.height、screen.availWidth 等。它不等于可视区（viewport）——判断网页可见宽高应使用 window.innerWidth。因此英文技术讨论里经常要分清：the physical screen resolution vs the viewport size。

scroll（读法 /skroʊl/） 滚动的动词与名词同形。API 与事件相关表达：element.scrollIntoView({ behavior: "smooth" })、window.scrollTo、监听 the scroll event、读 the scroll position。性能语境里常提醒 throttle the scroll handler（对滚动监听做节流），或用被动监听避免阻塞滚动。

六、工程生态词条精讲

npm（读法：可逐字母读 "en-pee-em"，开发者口语也直接说 "npm"） Node.js 生态的包管理器。围绕它的高频动词搭配非常固定：npm install a dependency、add/remove a package、run an npm script、the package.json manifest、the lockfile。本仓库 package.json 就是一个完整示范：devDependencies 声明 vitepress、playwright、markdownlint-cli2 等工具，scripts 定义 docs:dev、check、test:smoke 等命令，engines 锁定 Node 运行时版本。在仓库根目录依次执行 npm install、npm run docs:dev、npm run check 的过程，就是这组词块的活体练习场景。

webpack（读法 /ˈwebpæk/） 主流的前端模块打包器（module bundler）：以配置的 entry 为起点，把 import 关系图中的模块按 loader 与 plugin 规则处理后输出为 bundle。配置文件名 webpack.config.js、核心概念 entry / output / loaders / plugins、code splitting、tree shaking 都是标准搭配。值得留意的是它并非唯一方案——本仓库文档站点用的就是 VitePress（基于 Vite/esbuild 工具链，见 package.json 的 vitepress devDependency 与 overrides），这正好构成"bundler/构建工具选型"语境下讨论 migrate from webpack to Vite 时的现实参照。

七、易混淆词对照表

词表的价值不仅在于认词，更在于分辨相邻概念。把这张 JavaScript 词表放进仓库词汇篇强调的"主动回忆 + 辨析"训练里，下面几组最值得做成辨析卡：

对照组	差异要点
undefined vs null	undefined 是系统默认的"未定义"；null 是开发者主动表达的"无值"。typeof undefined 为 "undefined"，typeof null 却是 "object"
typeof vs instanceof	typeof 判断原始类型（返回字符串）；instanceof 沿原型链判断对象是否属于某构造器
document vs element	document 是整个文档/页面入口；element 是树中具体节点。document.querySelector 返回的是 element
screen vs innerWidth	screen 是物理屏幕尺寸；innerWidth 是网页可视区宽度，响应式判断用后者
localStorage vs sessionStorage	localStorage 持久保留；sessionStorage 随标签页会话结束清除。二者都按源隔离
promise 回调 vs async/await	是同一底层机制的两套写法，不是两种并发模型；async/await 是 promise 链的语法糖
prompt（浏览器对话框）vs Prompt（AI 任务指令）	本词表指 window.prompt()；AI 提示词术语被仓库单独收录在 Prompt.md
yield vs return	return 结束函数；yield 仅暂停生成器并产出值，调用 next() 可恢复
var 提升 vs let 暂时性死区	var 声明提升且初始化为 undefined；let/const 提升但初始化前访问抛 ReferenceError

八、把词表用起来的完整回路

词表页脚和 词汇篇 给出了同一套选词回路，这里用前端任务把它落地为一个可操作样例。

第一步：从真实任务选 5～8 个词块。 假设任务是在页面实现"加载用户列表 + 存一份本地缓存"，打开的代码与文档里最常撞见的词就是：fetch、async、await、promise、JSON、document、element、localStorage、event loop、runtime。不要试图一口气把 28 个全背掉。

第二步：查声音、释义、搭配与来源。 对着官方文档与真实代码确认含义与语域：例如 fetch 的 HTTP 错误语义、await 只能在 async 函数里使用等——词汇篇提醒，词表术语会随语言版本与框架更新而变化，关键决定必须回到官方文档核对，不要把这张清单当作技术标准。

第三步：制作"要求回忆"而不是"要求辨认"的卡片。 参照词汇篇的高质量词卡模板，一张卡只测一个决定：

场景：请求失败时要判断响应状态
留空：The fetch response may be an HTTP error, so we check res.____ before parsing JSON.
背面：ok（res.ok）；原句出处；例句；易混项：status（数字状态码）与 ok（布尔值）

第四步：脱离词表产出。 用下面两种迁移之一：

• 口头复述：不看词表，用 60～90 秒讲一遍"这段加载逻辑如何用 promise 与 event loop 工作"；
• 写作迁移：把本任务改成"写日志 + 缓存主题设置"的平行任务，让 localStorage、JSON.stringify、performance 自然落到新语境。

第五步：延迟复测。 一周后在相似任务里检查是否还能听懂与产出，结果记入 证据链模板；如果长期分不清自己卡在听辨、理解还是产出层，用 词汇审计模板 分维度记录。这套 5 分钟挑词、8 分钟查证、7 分钟制卡、7 分钟产出、3 分钟复盘的结构，正是词汇篇给出的 30 分钟训练单元，比单纯统计"今天背了多少词"更接近一周后依然可用的目标。

九、词表之外的验证与延展

这张词表的词条并非孤立记忆对象，仓库本身就是一片可随时取用的真实语料：

• tests/site.spec.mjs 是 Playwright 编写的端到端测试，通篇使用 promise 化 API 与顶层 await（await page.goto(...)、await expect(...).toBeVisible()），并直接读取 package.json 对应的 Node 脚本运行；阅读这些测试可以同时复习 async、await、promise、element、runtime 的产出性用法。
• 词条的维护链路（scripts/sync-word-lists.mjs + npm run check）展示了 npm、runtime、JSON 在工程自动化中的真实位置；中英文词表是否同步由脚本强制校验，这与"词表是共享单一维护源"的设计相互印证。
• 需要继续扩展主题词表时，可参照同一目录下的 Go.md、Python.md、Rust.md 等选择与当前任务匹配的入口；而学习方法的完整论述与训练单元，始终以 词汇篇 为准。

一句话总结这张词表的使用心智：它是按主题排列的术语货架，价值不取决于"是否背完"，而取决于每次真实任务里能否迅速认出、准确说出、并在新语境中复用。带着 fetch 的响应去读一份英文 API 文档，比默背 28 个单词更能让这些词进入你的长期可用词汇。