用Cursor生成《前端基础高频面试题1页纸》（包含答案+应用场景）

程序员AI焦虑缓解师
0 阅读15分钟

一、cursor操作步骤

  1. 安装Cursor

    官网下载：cursor.com/downloads

  2. 登录/注册 da453ccb-dc57-4cc5-a1ee-a62f696381a1.png

  3. 从vs code迁移配置

  • 打开 Cursor 设置：Cmd/Ctrl + Shift + J
  • 找到 Import Settings from VS Code，点击Import 6f777435-330b-496b-aa09-9fabc6f74e7d.png
  1. 向cursor提问

提问可分为两步

  • 创建一个“高频前端基础题”的markdown文件（此步目的为审核初步生成内容的结构）
  • 根据自己的需求对文档进行调整

fb6e9b50-c37d-4798-949a-bc9d91201a03.png

b198eb0f-7caa-49c8-82c1-9657fbc6e8b0.png

以下是cursor成功生成的《前端基础高频面试题1页纸》（包含答案+应用场景），自取：

二、高频前端基础题

二十道高频题：每题含标准化面试答案模板与应用场景，便于背诵与扩展。

目录

序号题目
1HTML5 语义化
2localStorage / sessionStorage / Cookie
3Flex 主轴与交叉轴
4Flex 与 Grid 选型
5rem 与 rpx、适配
6let / const / var
7Promise 状态与链式调用
8async / await
9ES Module 与 CommonJS
10闭包
11原型链与 instanceof
12跨域与 CORS
13冒泡与捕获
14事件委托
15DOM 操作优化
16宏任务、微任务与 Event Loop
17BOM 常见 API
18passive 与滚动性能
19动态 import 与按需加载
20从 URL 到页面展示

高频题详解

1. HTML5 语义化是什么？为什么要用？

题目： 请解释 HTML5 语义化，以及使用语义化标签的好处。

标准化面试答案模板：

  1. 一句话定义：用语义化标签表达页面结构与内容含义，而不是全部用无意义的 div/span 堆砌。
  2. 分点阐述好处：
    • 可访问性：读屏软件、键盘导航能更好理解页面结构。
    • SEO：爬虫更易识别标题、正文、导航等区块。
    • 可维护性：团队阅读 HTML 即可理解模块职责。
  3. 举例：header/nav/main/article/section/aside/footer 等与纯 div 的对比。
  4. 收尾：语义化是「结构与含义」的表达，不等于「不用 div」，无合适语义时仍可用 div 并配合 ARIA 等。

应用场景： 官网、文档站、内容型后台需要 SEO 与无障碍合规时，页面骨架优先用语义化标签搭建，再叠样式与交互。

2. localStorage、sessionStorage、Cookie 有何区别？

题目： 三者生命周期、作用域、容量、与服务端关系有何不同？各适合存什么？

标准化面试答案模板：

  1. 对比维度：生命周期、作用域（是否跟随标签页/子域）、容量量级、是否随请求自动携带、能否被 HttpOnly 保护等。
  2. localStorage：持久化、同源共享、一般不自动发给服务端；适合存前端偏好、草稿、非敏感配置。
  3. sessionStorage：关闭标签页即清除、同源但按「顶级窗口」隔离；适合表单多步、单次会话状态。
  4. Cookie：可设过期时间、可随请求携带、可 HttpOnly/SameSite；适合会话标识、需服务端读取的小型数据（敏感字段应 HttpOnly）。
  5. 收尾：敏感信息不要明文放 localStorage；大对象考虑 IndexedDB。

应用场景： 电商购物车「未登录本地暂存」用 localStorage；支付页敏感 token 用 Cookie + HttpOnly；多标签编辑同一表单隔离状态用 sessionStorage。

3. Flex 主轴、交叉轴是什么？常用属性怎么记？

题目： 说明 Flex 布局中主轴与交叉轴，以及 justify-content 与 align-items 分别作用于哪一轴。

标准化面试答案模板：

  1. 定义：Flex 容器内，主轴由 flex-direction 决定（默认横向），垂直于主轴的是交叉轴。
  2. 对齐：justify-content 控制主轴方向分布；align-items 控制交叉轴上单行对齐；多行用 align-content。
  3. 子项：flex: 1 常表示可伸缩占满剩余空间；gap 统一控制间距。
  4. 收尾：Flex 适合一维排列（一行或一列内的分布与对齐）。

