STUDY / FE下载 Markdown

FRONTEND / INTERVIEW NOTES

前端面试题清单

290道题 · 25 个主题

01 / 25

高频手写精选

13 题
  1. 实现 Promise.all
  2. JSON2DOM = react的render函数
  3. 树形结构转成列表
  4. 列表转成树形结构
  5. Array.prototype.flat
  6. instanceof
  7. call apply bind
  8. Array.prototype.map
  9. 用正则实现模板字符串
  10. lodash.get
  11. 深拷贝
  12. 寄生组合式继承
  13. 发布订阅者模式
02 / 25

实现 Promise （hot）

7 题
  1. 完整实现Promise A+
  2. 实现Promise.prototype.finally
  3. 实现Promise.allSettled
  4. 实现 Promise.race
  5. 实现 Promise.prototype.catch
  6. Promise.resolve
  7. Promise.reject
03 / 25

Promise 周边场景题（hot）

31 题
  1. 交通灯
  2. 封装异步的fetch，使用async await方式来使用
  3. repeat(console.log, 5, 1000)
  4. 封装一个工具函数输入一个promiseA返回一个promiseB如果超过1s没返回则抛出异常如果正常则输出正确的值
  5. 请求5s未完成就终止
  6. 实现一个sleep函数
  7. js每隔一秒打印1,2,3,4,5
  8. 使用 setTimeout 实现 setInterval
  9. promise实现图片异步加载
  10. 使用Promise封装AJAX请求
  11. 我们能反过来使用 setinterval 模拟实现 settimeout 吗？
  12. 异步任务：依次发送3次网络请求，拿到服务器数据
  13. 实现网络请求超时判断，超过三秒视为超时
  14. promise中断请求
  15. 给定一系列的api，测量上传速度（实现的时候用的GET请求）并选择一个加载时间最短的api
  16. settimeout系统补偿时间
  17. setTimeout准时
  18. 并发多个请求，返回先得到response的。函数输入为url数组，输出为第一个返回的response的结果
  19. JS异步数据流，实现并发异步请求，结果顺序输出
  20. Promise串行
  21. 处理高并发, 100 条数据，带宽为 10， 跑满带宽
  22. 设计一个简单的任务队列, 要求分别在 1,3,4 秒后打印出 "1", "2", "3"；
  23. 实现有并行限制的 Promise 调度器
  24. 实现 Scheduler
  25. 有并发限制的Promise.all(ts类型)
  26. 实现 如果上一次的没请求完，之后的就无响应
  27. 使用 Promise 实现每隔三秒输出时间
  28. 使用 Promise 改写回调地狱
  29. 设计一个函数，该函数的参数为可同时发送请求的大小，返回一个函数，该函数的参数为要请求的url。 实现的效果为，同时发送n个请求，当有请求返回后往请求队列里push新的请求，并输出刚刚结束的请求的返回值
  30. Promise.retry 超时重新请求，并在重试一定次数依然失败时输出缓存内容
  31. 写一个 mySetInterVal(fn, a, b)，每次间隔 a,a+b,a+2b 的时间，然后写一个 myClear，停止上面的 mySetInterVal
04 / 25

JavaScript 常考手写题

