堪称2025年面试天花板的前端场景题面试真题汇总

前言

现如今，前端面试的本质就是场景题，把场景面试题背好，面试才有可能表现好。大家在考研和找工作中纠结的时候，不妨先看一下面试题！好工作都是早下手为强的，所以大家要早做准备！

1. 前端如何实现截图？

前端实现截图需要使⽤ HTML5 的 Canvas 和相关 API，具体步骤如下：

1. ⾸先在⻚⾯中创建⼀个 Canvas 元素，并设置其宽⾼和样式。

2. 使⽤ Canvas API 在 Canvas 上绘制需要截图的内容，⽐如⻚⾯的某个区域、某个元素、图⽚等。

3. 调⽤ Canvas API 中的 toDataURL() ⽅法将 Canvas 转化为 base64 编码的图⽚数据。

4. 将 base64 编码的图⽚数据传递给后端进⾏处理或者直接在前端进⾏显⽰。

以下是⼀个简单的例⼦，实现了对整个⻚⾯的截图：

这个例⼦中，在⻚⾯中创建了⼀个 canvas 元素，并设置其宽⾼和样式，将其放在⻚⾯最上⽅。在 点击“截图”按钮时，通过 toDataURL() ⽅法将整个⻚⾯的截图转换为 base64 编码的图⽚数据， 并打印到控制台上。

2. 当QPS达到峰值时, 该如何处理？

当QPS达到峰值时，可以从以下⼏个⽅⾯来进⾏优化：

1. 数据库优化：数据库的优化包括优化SQL语句、使⽤索引、避免全表扫描、分表分库等措施，以提 ⾼数据库的读写性能。

2. 缓存优化：缓存可以降低对数据库的访问频率，提⾼响应速度。可以使⽤Redis、Memcached等缓 存技术，减轻服务器负载。

3. 代码优化：优化代码可以提⾼代码的执⾏效率，减少不必要的开销。可以通过⼀些优化⼿段，如减 少不必要的代码执⾏、避免循环嵌套、避免不必要的递归调⽤等来提⾼代码的性能。

4. 负载均衡：负载均衡可以将请求分发到多个服务器上，减少单个服务器的负载，提⾼整个系统的性 能和可⽤性。

5. 异步处理：将⼀些计算量⼤、耗时⻓的操作异步处理，减少对主线程的阻塞，提⾼响应速度。

6. CDN加速：使⽤CDN技术可以将静态资源缓存到CDN节点上，提⾼资源的加载速度，减少服务器的 负载。

7. 硬件升级：可以通过升级服务器硬件，增加带宽等⽅式来提⾼系统的处理能⼒。 以上是⼀些常⻅的优化⼿段，需要根据具体情况进⾏选择和实施。

3. js 超过 Number 最⼤值的数怎么处理？

在 JavaScript 中，超过 Number.MAX_VALUE 的数值被认为是 Infinity （正⽆穷⼤）。如果要 处理超过 Number.MAX_VALUE 的数值，可以使⽤第三⽅的 JavaScript 库，如 big.js 或 bignumber.js ，这些库可以处理任意精度的数值。

例如，使⽤ big.js 库可以将两个超过 Number.MAX_VALUE 的数相加：

这⾥创建了两个 big.js 对象 x 和 y ，分别存储超过 Number.MAX_VALUE 的数值。通过 plus ⽅法将它们相加，得到了正确的结果。最后，通过 toString ⽅法将结果转换为字符串。

如果不依赖外部库，咋处理

JavaScript 中，数值超过了 Number 最⼤值时，可以使⽤ BigInt 类型来处理，它可以表⽰任意精度的 整数。

使⽤ BigInt 类型时，需要在数值后⾯添加⼀个 n 后缀来表⽰ BigInt 类型。例如：

1 const bigNum = 9007199254740993n; // 注意：数字后⾯添加了 'n' 后缀