应用场景： 顶部导航左右分布（space-between）、表单标签与输入垂直居中、移动端底部 Tab 均分宽度。

4. 什么时候用 Flex，什么时候用 Grid？

题目： Flex 与 CSS Grid 的典型使用场景分别是什么？

标准化面试答案模板：

  1. Flex：一维布局——单行或单列内的对齐、分布、换行；适合导航、工具条、列表行内排版。
  2. Grid：二维布局——同时控制行与列，适合整页分区、卡片矩阵、不规则区域划分。
  3. 组合：页面级可用 Grid 划大区，区内卡片用 Flex 排细节。
  4. 收尾：选型看主要是「一条线上的排版」还是「行列棋盘式排版」。

应用场景： 后台仪表盘多图表宫格用 Grid；表格行内操作按钮对齐用 Flex。

5. rem 与 rpx 是什么？如何做移动端适配？

题目： 解释 rem、rpx，以及常见 H5 移动端适配思路。

标准化面试答案模板：

  1. rem：相对根元素 html 的 font-size；通过 JS 或 vw 设置根字号，实现整体等比缩放。
  2. rpx：小程序等环境中的响应式像素，与屏幕宽度关联，设计稿宽度基准下换算。
  3. 适配思路：设计稿转 rem（或 postcss 插件）、安全区 env(safe-area-inset-*)、1px 边框问题等可顺带提一句。
  4. 收尾：rem 解决「整体比例」；具体项目还需限制最大宽度、横屏策略等。

应用场景： H5 活动页、移动官网按 375/750 设计稿还原；微信小程序用 rpx 做多端一致布局。

6. let、const 与 var 的区别？

题目： 说明块级作用域、变量提升、重复声明、以及 const 对对象的限制。

标准化面试答案模板：

  1. var：函数作用域或全局；存在提升；可重复声明。
  2. let/const：块级作用域；存在暂时性死区（TDZ），声明前访问会报错；同一作用域不可重复声明。
  3. const：绑定不可重新赋值；对象/数组可修改内部属性，引用不变。
  4. 收尾：默认用 const，需重新赋值再用 let，避免 var。

应用场景： 循环内异步回调用 let 保存正确索引；配置对象用 const 防止误替换引用。

7. Promise 的三种状态？链式调用传参要注意什么？

题目： Promise 状态如何流转？then 链上返回普通值与返回 Promise 有何不同？

标准化面试答案模板：

  1. 三态：pending → fulfilled 或 rejected；状态不可逆。
  2. 链式：then 返回新 Promise；返回普通值会包装成 resolved；返回 Promise 则「穿透」等待其结果。
  3. 错误：reject 或抛错会跳到最近的 catch；finally 不接收上一阶段值，但若抛错仍会传递。
  4. 收尾：Promise.all 并发全成功、race 竞速等可一句带过。

应用场景： 请求依赖顺序（先登录再拉用户信息）；多个接口并行用 Promise.all 聚合后再渲染。

8. async/await 和 Promise 相比？优缺点？并发时注意什么？

题目： async/await 本质是什么？错误怎么处理？多个 await 如何并发？

标准化面试答案模板：

  1. 本质：async 函数返回 Promise；await 暂停当前 async 函数，等待 Promise 结果。
  2. 优点：同步写法读流程更清晰；缺点：不注意会写成串行，性能差。
  3. 错误：用 try/catch 包裹 await，或 .catch() 在返回的 Promise 上。
  4. 并发：Promise.all([p1, p2]) 再 await，不要连续写多个 await 若它们彼此独立。

应用场景： 页面初始化并行拉用户信息、配置、权限；表单提交串行校验通过后 await 提交接口。

9. ES Module 和 CommonJS 有什么区别？

题目： import/export 与 require/module.exports 在加载时机、导出值、this 等方面有何不同？

标准化面试答案模板：

  1. ESM：静态结构，编译时可分析依赖；import 提升；导出是只读绑定（live binding）；浏览器原生支持（type="module"）。
  2. CJS：require 运行时加载；导出是值的拷贝（对基本类型）；Node 传统模块。
  3. 互操作：Node 中混用需注意扩展名与 createRequire 等。
  4. 收尾：前端工程与 Tree-shaking 更偏向 ESM。

