Node.js 笔试题讲解

一、JS 事件循环：异步执行顺序核心考点

题目：给出 console.log 同步代码、setTimeout、Promise.then 的执行顺序并说明原因。正确输出 ：1 → 4 → 3 → 2。核心原理 ：JS 是单线程语言，依靠事件循环实现异步非阻塞，执行规则为黄金定律：

优先执行主线程所有同步代码；
同步代码执行完毕，一次性清空微任务队列；
微任务清空后，执行一个宏任务；
循环往复，直至任务队列清空。

任务分类：

同步任务：普通 console.log、变量赋值等阻塞式代码；
微任务：Promise.then/catch、async/await 后续代码，优先级更高；
宏任务：setTimeout/setInterval、Ajax、I/O 操作，一次仅执行一个。

本题中，console.log('1')、console.log('4')为同步任务先执行；Promise.then进入微任务队列，同步结束后立即执行；setTimeout进入宏任务队列，最后执行。这是前端笔试必考的基础考点，务必牢记执行规则。

二、数据统计函数：按类型汇总金额

题目：给定 transaction 数组，编写函数按 type 统计 coins 总和：

javascript

复制代码

const transaction = [
  { type:"subscription", product_id:"com.ai.transcribe.oneweek.pro", coins:10 },
  { type:"consumable", product_id:"com.ai.transcribe.coins1", coins:100 },
  { type:"subscription", product_id:"com.ai.transcribe.onemonth.pro", coins:50 },
  { type:"subscription", product_id:"com.ai.transcribe.oneyear.pro", coins:100 },
  { type:"consumable", product_id:"com.ai.transcribe.coins2", coins:200 }
];

function calcCoinsByType(transactions) {
  const map = new Map();
  for (let item of transactions) {
    const current = map.get(item.type) || 0;
    map.set(item.type, current + item.coins);
  }
  return Object.fromEntries(map);
}
// 输出：{ subscription: 160, consumable: 300 }

核心思路：使用 Map 存储类型与总金额的映射，遍历数组累加对应类型金额，最后转为对象返回。考察数组遍历、Map 数据结构、数据聚合的基础能力，是日常开发中数据处理的常见场景。

三、开发常用高阶函数

高阶函数是指接收函数作为参数 或返回函数的函数，前端开发高频使用的有：

数组操作类：map（映射）、filter（过滤）、reduce（聚合）、sort（排序）；
性能优化类：防抖（debounce）、节流（throttle），解决高频触发问题；
函数编程类：柯里化函数、偏函数，实现参数复用与逻辑解耦。

高阶函数能简化代码、提升复用性，是前端模块化开发的基础工具。

四、async/await 与 Promise 的区别和联系

核心结论 ：async/await 是 Promise 的语法糖 ，二者底层逻辑完全一致。联系：async 函数返回值自动包装为 Promise；await 后续只能跟 Promise，暂停执行等待状态变更。区别：

Promise：依赖.then/.catch 链式调用，复杂逻辑易出现 "回调链"，可读性较差；
async/await：用同步写法写异步代码，逻辑扁平化，异常处理可结合 try/catch，更符合线性思维。

简单来说，Promise 是异步编程的基础，async/await 让异步代码更直观易维护。

五、并行请求函数实现

题目：实现 fetchUrls 并行请求多个 URL，忽略错误返回结果数组。完善代码：

javascript

复制代码

async function fetchUrls(urls) {
  const tasks = urls.map(async (url) => {
    try {
      const res = await fetch(url);
      return await res.text();
    } catch {
      return null; // 请求失败返回null，不阻塞整体流程
    }
  });
  return Promise.all(tasks);
}

核心思路：用 map 批量创建 Promise 任务，try/catch 捕获单个请求异常；通过 Promise.all 等待所有任务完成，实现并行请求且不中断。这是前端并发请求、批量接口调用的常用方案。

六、跨域问题（CORS）详解

跨域定义 ：浏览器同源策略 限制，协议、域名、端口任意一个不同，即为跨域。同源策略是浏览器安全基石，防止恶意网站窃取数据、发起非法请求。常用解决方案：

开发环境：Vite/Webpack 反向代理；
生产环境：Nginx 反向代理、后端配置 CORS 响应头；
其他：JSONP（仅支持 GET，已少用）、postMessage。

跨域是前后端分离开发的高频问题，理解原理才能快速定位解决方案。

七、Promise 未捕获错误调试方案

运行中未捕获的 Promise rejection 易导致页面异常，推荐四步调试法：

控制台定位：查看红色报错，点击文件 + 行号直接跳转代码；
开启异步栈追踪：F12-Settings 勾选 Async stack traces，显示完整异步调用链路；
全局监听错误 ：通过unhandledrejection事件拦截所有未捕获异常；
断点调试：Sources 面板在 Promise/await 处打断点，逐步排查请求、参数、解析问题。

这套方案能快速定位异步错误，提升调试效率。

八、HTTP 与 HTTPS 的区别及安全原理

核心区别：

HTTP：明文传输，数据易被窃听、篡改，默认端口 80；
HTTPS：HTTP+TLS 加密协议，默认端口 443，传输数据加密处理。

HTTPS 安全保障：

混合加密：非对称加密交换密钥，对称加密传输数据，兼顾安全与效率；
CA 证书认证：权威机构颁发证书，验证服务器身份，防止钓鱼；
数据完整性校验：Hash 算法验证数据未被篡改。

HTTPS 已成为 Web 应用标配，是网络安全的基础保障。

九、Node 文件处理常用函数

Node.js 中 fs 模块是文件处理核心，高频 API：

fs.readFile：读取文件内容；
fs.writeFile：写入文件（覆盖原有内容）；
fs.appendFile：追加内容到文件末尾；
fs.mkdir：创建目录，适配文件管理、日志存储等场景。

十、常见 HTTP 状态码及处理方案

开发中高频状态码处理：

400：请求参数错误，核对参数格式、个数、字段名；
401：鉴权失败，检查 Token 有效性、过期时间，刷新接口免鉴权配置；
404：接口不存在，核对请求地址与请求方法；
504：网关超时，排查服务端响应速度、第三方接口延迟。

状态码是接口调试的重要依据，快速对应问题能提升开发效率。

十一、浏览器输入 URL 到页面展示全流程

URL 标准化：补全协议、域名，非 URL 跳转搜索引擎；
重定向处理：301 永久重定向、302/307 临时重定向；
DNS 解析：域名转 IP，依次查浏览器、系统、Host、运营商缓存；
TCP 三次握手：建立可靠连接；
TLS 握手：HTTPS 场景下建立加密通道；
请求响应：发送 HTTP 请求，服务端返回资源；
浏览器渲染：构建 DOM 树、CSSOM 树，合成渲染树，完成布局、绘制、合成显示。

这是前端核心底层原理，贯穿网络、渲染全流程。

十二、浏览器首屏加载体验优化

提升首屏速度的实战手段：

资源优化：图片懒加载、小图转 Base64、选用 WebP/AVIF 压缩格式；
代码优化：路由懒加载、按需加载组件；
缓存优化：强缓存 + 协商缓存，减少重复请求；
体验优化：骨架屏、加载占位，降低用户等待焦虑。

十三、图片浏览 Web App 技术实现考量

技术栈：Vue3/React+Tailwind CSS+Vite，兼顾效率与性能；
适配策略：响应式布局，兼容多端设备；
图片策略：懒加载、格式优化、分类检索、防爬取；
权限管理：未登录拦截、私密图片加密、双层防护。

覆盖技术选型、用户体验、安全防护全维度，符合实战项目开发逻辑。