注意，BigInt 类型是 ECMAScript 2020 新增的特性，因此在某些浏览器中可能不被⽀持。如果需要在 不⽀持 BigInt 的环境中使⽤ BigInt，可以使⽤ polyfill 或者第三⽅库来实现。

4. 使⽤同⼀个链接， 如何实现 PC 打开是 web 应⽤、⼿机打 开是⼀个 H5 应⽤？

可以通过根据请求来源（User-Agent）来判断访问设备的类型，然后在服务器端进⾏适配。例如，可 以在服务器端使⽤ Node.js 的 Express 框架，在路由中对不同的 User-Agent 进⾏判断，返回不同的⻚ ⾯或数据。具体实现可以参考以下步骤：

1. 根据 User-Agent 判断访问设备的类型，例如判断是否为移动设备。可以使⽤第三⽅库如 uaparser-js 进⾏ User-Agent 的解析。

2. 如果是移动设备，可以返回⼀个 H5 ⻚⾯或接⼝数据。

3. 如果是 PC 设备，可以返回⼀个 web 应⽤⻚⾯或接⼝数据。

具体实现⽅式还取决于应⽤的具体场景和需求，以上只是⼀个⼤致的思路。

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

【如何保证⽤⼾的使⽤体验】这个也是⼀个较为复杂的话题， 这个也不是问题了， 这个算是话题吧； 主要从以下⼏个⽅⾯思考问题：

1. 性能⽅向的思考

2. ⽤⼾线上问题反馈，线上 on call 的思考

3. ⽤⼾使⽤体验的思考， 交互体验使⽤⽅向

4. 提升⽤⼾能效⽅向思考

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

如何解决⻚⾯请求接⼝⼤规模并发问题， 不仅仅是包含了接⼝并发， 还有前端资源下载的请求并发。 应该说这是⼀个话题讨论了；

个⼈认为可以从以下⼏个⽅⾯来考虑如何解决这个并发问题:

1. 后端优化：可以对接⼝进⾏优化，采⽤缓存技术，对数据进⾏预处理，减少数据库操作等。使⽤集 群技术，将请求分散到不同的服务器上，提⾼并发量。另外可以使⽤反向代理、负载均衡等技术， 分担服务器压⼒。

2. 做 BFF 聚合：把所有⾸屏需要依赖的接⼝， 利⽤服务中间层给聚合为⼀个接⼝。

3. CDN加速：使⽤CDN缓存技术可以有效减少服务器请求压⼒，提⾼⽹站访问速度。CDN缓存可以将 接⼝的数据存储在缓存服务器中，减少对原始服务器的访问，加速数据传输速度。

4. 使⽤ WebSocket：使⽤ WebSocket 可以建⽴⼀个持久的连接，避免反复连接请求。WebSocket 可以实现双向通信，⼤幅降低服务器响应时间。

5. 使⽤ HTTP2 及其以上版本， 使⽤多路复⽤。

6. 使⽤浏览器缓存技术：强缓存、协商缓存、离线缓存、Service Worker 缓存 等⽅向。

7. 聚合⼀定量的静态资源： ⽐如提取⻚⾯公⽤复⽤部分代码打包到⼀个⽂件⾥⾯、对图⽚进⾏雪碧图 处理， 多个图⽚只下载⼀个图⽚。

8. 采⽤微前端⼯程架构： 只是对当前访问⻚⾯的静态资源进⾏下载， ⽽不是下载整站静态资源。

9. 使⽤服务端渲染技术： 从服务端把⻚⾯⾸屏直接渲染好返回， 就可以避免掉⾸屏需要的数据再做 额外加载和执⾏。

7. 设计⼀套全站请求耗时统计工具

⾸先我们要知道有哪些⽅式可以统计前端请求耗时

从代码层⾯上统计全站所有请求的耗时⽅式主要有以下⼏种：