77 题
  1. 产生一个不重复的随机数组
  2. await async 如何实现
  3. 使用递归完成 1 到 100 的累加
  4. 打印出 1~10000 以内的对称数
  5. 实现一个字符串匹配算法indexOf
  6. 请实现一个模块 math，支持链式调用math.add(2,4).minus(3).times(2);
  7. 手写用 ES6proxy 如何实现 arr[-1] 的访问（滴滴2020）
  8. 有一堆整数，请把他们分成三份，确保每一份和尽量相等（11，42，23，4，5，6 4 5 6 11 23 42 56 78 90）
  9. 之字形打印矩阵
  10. 数组中的最大值
  11. 用尾递归实现斐波那契数列
  12. 实现简单路由
  13. 封装一个localstorage的setItem和getItem方法
  14. 1-1000回文数
  15. 随机生成字符串
  16. 判断一个字符串是否为驼峰字符串， judge('ByteDance','BD') -> true judge('Bytedance','BD') -> false
  17. 压缩字符串
  18. Map场景题
  19. 输入50a6we8y20x 输出50个a，6个we，8个y，20个x
  20. 手写defineProperty
  21. String string 值一样返回true Object Object 返回true function function 都是声明的一个新的变量 返回false
  22. 对输入的字符串：去除其中的字符'b'；去除相邻的'a'和'c'
  23. 用一行代码，将数组中的字符串和字符串对象(new String(123))直接判定出来
  24. before
  25. 实现一下 console.log
  26. 实现(5).add(3).minus(2)功能
  27. 将十进制数字转为二进制数字字符串
  28. 封装remove child.remove()销毁自身
  29. 字符串中字母的出现次数
  30. 输出一个等腰三角形
  31. 实现一个函数a，使其奇数次调用时返回1，偶数次调用时返回2（不能使用全局变量）
  32. 求 最接近的值
  33. 不用循环求和
  34. 连续赋值操作
  35. 输入一串字符串，根据字符串求出每个字母的数量并返回结果对象。（数字为1时可省略
  36. 创建包含10个1的数组 多种方法
  37. ['zm', 'za', 'b', 'lm', 'ln', 'k']
  38. ["0->2", "4->5", "7", "13", "15->16"]
  39. ['ab', 'c', 'ab', 'd', 'c'] => ['ab1', 'c1' ,'ab2', 'd', 'c2']
  40. 移除空属性
  41. 判断两个对象是否相等
  42. 一个数组，找出每个数组元素右侧第一个比当前数大的数的下标，时间复杂度O(N)
  43. 寻找出现次数最多的三个标签
  44. 素数
  45. 实现日期格式化函数
  46. 实现 jsonp
  47. URL反转
  48. 解析 URL Params 为对象
  49. 调用计数器（支持重置）
  50. 颜色生成
  51. JavaScript怎么清空数组
  52. 判断A、B数组的包含关系（值和数量），A属于B返回1，B属于A返回2，两者相等返回0，其他返回-1
  53. 对象的合并
  54. 实现一个可无限延伸的数组
  55. 多行字符串转二维数组
  56. 请实现一个通用的Array解构赋值
  57. 数组合并
  58. 数组交集，并集，差集
  59. 多维数组全排列
  60. 判断对象是否存在循环引用
  61. 找出数组中最小的 k 个数，并保持它们在原数组中的相对顺序
  62. 逆对象扁平
  63. 对象扁平化
  64. 实现 执行一次的函数
  65. 链式调用
  66. 偏函数
  67. 实现管道函数
  68. 手写事件代理（委托）
  69. 数据类型判断
  70. 类数组转数组
  71. 预加载
  72. 图片懒加载
  73. 数组去重
  74. 防抖 节流
  75. 函数组合 compose redux-saga koa 洋葱模型
  76. sum(x,y)和sum(x)(y)
  77. curry柯里化
05 / 25

设计模式相关

1 题
  1. 观察者模式
06 / 25

树-场景题（hot）

9 题
  1. DOM2JSON
  2. 计算目录树的深度
  3. 树形结构获取路径名
  4. 对象树遍历
  5. 获取树对象属性
  6. 查找json中的children路径
  7. 对象字符串转化成树形结构
  8. 判断有无符合路径和 -> 打印所有路径
  9. 获取树结构中的name：getName
07 / 25

实现 JS 原生方法

20 题
  1. Array.prototype.forEach
  2. Array.prototype.filter
  3. Array.prototype.reduce
  4. Array.prototype.fill
  5. Array.prototype.includes
  6. Array.prototype.push
  7. Array.prototype.unshift
  8. Array.prototype.copy
  9. Array.prototype.getLevel
  10. 实现es6的set集合
  11. 实现es6的map集合
  12. String.prototype.zpadStart
  13. Object.assign
  14. Object.is
  15. JSON.stringify
  16. JSON.parse
  17. trim
  18. 实现new
  19. String.prototype.repeat
  20. String.prototype.includes
08 / 25

JS 库函数实现

1 题
  1. lodash.chunk
09 / 25

JS 工具函数

1 题
  1. 判断一个对象是否是isPlainObject
10 / 25

手写 nodejs 模块

1 题
  1. promisify
11 / 25

正则相关

9 题
  1. 正则判断手机号，qq，颜色，邮箱
  2. 字符串的大小写取反
  3. 检验字符串首尾是否含有数字
  4. 去除字符串空格
  5. 去除字符串中的字母
  6. 正则 驼峰转换
  7. 对象key的驼峰转下划线
  8. 判断字符串中是否存在连续的三个数
  9. ((2+3)+(3*4))+2---->['(2 + 3)+(3 * 4)', '2 + 3', '3 * 4']
12 / 25

排序算法

10 题
  1. 冒泡排序
  2. 选择排序
  3. 快速排序
  4. 插入排序
  5. 归并排序
  6. 基数排序
  7. 计数排序
  8. 希尔排序
  9. 桶排序
  10. 堆排序
