跳到主要内容前端面试高频场景题汇总 | 极客日志JavaScriptNode.js大前端
前端面试高频场景题汇总
前端面试高频场景题汇总涵盖 JavaScript 基础、框架原理、工程化、性能优化及网络协议等内容。包含批量请求处理、代码重构、微前端隔离、状态管理、构建优化等实战问题。适合求职者准备技术面试,提升项目落地能力与底层知识理解。
当前互联网面试趋势偏向场景题,要求候选人具备扎实的知识储备及项目落地能力。
2026 最新高频场景题
- 请求失败会弹出一个 toast,如何保证批量请求失败只弹出一个 toast
- 如何减少项目里面 if-else
- Babel Runtime 作用是啥
- 如何实现预览 PDF 文件
- 如何在划词选择的文本上添加右键菜单(划词:鼠标滑动选择一组字符,对组字符进行操作)
- 富文本里面,是如何做到划词的(鼠标滑动选择一组字符,对组字符进行操作)?
- 如何做好前端监控方案
- 如何标准化处理线上用户反馈的问题
- PX 如何转换为 REM
- 浏览器有同源策略,但是为何 CDN 请求资源的时候不会有跨域限制
- Cookie 可以实现不同域共享吗
- Axios 是否可以取消请求
- 前端如何实现折叠面板效果?
- DOM 里面,如何判定 A 元素是否是 B 元素的子元素
- 判断一个对象是否为空,包含了其原型链上是否有自定义数据或者方法。该如何判定?
- JavaScript 如何判空?「空」包含了:空数组、空对象、空字符串、0、undefined、null、空 map、空 set,都属于为空的数据
- CSS 实现翻牌效果
- flex: 1 代表什么
- 一般是怎么做代码重构的
- 如何清理源码里面没有被应用的代码,主要是 JS、TS、CSS 代码
- 前端应用如何做国际化?
- 应用如何做应用灰度发布
- [微前端] 为何通常在微前端应用隔离,不选择 iframe 方案
- [微前端] Qiankun 是如何做 JS 隔离的
- [微前端] 微前端架构一般是如何做 JavaScript 隔离
- [React] 循环渲染中为什么推荐不用 index 做 key
- [React] 如何避免使用 context 的时候,引起整个挂载节点树的重新渲染
- 前端如何实现截图?
- 当 QPS 达到峰值时,该如何处理?
- JavaScript 超过 Number 最大值的数怎么处理?
- 使用同一个链接,如何实现 PC 打开是 Web 应用、手机打开是一个 H5 应用?
- 如何保证用户的使用体验
- 如何解决页面请求接口大规模并发问题
- 设计一套全站请求耗时统计工具
- 大文件上传了解多少
- H5 如何解决移动端适配问题
- 站点一键换肤的实现方式有哪些?
- 如何实现网页加载进度条?
- 常见图片懒加载方式有哪些?
- Cookie 构成部分有哪些
- HTML 中前缀为 data-* 开头的元素属性是什么?
- 移动端如何实现上拉加载,下拉刷新?
- 如何判断 DOM 元素是否在可视区域
- 前端如何用 Canvas 来做电影院选票功能
- 如何通过设置失效时间清除本地存储的数据?
- 如果不使用脚手架,如果用 Webpack 构建一个自己的 React 应用
- 用 Node.js 实现一个命令行工具,统计输入目录下面指定代码的行数
- package.json 里面 sideEffects 属性的作用是啥
- Script 标签上有那些属性,分别作用是啥
- 为什么 SPA 应用都会提供一个 Hash 路由,好处是什么?
- [React] 如何进行路由变化监听
- 单点登录是什么,具体流程是什么
- Web 网页如何禁止别人移除水印
- 用户访问页面白屏了,原因是啥,如何排查?
- [代码实现] JavaScript 中如何实现大对象深度对比
- 如何理解数据驱动视图,有哪些核心要素?
- Vue CLI 都做了哪些事儿,有哪些功能?
- JavaScript 执行 100 万个任务,如何保证浏览器不卡顿?
- JavaScript 放在 Head 里和放在 Body 里有什么区别?
- ESLint 代码检查的过程是啥?
- 虚拟滚动加载原理是什么,用 JavaScript 代码简单实现一个虚拟滚动加载
相关免费在线工具
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
用 JavaScript 写一个 cookies 解析函数,输出结果为一个对象Vue 中 Scoped Styles 是如何实现样式隔离的,原理是啥?样式隔离方式有哪些在 JavaScript 中,如何解决递归导致栈溢出问题?站点如何防止爬虫?TS 项目中,如何使用 node_modules 里面定义的全局类型包到自己项目 src 下面使用?不同标签页或窗口间的主动推送消息机制的方式有哪(不借助服务端)?[React] 在 React 项目开发过程中,是否可以不用 react-router,使用浏览器原生 History 路由来组织页面路由在表单校验场景中,如何实现页面视口滚动到报错的位置如何一次性渲染十万条数据还能保证页面不卡顿[Webpack] 打包时 hash 码是如何生成的如何从 0 到 1 搭建前端基建你在开发过程中,使用过哪些 TypeScript 的特性或者能力?JavaScript 的加载会阻塞浏览器渲染吗?浏览器对队头阻塞有什么优化?Webpack 项目中通过 script 标签引入资源,在项目中如何处理?应用上线后,怎么通知用户刷新当前页面?ESLint 代码检查的过程是啥?HTTP 是一个无状态的协议,那么 Web 应用要怎么保持用户的登录态呢?如何检测网页空闲状态(一定时间内无操作)为什么 Vite 速度比 Webpack 快?Vite 和 Webpack 在热更新上有啥区别?封装一个请求超时,发起重试的代码前端如何设置请求超时时间 timeoutNode.js 如何充分利用多核 CPU?后端一次性返回树形结构数据,数据量非常大,前端该如何处理?你认为组件封装的一些基本准则是什么?页面加载速度提升(性能优化)应该从哪些方向来思考?前端日志埋点 SDK 设计思路Token 进行身份验证了解多少?在前端应用如何进行权限设计?[低代码] 代码平台一般渲染是如何设计的?[低代码] 代码平台一般底层协议是怎么设计的[Webpack] 有哪些优化项目的手段?IndexedDB 存储空间大小是如何约束的?浏览器的存储有哪些[Webpack] 如何打包运行时 chunk,且在项目工程中,如何去加载这个运行时 chunk?为何现在市面上做表格渲染可视化技术的,大多数都是 Canvas,而很少用 SVG 的?在你的项目中,使用过哪些 Webpack Plugin,说一下他们的作用在你的项目中,使用过哪些 Webpack Loader,说一下他们的作用[React] 如何避免不必要的渲染?全局样式命名冲突和样式覆盖问题怎么解决?