1. Performance API：Performance API 是浏览器提供的⼀组 API，可以⽤于测量⽹⻚性能。通过 Performance API，可以获取⻚⾯各个阶段的时间、资源加载时间等。其中，Performance Timing API 可以获取到每个资源的加载时间，从⽽计算出所有请求的耗时。

2. XMLHttpRequest 的 load 事件：在发送 XMLHttpRequest 请求时，可以为其添加 load 事件，在请 求完成时执⾏回调函数，从⽽记录请求的耗时。

3. fetch 的 Performance API：类似 XMLHttpRequest，fetch 也提供了 Performance API，可以通过 Performance API 获取请求耗时。

4. ⾃定义封装的请求函数：可以⾃⼰封装⼀个请求函数，在请求开始和结束时记录时间，从⽽计算请 求耗时。

设计⼀套前端全站请求耗时统计⼯具

可以遵循以下步骤：

1. 实现⼀个性能监控模块，⽤于记录每个请求的开始时间和结束时间，并计算耗时。

2. 在应⽤⼊⼝处引⼊该模块，将每个请求的开始时间记录下来。

3. 在每个请求的响应拦截器中，记录响应结束时间，并计算请求耗时。

4. 将每个请求的耗时信息发送到服务端，以便进⾏进⼀步的统计和分析。

5. 在服务端实现数据存储和展⽰，可以使⽤图表等⽅式展⽰请求耗时情况。

6. 对于请求耗时较⻓的接⼝，可以进⾏优化和分析，如使⽤缓存、使⽤异步加载、优化查询语句等。

7. 在前端应⽤中可以提供开关，允许⽤⼾⾃主开启和关闭全站请求耗时统计功能。 以下是⼀个简单的实现⽰例：

在应⽤⼊⼝处引⼊该模块：

1 // main.jsimport performance from './performance'; 
2 performance.init();

在每个请求的响应拦截器中触发fetchEnd事件：

在服务端实现数据存储和展⽰，可以使⽤图表等⽅式展⽰请求耗

1.前端如何实现截图?

2.当QPS达到峰值时,该如何处理?

3.js 超过 Number 最大值的数怎么处理?

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

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

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

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

8.大文件上传了解多少

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

10.站点一键换肤的实现方式有哪些?

11.如何实现网页加载进度条?

12.常见图片懒加载方式有哪些?

13.cookie 构成部分有哪些

14.扫码登录实现方式

15.DNS 协议了解多少

16.函数式编程了解多少?

17.前端水印了解多少?

18.什么是领域模型

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

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

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

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

23.html 中前缀为 data-开头的元素属性是什么?

24.移动端如何实现上拉加载，下拉刷新?

25.如何判断dom元素是否在可视区域

26.前端如何用 canvas 来做电影院选票功能

27.如何通过设置失效时间清除本地存储的数据?

28.如果不使用脚手架，如果用 webpack 构建一个自己的 react 应用

29.用 nodejs 实现一个命令行工具， 统计输入目录下面指定 代码的行数

30.package.json 里面 sideEffects 属性的作用是啥

31.script 标签上有那些属性，分别作用是啥?

32.为什么 SPA 应用都会提供一个 hash 路由，好处是什么?

33.[React]如何进行路由变化监听

34.单点登录是是什么，具体流程是什么

35.web 网页如何禁止别人移除水印

36.用戶访问页面白屏了，原因是啥，如何排查?

37.[代码实现]JS 中如何实现大对象深度对比

38.如何理解数据驱动视图，有哪些核心要素?

39.vue-cli 都做了哪些事儿，有哪些功能?

40.JS 执行 100 万个任务，如何保证浏览器不卡顿?

41.JS 放在 head 里和放在 div 里有什么区别?

42.Eslint 代码检查的过程是啥?

43.虚拟混动加载原理是什么，用 」S 代码简单实现一个虚拟 滚动加加载。

44.[React]react-router和 原牛路由区别

45.html的行内元素和块级元素的区别

46.介绍-下requestldleCallback api

47.documentFragment api是什么，有哪些使用场景?