13 / 25

自定义 Hooks 手写题

7 题
  1. Hooks怎么封装手势逻辑
  2. Hooks实现移动端的滑动轮播插件
  3. 如何用 Hooks 模拟 componentDidMount 与componentWillUnmount
  4. 实现一个useBodyScrollLock ，当出现弹窗时 阻止背景滚动
  5. ts 实现 hooks: useInterval
  6. 实现 useQuery
  7. 实现useRequest
14 / 25

组件设计题（Vue/React/JS均可）

13 题
  1. 全选
  2. 轮播图
  3. 根据response渲染table
  4. 歌词滚动功能(hot)
  5. 实现一个 百度搜索框 （搜索提示）
  6. 实现todos
  7. 计时器或倒计时组件
  8. 设计一个公会入驻信息提交页
  9. 编码实现宽高不相同图片的自适配排列
  10. 列表子元素顺序反转
  11. 遍历树组件
  12. 选项卡
  13. 拖拽
15 / 25

HTML CSS 手写题

1 题
  1. 实现圆形环状进度条
16 / 25

JavaScript 与浏览器原理

10 题
  1. 事件循环中，宏任务、微任务和浏览器绘制的执行顺序是什么？
  2. 持续追加微任务为什么会让页面无法响应输入？如何处理长任务？
  3. 闭包如何形成？在实际项目中怎样排查闭包导致的内存占用？
  4. 原型链、class 和继承之间是什么关系？
  5. 箭头函数与普通函数的 this、arguments 和构造行为有何不同？
  6. ESM 与 CommonJS 的加载、导出和循环依赖行为有何区别？
  7. 浏览器从输入 URL 到页面可交互，经历了哪些关键步骤？
  8. 浏览器如何构建 DOM/CSSOM，并完成布局、绘制与合成？
  9. 如何用 DevTools 定位内存泄漏、长任务和频繁重排？
  10. localStorage、sessionStorage、IndexedDB 和 Cookie 应如何选择？
17 / 25

TypeScript

8 题
  1. any、unknown 和 never 分别适用于什么场景？
  2. 如何用类型守卫和判别联合安全地收窄联合类型？
  3. 如何用 never 检查联合类型的分支是否穷尽？
  4. 泛型约束、条件类型和 infer 如何用于设计可复用 API？
  5. 实现 Partial、Pick、Omit、ReturnType 和 Awaited 中任意两个工具类型。
  6. interface 与 type 在扩展和声明合并方面有何区别？
  7. 如何为异步请求建模成功、加载、失败三种状态，避免非法状态？
  8. 为什么 Vite 能转换 TypeScript，却仍需要单独执行类型检查？
18 / 25

HTML、CSS 与无障碍

8 题
  1. Flexbox 与 Grid 分别适合哪些布局？实现响应式卡片网格。
  2. BFC 是什么？它如何影响外边距折叠和浮动？
  3. 如何避免字体、图片和异步内容造成布局偏移？
  4. 如何实现暗色模式，并兼顾系统偏好与用户手动选择？
  5. 如何让弹窗具备正确的焦点管理、键盘操作和语义？
  6. 何时使用原生 HTML 元素，何时才需要 ARIA 属性？
  7. 如何验证表单错误提示对键盘用户和屏幕阅读器可用？
  8. 如何实现宽屏到移动端的自适应布局，而不依赖固定设备宽度？
19 / 25

网络、缓存与安全

10 题
  1. HTTP 强缓存与协商缓存如何配合？Cache-Control 和 ETag 分别解决什么问题？
  2. CORS 为什么由浏览器执行？预检请求在什么情况下出现？
  3. 从 DNS、TCP/TLS 到 HTTP 响应，HTTPS 请求的关键步骤是什么？
  4. HTTP/2 与 HTTP/3 对前端资源加载有什么影响？
  5. SSE、WebSocket 与普通 HTTP 请求应如何选择？
  6. 如何实现 Token 刷新时的并发去重和失败请求重放？
  7. 如何防止 XSS？为何只设置 CSP 仍不够？
  8. Cookie 的 HttpOnly、Secure 和 SameSite 分别解决什么问题？
  9. CSRF 的触发条件是什么？前后端如何配合防护？
  10. 如何设计上传大文件的分片、断点续传、校验和重试？
20 / 25

React 与 React 19