应用场景： 业务代码用 ESM 便于 Tree-shaking；Node 老工具库仍为 CJS，打包器做互转。

10. 什么是闭包？使用场景和可能的问题？

题目： 解释闭包，并说明常见用途与注意事项。

标准化面试答案模板：

  1. 定义：函数与其词法环境组合；内部函数引用外部函数的变量，外部函数执行结束后变量仍可能被保留。
  2. 用途：私有化变量、柯里化、防抖节流、缓存计算结果。
  3. 风险：过度持有大对象引用可能导致内存占用；循环中误用 var 导致经典异步题错误（对比 let）。
  4. 收尾：闭包是能力，需注意生命周期与引用范围。

应用场景： 封装组件内只暴露方法的模块；防抖搜索；React 中 useCallback 闭包与过时状态问题（可延伸）。

11. 什么是原型链？instanceof 如何判断？

题目： 描述原型链查找过程；instanceof 原理是什么？

标准化面试答案模板：

  1. 原型：每个对象有 __proto__（规范中可用 Object.getPrototypeOf）；函数有 prototype。
  2. 链：属性查找沿 __proto__ 向上直到 null。
  3. instanceof：判断构造函数的 prototype 是否出现在实例的原型链上（可手动遍历模拟）。
  4. 收尾：class 语法糖背后仍是原型继承。

应用场景： 判断自定义类型、实现简单继承；读第三方库时理解实例方法来自原型还是自身。

12. 什么是跨域？CORS 是怎么工作的？

题目： 同源策略是什么？跨域时浏览器做了什么？CORS 简单请求与预检请求区别？

标准化面试答案模板：

  1. 同源：协议、域名、端口一致；否则为跨域。
  2. 限制：默认 JS 不能读跨域响应（XHR/fetch）；资源嵌入如图片、script 规则不同。
  3. CORS：服务端通过 Access-Control-Allow-Origin 等响应头授权；非简单请求先发 OPTIONS 预检。
  4. 其他方案：开发代理、Nginx 反向代理、JSONP（仅 GET、老方案）。
  5. 收尾：跨域是浏览器行为，服务端配合头或同域代理解决。

应用场景： 前后端分离，前端域名与 API 域名不同，由后端配置 CORS 或网关统一加头；本地开发用 devServer 代理。

13. 事件冒泡、捕获区别？如何阻止冒泡与默认行为？

题目： DOM 事件流的三个阶段？stopPropagation 与 preventDefault 区别？

标准化面试答案模板：

  1. 三阶段：捕获（从 window 到目标）→ 目标阶段 → 冒泡（从目标到 window）。
  2. 监听：addEventListener 第三个参数 true 为捕获，false 或不写为冒泡。
  3. 阻止：stopPropagation 停止传播；preventDefault 阻止默认动作（如链接跳转、表单提交）。
  4. 收尾：同一元素可同时注册捕获与冒泡，按顺序执行。

应用场景： 弹层点击遮罩关闭、内部点击不关闭需阻止冒泡；表单校验失败 preventDefault 阻止提交。

14. 什么是事件委托？有什么好处？

题目： 事件委托原理是什么？为什么适合动态列表？

标准化面试答案模板：

  1. 原理：把子元素事件监听绑在共同祖先上，利用冒泡，在回调里用 event.target 判断真实来源。
  2. 好处：减少监听器数量、动态增删子节点无需重新绑定、内存更友好。
  3. 注意：不冒泡的事件（如部分媒体事件）不适用；需处理 target 与当前节点匹配逻辑。
  4. 收尾：与 React 合成事件、根上委托的思想一致（可点到为止）。

应用场景： 长列表每一行操作按钮、表格多行动态渲染；无限滚动加载的新节点无需单独绑事件。

15. DOM 操作有哪些优化手段？

题目： 大量 DOM 插入或频繁更新时如何减少重排重绘与卡顿？

标准化面试答案模板：

  1. 批量操作：DocumentFragment、字符串拼接后一次 innerHTML（注意 XSS）、离线克隆再替换。
  2. 减少读写交错：先读后写，避免强制同步布局（layout thrashing）。
  3. 虚拟列表：只渲染视口内节点。
  4. CSS：用 transform/opacity 做动画利于合成层；避免频繁改会触发布局的属性。
  5. 收尾：配合 requestAnimationFrame 做视觉更新节奏。