48.git pull 和 git fetch 有啥区别?

49.前端如何做 页面主题色切换

50.前端视角-如何保证系统稳定性

51.如何统计长任务时间、长任务执行次数

52.V8 里面的 川T是什么?

53.用 JS 写一个 cookies 解析函数，输出结果为一个对象

54.vue 中 Scoped Styles 是如何实现样式隔离的， 原理是啥?

55.样式隔离方式有哪些

56.在JS 中，如何解决递归导致栈溢出问题?

57.站点如何防止爬虫?

58.ts 项目中，如何使用 node modules 里面定义的全局类型 包到自己项目 src 下面使用?

59.不同标签页或窗口间的 【主动推送消息机制】的方式有哪 些?(不借助服务端)

60.[React]在 react 项目开发过程中，是否可以不用 react router，使用浏览器原生 history 路由来组织页面路由?

61.在表单校验场景中，如何实现页面视口滚动到报错的位置

62.如何一次性渲染十万条数据还能保证页面不卡顿

64.如何从 0到1搭建前端基建

65.你在开发过程中， 使用过哪些 TS 的特性或者能力?

66.JS 的加载会阻塞浏览器渲染吗?

67.浏览器对队头阻塞有什么优化?

68.Webpack 项目中通过 script 标签引入资源，在项目中如何 处理?

69.应用上线后，怎么通知用户刷新当前页面?

70.Eslint 代码检查的过程是啥?

71.HTTP是一个无状态的协议，那么Web应用要怎么保持用戶 的登录态呢?

72.如何检测网页空闲状态(一定时间内无操作)

73.为什么 Vite 速度比 Webpack快?

74.列表分页， 快速翻页下的竟态问题

75.JS 执行 100 万个任务，如何保证浏览器不卡顿?

76.git 仓库迁移应该怎么操作

77.如何禁止别人调试自己的前端页面代码?

78.web 系统里面，如何对图片进行优化?

79.OAuth2.0 是什么登录方式

80.单点登录是如何实现的?

81.常见的登录鉴权方式有哪些?

82.需要在跨域请求中携带另外一个域名下的 Cookie 该如何操作?

83.vite 和 webpack 在热更新上有啥区别?

84.封装一个请求超时，发起重试的代码

85.前端如何设置请求超时时间 timeout

86.nodejs 如何充分利用多核 CPU?

87.后端一次性返回树形结构数据，数据量非常大,前端该如何 处理?

88.你认为组件封装的一些基本准则是什么?

89.页面加载速度提升(性能优化)应该从哪些反向来思考?

90.前端日志埋点 SDK 设计思路

91.token 进行身份验证了解多少?

92.在前端应用如何进行权限设计?

93.[低代码]代码平台一般渲染是如何设计的?

94.[低代码]代码平台一般底层协议是怎么设计的

95.[Webpack]有哪些优化项目的手段?

96.IndexedDB 存储空间大小是如何约束的?

97.浏览器的存储有哪些

98.[Webpack]如何打包运行时 chunk，且在项目工程中，如何去加载这个运行时 chunk ?

99.为何现在市面上做表格渲染可视化技术的，大多数都是 canvas ， 而很少用 svg 的?

100.在你的项目中，使用过哪些 webpack plugin,说一下他 们的作用

101.在你的项目中，使用过哪些webpack loader, 说一下他 们的作用

102.[React]如何避免不必要的渲染?

103.全局样式命名冲突和样式覆盖问题怎么解决

104.[React]如何实现专场动画?

105.[React] 从 React 层面上，能做的性能优化有哪些?

106.[Vue]中为何不要把 v-if 和 v-for 同时用在同一个元素 上， 原理是什么?

107.将静态资源缓存在本地的方式有哪些?

108.SPA首屏加载速度慢的怎么解决

109.axios 是如何区分是 nodejs 环境还是 浏览器环境 的?

110.如何拦截 web 应用的请求

111.前端有哪些跨页面通信方式?