11 题
  1. React 的 render 与 commit 阶段分别做什么？状态更新何时触发重新渲染？
  2. 列表 key 为什么必须稳定？错误的 key 会造成什么问题？
  3. useEffect 的依赖、清理和闭包过期问题如何排查？
  4. useMemo、useCallback 和 React.memo 在什么条件下才有收益？
  5. useTransition 与 useDeferredValue 分别适合什么交互？
  6. 如何在 React 中处理表单提交的 pending、错误和乐观更新？
  7. useActionState、useFormStatus 和 useOptimistic 各承担什么职责？
  8. React 中何时使用 useState、Context 或外部状态库？
  9. 如何定位大型 React 应用的无效渲染并量化优化效果？
  10. 如何设计一个支持取消、竞态处理和错误状态的异步数据 Hook？
  11. React Compiler 的自动记忆化与手动 useMemo、useCallback 有什么关系？如何验证它是否生效？
21 / 25

Vue 3

8 题
  1. Vue 3 的 reactive 和 ref 如何跟踪依赖并触发更新？
  2. computed、watch 和 watchEffect 的使用场景及执行时机有何不同？
  3. Vue 组件之间如何选择 props、emit、provide/inject 和 Pinia？
  4. v-model 在原生表单和自定义组件上分别如何工作？
  5. Vue 的 nextTick 解决了什么问题？什么时候不该依赖它？
  6. Vue 2 项目迁移 Vue 3 时，如何分阶段处理 API 与依赖兼容？
  7. 为什么解构 reactive 对象可能丢失响应性？如何修复？
  8. Vue 列表渲染中 key 的作用是什么？如何避免组件状态错位？
22 / 25

Next.js 与服务端渲染

8 题
  1. CSR、SSR、SSG 与按需重新生成页面分别适用于什么场景？
  2. Server Component 与 Client Component 的边界如何划分？
  3. Hydration mismatch 有哪些常见原因？如何定位和修复？
  4. 哪些数据可以在服务端读取，哪些交互必须留在客户端？
  5. 如何用 Suspense 和流式渲染改善慢数据页面的体验？
  6. 如何设计公开页面与个性化页面的缓存策略，避免数据串用？
  7. 如何让服务端渲染页面同时具备良好的 SEO 和可交互性？
  8. Next.js 的 Cache Components 与 use cache 如何划分静态、缓存和请求时数据？
23 / 25

性能、工程化与测试

10 题
  1. LCP、INP、CLS 各衡量什么？如何用真实用户数据定位问题？
  2. 首屏图片、字体与脚本分别如何优化，并如何验证收益？
  3. 长列表和聊天记录应如何虚拟化？动态高度会带来什么问题？
  4. Vite 开发服务器与生产构建的工作方式有何区别？
  5. Tree shaking 失效的常见原因是什么？如何检查打包体积？
  6. 如何为组件设计单元测试、交互测试和端到端测试的边界？
  7. 如何测试异步请求的加载、失败、取消和重复提交？
  8. Monorepo 中如何划分共享包、版本与依赖边界？
  9. 如何制定前端错误监控、Source Map 和发布回滚方案？
  10. 如何量化一次性能优化，避免只看本地 Lighthouse 分数？
24 / 25

AI 应用前端与流式交互

8 题
  1. 如何用 fetch、ReadableStream 和 TextDecoder 逐块解析模型流式响应？
  2. SSE 流断开、用户取消和网络重连时，界面状态如何恢复？
  3. 模型输出 Markdown 时，如何处理不完整片段和不可信内容？
  4. 聊天消息持续增长时，如何控制渲染成本和自动滚动行为？
  5. 如何避免旧请求的流式内容覆盖用户最新发起的会话？
  6. 工具调用或 Agent 运行较久时，如何展示进度、错误和可取消状态？
  7. 如何审查 AI 生成代码的正确性、安全性与可维护性？
  8. 你如何在实际项目中使用 AI 工具，并验证它产出的代码？
25 / 25

系统设计与项目深挖

8 题
  1. 如何设计一个高并发搜索建议框，并处理防抖、取消和结果乱序？
  2. 如何设计后台系统的路由、按钮和数据权限？前后端职责如何划分？
  3. 如何设计大型前端应用的组件边界和状态管理方案？
  4. 如何解释一次真实项目的性能瓶颈、改动、指标和取舍？
  5. 如何设计稳定的文件上传体验，包括进度、失败恢复和重复提交？
  6. 如何设计实时聊天页面的消息顺序、断线重连和历史分页？
  7. WebView 与原生页面通信时，如何设计 JS Bridge 的权限和错误处理？
  8. 当线上页面出现白屏时，你会如何定位、止损和复盘？