25年，前端面试背八股文意义已经不大了，别再死磕了，现在前端面试都问这些......

前端面试清酒老师
0 阅读11分钟

在2025年的前端面试中，传统的"八股文"问题已逐渐被贴近实际业务场景的开放性问题所取代。企业更注重考察候选人的技术深度、解决问题的思路以及对业务的理解能力。本文将系统梳理2025年前端面试中最热门的场景题，从性能优化到架构设计，从工程化到前沿技术应用，帮助你全面准备面试。

本文将深入剖析2025年最典型的 160+ 前端面试场景题，每道问题不仅提供解决方案，更会揭示面试官的考察意图和回答策略。当你理解这些场景背后的技术本质时，你会发现：面试场景与实际工作场景的边界正在消失，准备面试的过程，就是成为更好的工程师的过程。

篇幅原因，只展示一部分，有需要的看文末

2025前端面试最新最全场景题库

1.如何判断用户设备

使用用户代理字符串(User-Agent)

用户代理字符串包含了浏览器类型、版本、操作系统等信息，可以通过分析这些信息来大致判断用户的设备类型。navigator . userAgent 属性用于获取用户代理字符串。

function detectDevice() {const userAgent = navigator.userAgent;
if (/mobile/i.test(userAgent)){return "Mobile";
}if (/tablet/i.test(userAgent)) {return "Tablet";
}if (/iPad|iPhone|iPod/.test(userAgent) & Iwindow.MSStream) {return "ioS
Device";
}// Android，Windows Phone，BlackBerry 识别可以类似添加return "Desktop"；
}
console.log(detectDevice();

使用视口尺寸

有时候用户代理字符串可能不够准确或被修改，此时可以根据视口尺寸作为补充手段。通过检测屏幕的宽度，你可以推断出设备的大致类别。

function detectDeviceByviewport() {const width = window.innerwidth;
if (width < 768) {return "Mobile";
}if (width >= 768 && width < 992) {return "Tablet";
}return "Desktop";
}
console.log(detectDeviceByViewport());

使用 CSS 媒体查询

虽然CSS媒体查询主要用于响应式设计，但你也可以在JavaScript中使用window. matchMedia(）方法来判断设备类型。这提供了一种基于CSS 媒体查询语法来检测设备/视口特性的方式。

function detectDeviceByMediaQueryO) {1f (window.matchMedia(" (max-width:
767px)").matches) {return "Mobile";
} else if (window.matchMedia("(min-width: 768px) and (max-width:
991px)").matches) {return "Tablet";
}else {return "Desktop";
}
}
console.log(detectDeviceByMediaQueryO)；

注意

· 用户代理字符串被视为不可靠：由于用户代理字符串可以被修改，某些情况下可能不能准确反映用户的设备信息。

· 响应式设计原则：在进行设备检测时，最佳实践是根据内容和功能的需要来适应不同设备，而不是针对特定设备进行优化或限制。

综上，设备检测方法多种多样，选择合适的方法取决于你的具体需求和场景。在可能的情况下，优先考虑使用响应式设计原则，来创建能够在不同设备上良好工作的网页。

2.将多次提交压缩成一次提交

将多次提交压缩成一次提交在Git中被称为“squash”。这通常在你完成一段工作后，想要将这段时间内的多个提交整理为一个更干净、更整洁的提交记录时使用。Git提供了几种方法来实现提交的压缩，最常用的是通过git rebase 命令配合交互模式(interactive mode)来实现。

使用gitrebase-i进行交互式压缩

假设你想压缩最近的N次提交。首先，你需要确定从哪个提交开始进行操作。可以通过 g1t1og 查看提交历史，然后选择你想要压缩的提交的前一个提交作为起点。

启动交互式 rebase 会话:

git rebase -i HEAD-N

  1. 其中 N 是你想要压缩的提交数量。例如，如果你想要压缩最近的3次提交，你应该使用 gitrebase -1 HEAD~3。

  2. 编辑 rebase 会话中出现的命令列表：

  3. 执行上述命令后，你的默认文本编辑器会打开一个带有待压缩提交列表的文件。这些提交被列出来，前面默认是 pick 命令。

pick e3a1b35 第一次提交的消息
p1ck 7ac9a67 第二次提交的消息
pick 1d2a3f4 第三次提交的消息
  1. 将除了第一个提交之外的所有pick命令改为squash或简写s，表示这些提交将被压缩到前一个提交中。
pick e3a1b35 第一次提交的消息
squash 7ac9a67 第二次提交的消息
squash 1d2a3f4 第三次提交的消息

  1. 保存并退出编辑器：

  2. 一旦保存并关闭编辑器，Git将开始rebase过程，并可能会要求你解决任何合并冲突。然后，它会打开你的文本编辑器，让你编辑最终的提交消息。默认情况下，这会包含你压缩的所有原始提交消息。

  3. 完成 rebase 过程:

4.解决完所有冲突（如果有的话）并保存你的最终提交消息之后，你可以完成rebase过程。

5.推送更改到远端仓库（如果需要）：

6.如果你已经将提交推送到了远端仓库，你可能需要使用--force参数来强制推送更改，但请注意，这可以覆盖远端仓库的历史，因此仅在确保不会影响他人工作的情况下使用。

git push origin your-branch-name --force

3.介绍下navigator.sendBeacon方法

navigator.sendBeacon(）方法使得网页可以异步地将数据发送到服务器，与页面的卸载过程同时进行，这一点非常重要，因为它允许在不影响用户体验的情况下，安全地结束会话或者发送统计数据。这方法主要用于追踪和诊断信息，特别是在需要确保数据被成功发送到服务器的场景中——比如记录用户在网页上的行为数据。

基本语法

navigator.sendBeacon(url, data);

● url：一个字符串，代表您想要发送数据到的服务器地址。

● data：可选参数，要发送的数据。可以是 ArrayBufferView 、BLob、DOMString 、或者 FormData 对象。

返回值

●该方法返回一个布尔值：如果浏览器成功地将请求入队进行发送，则返回true；如果请求因任何原因未能入队，则返回 false。

特点

  1. 异步：sendBeacon（）发送的请求是异步的，不会阻塞页面卸载过程或者延迟用户浏览器的关 闭操作。

  2. 小数据量：适用于发送少量数据，如统计信息和会话结束信号。

3.不影响关闭：它允许在页面卸载或关闭时发送数据，而不会阻止或延迟页面的卸载过程。

  1. 可靠：它确保数据能够在页面退出时被送出，相较于 beforeunload 或 unload 事件中使用同步的 XMLHttpRequest 更为可靠。

使用示例

发送一些统计数据到服务器的简单示例:

window.addEventListener("unload", function () {var data = { action: "leave"，
timestamp: Date.now() };
navigator.sendBeacon("https://example.com/analytics", JsoN.stringify(data));
})；

在上面的例子中，当用户离开页面时，我们监听unload事件，并在该事件触发时使用navigator. sendBeacon（）方法发送一些统计数据到服务器。使用JSON.stringify(data)将数据对象转换成字符串形式，因为 sendBeacon需要发送的数据必须是文本或二进制形式。

兼容性与限制

● 虽然navigator.sendBeacon（）被现代浏览器广泛支持，但在使用前最好检查浏览器兼容性

● 发送数据量有限制，一般适用于发送小量的数据。

● 某些浏览器实现可能有细微差异，建议在实际使用前进行充分测试。

通过使用navigator . sendBeacon()，开发者可以确保在页面卸载过程中，重要的数据能够被可靠地发送到服务器，从而改善数据收集的准确性和用户体验。

4.混动跟随导航（电梯导航）该如何实现

5.退出浏览器之前，发送积压的埋点数据请求，该如何做？

6.如何统计页面的long task(长任务)

7.PerfoemanceObserver如何测量页面性能

8.移动端如何实现下拉滚动加载（顶部加载）

9.判断页签是否为活跃状态

10.在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？

11.大文件切片上传的时候，确定切片数量的时候，有那些考量因素

12.页面关闭时执行方法，该如何做

13.如何统计用户pv访问的发起请求数量

14.长文本溢出，展开/收起如何实现

15.如何实现鼠标拖拽

16.统计全站每一个静态资源加载耗时，该如何做

17.防止前端页面重复请求

18.ResizeObserver作用是什么

19.要实时统计用户浏览器窗口大小，该如何做

20.当项目报错，你想定位是哪个commit引l入的错误的时，该怎么做

21.如何移除一个指定的commit

22.如何还原用户操作流程

23.可有办法将请求的调用源码地址包括代码行数也上报上去？

24.请求失败会弹出一个toast,如何保证批量请求失败，只弹出一个 toast

25.如何减少项目里面if-else

26.babel-runtime作用是啥

27.如何实现预览PDF文件

28.如何在划词选择的文本上添加右键菜单（划词：标滑动选择一组字符，对组字符进行操作

29.富文本里面，是如何做到划词的(鼠标滑动选择一组字符，对组字符进行操作？

30.如何做好前端监控方案

31.如何标准化处理线上用户反馈的问题

32.px 如何转为rem

33.浏览器有同源策略，但是为何cdn请求资源的时候不会有跨域限制

35.axios是否可以取消请求

36.前端如何实现折叠面板效果？

37.dom里面，如何判定a元素是否是b元素的子元素

38.判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定？

39.is如何判空？【空】包含了：空数组、空对象、空字符串、0、undefined、null.空 map. 空 set,都属于为空的数据

40.css实现翻牌效果

41.flex:1代表什么

42.一般是怎么做代码重构的

43.如何清理源码里面没有被应用的代码，主要是JS、TS.CSS代码

44.前端应用如何做国际化？

45.应用如何做应用灰度发布

46.「微前端]为何通常在微前端应用隔离，不选择iframe方案

47.[微前端]Qiankun是如何做JS隔离的

48.[微前端]微前端架构一般是如何做JavaScript隔离

49.[React]循环渲染中为什么推荐不用index做key

50.[React]如何避免使用context的时候，引起整个挂载节点树的重新渲染

51.前端如何实现截图？

52.当QPS达到峰值时，该如何处理？

53.js 超过Number 最大值的数怎么处理？

54.使用同一个链接，如何实现PC打开是web应用、手机打开是一个H5应用？

55.如何保证用户的使用体验

56.如何解决页面请求接口大规模并发问题

57.设计一套全站请求耗时统计工具

58.大文件上传了解多少

59.H5如何解决移动端适配问题

60.站点一键换肤的实现方式有哪些？

61.如何实现网页加载进度条？

62.常见图片懒加载方式有哪些？

63.cookie构成部分有哪些

64.扫码登录实现方式

65.DNS 协议了解多少

66.函数式编程了解多少？

67.前端水印了解多少？

68.什么是领域模型

69.一直在window上面挂东西是否有什么风险

70.深度SEO优化的方式有哪些，从技术层面来说

71.小程序为什么会有两个线程

72.web应用中如何对静态资源加载失败的场景做降级处理

................................................................. 简约咖色小红书配图__2025-05-09+15_45_38.jpg

简约咖色小红书配图__2025-05-09+15_47_01.jpg

简约咖色小红书配图__2025-05-09+15_48_29.jpg

简约咖色小红书配图__2025-05-09+15_50_32.jpg

image.png

最后，请记住2025年最打动面试官的三个特质：量化思维（能用Lighthouse分数说明优化效果）、技术同理心（理解不同方案对团队协作的影响）和持续好奇（对Tauri、Bun等新兴技术保持探索）。前端开发的疆界正在急速扩展，而场景题正是你展现实力的最佳舞台。当你能从容应对这些挑战时，你收获的不仅是一份offer，更是面向未来五年的核心竞争力。

完整点此

avatar
文章
阅读
粉丝