应用场景： 聊天窗口上万条消息、大数据表格编辑、可视化画布频繁更新节点。

16. 宏任务、微任务是什么？经典输出顺序题怎么分析？

题目： 说出宏任务、微任务例子；setTimeout 与 Promise.then 谁先执行？

标准化面试答案模板：

  1. 调用栈：同步代码先执行完。
  2. 微任务：Promise.then、queueMicrotask、MutationObserver 等；每个宏任务结束后清空微任务队列。
  3. 宏任务：setTimeout、setInterval、I/O、script 整体等；按队列逐个执行，中间穿插微任务清空。
  4. 分析步骤：同步 → 微任务全部 → 下一个宏任务 → 再微任务……
  5. 收尾：async 中 await 后续相当于微任务（可细化表述）。

应用场景： 理解 Vue/React nextTick、保证 DOM 更新后再读布局；避免在微任务里无限递归阻塞。

17. BOM 里常见 API？路由与历史相关？

题目： 列举 BOM 对象；如何实现前端路由跳转与历史前进后退？

标准化面试答案模板：

  1. BOM：window、location、history、navigator、screen 等，操作浏览器窗口与导航。
  2. 跳转：location.href / assign / replace；window.open 新开页。
  3. 历史：history.pushState / replaceState + popstate 事件，实现 SPA 路由（配合前端路由库）。
  4. 收尾：与 DOM 操作文档内容不同，BOM 面向浏览器环境与导航。

应用场景： SPA 路由切换无刷新；检测 navigator.userAgent 做移动端跳转；获取 screen 尺寸做适配（较少用）。

18. passive 事件监听器是做什么的？

题目： addEventListener 的 { passive: true } 有什么作用？

标准化面试答案模板：

  1. 含义：告诉浏览器监听器不会调用 preventDefault()（尤其是 touchstart/wheel）。
  2. 效果：浏览器可立即滚动，不必等待 JS 执行完再决定，减少滚动卡顿。
  3. 注意：若确实要 preventDefault，不要设 passive true，否则无效或报错（视浏览器）。
  4. 收尾：现代浏览器对文档级 wheel/touch 常默认 passive，需知其行为。

应用场景： 长列表移动端滚动性能优化；自定义轮播与浏览器默认滚动冲突时的取舍。

19. 动态 import 适合什么场景？

题目： import() 与静态 import 有何不同？

标准化面试答案模板：

  1. 区别：import() 返回 Promise，运行时按需加载模块；静态 import 在模块图初始化时加载。
  2. 场景：路由级代码分割、低概率功能（管理后台子模块）、减小首包体积。
  3. 收尾：打包工具会拆成单独 chunk，配合懒加载组件。

应用场景： 后台系统「报表、大屏」子页首次进入再加载；图表库、编辑器重依赖按需引入。

20. 从输入 URL 到页面展示，浏览器大致做了什么？

题目： 简述网络请求、解析、渲染主流程。

标准化面试答案模板：

  1. 导航：DNS 解析、TCP/TLS 连接、HTTP 请求响应。
  2. 解析 HTML：构建 DOM；遇 link/script 可能阻塞或异步/defer。
  3. 解析 CSS：构建 CSSOM；与 DOM 合成 渲染树。
  4. 布局（Layout）：计算几何信息；绘制（Paint）；合成（Composite） 分层。
  5. JS：可能修改 DOM/CSSOM，触发重排重绘；注意与渲染线程关系。
  6. 收尾：可提「关键渲染路径」优化：压缩资源、减少阻塞、优先级。

应用场景： 首屏优化（SSR、预加载、资源拆分）、排查白屏与 FCP/LCP 问题时的理论依据。

附：知识提纲（速查）

HTML

  • HTML5 语义化标签；localStorage / sessionStorage / Cookie

CSS

  • Flex / Grid；rem、rpx 与移动端适配

JavaScript（ES6+）

  • let / const；Promise；async/await；模块化；闭包；原型链

浏览器与运行时

  • 跨域与 CORS；事件冒泡/捕获与委托；DOM/BOM；宏任务/微任务与 Event Loop
avatar
文章
阅读
粉丝