26年前端面试题、场景题、项目全新题库整理！最强面试“野路子”，一周面试8个拿6个Offer！

1. 技术面答题技巧

问题一：系统设计题问“如何设计XX系统”，先扯高可用三要素（冗余、负载均衡、故障转移）——前端版：先扯组件化分层、状态管理、降级兜底（比如SPA骨架屏、CDN冗余、错误边界）

问题二：被问“为什么要用Vue/React而不用原生JS/jQuery”，先提组件化复用、虚拟DOM性能、响应式数据流和生态工具链

问题三：遇到源码分析不会，就扯框架的扩展性设计（Vue的插件机制、React的Hooks规则、Webpack的Tapable架构）

问题四：被问项目难点，就说“曾经遇到内存泄漏导致页面卡死，通过Chrome DevTools的Memory面板和Performance录制定位到闭包引用未释放”

问题五：不会就聊“根据业务场景做技术选型，比如首屏要求高就用SSR，后台管理系统就用SPA”

2. 别被面试官带偏节奏

听到“你说的这个方案有考虑过XX问题吗”，别慌，先承认可能存在不足，再补充“在实际业务中我们会通过监控上报+降级UI+灰度发布来保障体验”

3. 实在不懂时的救命技巧

遇到完全没听过的技术名词（比如Islands架构、RSC）：

回答“这个技术在我的项目实践中用得不多，但我了解它是为了解决XX类性能/架构问题而生的”

被深挖底层原理卡壳时：

坦诚“这部分源码我还没来得及细看，但我的理解是...”（接着聊设计思想，比如单向数据流、发布订阅、组合优于继承）

---

📍项目介绍部分

1. 介绍项目时碰到复杂技术难点，用“一句话概括+业务价值”句式
   例：“实现了虚拟滚动，让包含10万条数据的表格滚动帧率从10fps提升到60fps”
2. 技术栈描述记得套“三件套”模版：
   Vue3/React18做UI层 + Pinia/Redux Toolkit管状态 + Vite/Webpack打工程化
   再加点料：ESBuild做构建优化、Node.js做BFF层
3. 被问项目贡献时，无脑套“三板斧”：
   性能优化（首屏LCP从2.5s降到1.2s） + 线上故障排查（解决过白屏/崩溃问题） + 代码重构（引入TypeScript，将复用组件抽离成Monorepo包）

---

📍系统设计部分

1. 看题目要求时，发现出现“高并发”“实时性”“大文件”关键词，直接上 WebSocket/SSE + 虚拟滚动 + 切片上传/断点续传 三连
2. 设计题排序逻辑：先谈架构选型（SPA/SSR/MPA）→ 数据流向（读多写少用SWR缓存，实时协作用WebSocket）→ 容灾方案（CDN降级、错误边界、重试策略）
3. 有些方案明显是送分题（比如秒杀页面必须提静态资源CDN预热、接口防抖节流、乐观更新UI），直接放最后当总结亮点

---

📍编码考核部分

1. 手写算法时题干里带“时间复杂度O(1) ”要求的，无脑上Map/Set解法（例如两数之和、数组去重）
2. 那些看起来和业务无关的底层代码（比如手写Promise、手写防抖节流、手写深拷贝），重点考察异步控制流程、闭包应用、边界条件处理（防抖+立即执行版是加分项）
3. 两个编程题，建议先做第二题，通常比第一题更贴近实际业务场景（比如第二题是封装一个带超时的请求重试，第一题是二叉树翻转）
4. 写代码时注意每个方法开头写注释，面试官评分会看代码可读性
5. 用到数组、对象时无脑写类型注解（TypeScript）或JSDoc注释，虽然不写也能运行，但显得不专业

---

✅总结

前端面试拿offer必须扎实基础（HTML/CSS/JS、浏览器原理、网络协议），技巧只是辅助管不了长远，系统学习才能真正成长。

好啦，差不多就这些了，大家面试加油，都能上岸！

给大家准备了高频的前端面试题、面经、简历模板等，有需要的直接嗱去看看吧！

以下是准备好的最新场景题：【需要的可以拿去看看】

目录

• JavaScript (323题)
• CSS (61题)
• HTML (57题)
• React (83题)
• Vue (80题)
• 算法（(19题)
• 计算机网络（71题）
• Node.js (27题)
• TypeScript (46题)
• 性能优化(25题)
• 前端安全(21题)
• 小程序(9题)
• ES6 (32题)
• 编程题(50题)
• 设计模式(7题)
• 工程化（34题）
• 2026前端最新场景题攻略
• 2026前端项目中的难点亮点

JavaScript

• 不会冒泡的事件有哪些？
• mouseEnter 和mouseOver 有什么区别?
• MessageChannel是什么，有什么使用场景?
• async、 await 实现原理
• Proxy能够监听到对象中的对象的引用吗？
• 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功?
• 下面代码会输出什么？
• 描述下列代码的执行结果
• 什么是作用域链？
• bind、call、apply有什么区别?如何实现一个bind?
• common.js和es6中模块引l入的区别?
• 说说vue3 中的响应式设计原理
• script标签放在header里和放在body底部里有什么区别？
• 下面代码中，点击”+3”按钮后，age的值是什么？
• Vue中，created和mounted两个钩子之间调用时间差值受什么影响？
• vue中，推荐在哪个生命周期 发起请求?
• 不会冒泡的事件有哪些？
• mouseEnter 和mouseOver 有什么区别?
• 为什么Node在使用es module时必须加上文件扩展名?
• package.json文件中的 devDependencies和dependendes对象有什么区别?
• React Portals 有什么用?
• react 和 react-dom是什么关系?
• MessageChannel是什么，有什么使用场景？
• React 中为什么不直接使用requestIdleCallback?
• 为什么react需要 fiber 架构，而Vue 却不需要？

CSS

• css 中的 animation、transition,transform有什么区别?
• 怎么做移动端的样式适配？
• 相邻的两个inline-block节点为什么会出现间隔，该何解决？
• grid网格布局是什么？
• CSS3新增了哪些特性？
• 怎么使用cSS3实现动画？
• 怎么理解回流跟重绘？什么场景下会触发？
• 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？
• 如果使用CSs提高页面性能？
• 如何实现单行/多行文本溢出的首略样式？
• 如何使用css完成视差滚动效果?
• 怎么使用CSS 如何画一个三角形
• 说说对CSS 工程化的理解
• 怎么触发BFC，BFC有什么应用场景？
• 单行文本怎么实现两端对齐？
• 说说你对 CSS 模块化的理解
• CSS 模块化的实现方式
• 怎么让Chrome支持小于12px 的文字?
• 怎么让Chrome支持小于12px的文字?
• flexbox(弹性盒布局模型)是什么，适用什么场景？
• 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
• 设备像素、css像素、设备独立像素、dpr、ppi 之间有什么区别?

HTML

• 什么是DOM和 BOM?
• 简单描述从输入网址到页面显示的过程
• 一台设备的dpr，是否是可变的？
• 前端效如何选择图片的格式？
• 前端跨页面通信，你道哪些方法？
• 说说你对Dom树的理解
• 行内元素有哪些？块级元素有哪些？空(void)元素有那些？
• htm和css中的图片戏与渲染规则是什么样的？
• title与h1的区别、b与strong的区别、与em的区别?
• script标签为什么建议放在 body标签的底部(defer、async)
• 说说你对 SSG 的理解
• 什么是HTML5,以及和HTML的区别是什么?
• 什么是渐进增虽和优雅降级？
• Node 和Element 是什么关系?
• 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
• 如何控制input输入框的输入字数？
• 渐进式jpg有了解过吗？
• 假设我要上传图片，怎么在选择图片后，通过浏览器 预览待上传的图片？

React

• 下面代码中，点击”+3”按钮后，age的值是什么？
• React Portals 有什么用?
• react和react-dom是什么关系?
• React 中为什么不直接使用 requestIdleCallback?
• 为什么react 需要 fiber 架构 ，而Vue 却不需要?
• 子组件是一个Portal，发生点击事件能冒泡到父组件吗？
• React 为什么要废弃componentWillMount、componentWillReceiveProps、componentWillUpdate这三个生命周期钩子？它们有哪些问题呢?React又是如何解决的呢？
• 说说React render方法的原理?在什么时候会被触发?
• 说说React事件和原生事件的执行顺序
• 说说对受控组件和非受控组件的理解，以及应用场景？
• 你在React项目中是如何使用Redux的？项目结构是如何划分的?
• 说说对Redux中间件的理解？常用的中间件有哪些？实现原理？
• 说说你对Redux的理解？其工作原理？
• 说说你对immutable的理解？如何应用在react项目中?
• 说说React Jsx转换成真实DOM过程?
• 说说你在Reac项目是如何捕获错误的?
• 说说React服务端宣染怎么做？原理是什么？
• ReactFiber是如何实现更新过程可控?
• Fiber 为什么是React 性能的一个飞跃？
• setState是同步，还是异步的?

Vue

• Vue 有了数据响应式，为何还要diff？
• vue3为什么不需要时间分片?
• vue3为什么要引入Composition API？
• 谈谈Vue事件机制,并手写$on、$off、$emit、$once
• computed计算值为什么还可以依赖另外一个computed计算值?
• 说一下vm.$set 原理
• 怎么在Vue 中定义全局方法?
• Vue中父组件怎么监听到子组件的生命周期？
• vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么?
• 说说vue3中的响应式设计原理
• Vue中，created和mounted两个钩子之间调用时间差值受什么影响？
• vue中，推荐在哪个生命周期发起请求？
• 为什么react 需要 fiber 架构,而 Vue 却不需要?
• SPA(单页应用)首屏加戏速度慢怎么解决?
• 说下Vite的原理
• Vue2.0为什么不能检查数组的变化，该怎么解决？
• 说说Vue 页面渲染流程
• vue中computedfDwatch区别
• vuex中的辅助函数怎么使用？
• 如果使用Vue3.0实现一个Modal，你会怎么进行设计?
• Vue 3.0中Treeshaking特性是什么，并举例进行说明?
• Vue3.0所采用的Composition Api与Vue2.x使用的Options Api有什么不同?
• Vue3.0性能提升主要是通过哪几方面体现的？
• Vue3.0的设计目标是什么？做了哪些优化?
• 你是怎么处理vue项目中的错误的？

算法

• 最大的钻石
• 举例说明你对尾递归的理解，以及有哪些应用场景
• 去除字符串中出现次数最少的字符，不改变原字符串的顺序。
• 请手写”快速排序”
• 洗牌算法
• 什么是尾调用优化和尾递归？
• 合并K个升序链表
• 什么是时间复杂度？
• 请手写“基数排序”

TypeScript

• 说说对 TypeScript 中命名空间与模块的理解?区别?
• 说说你对 typescript 的理解?与javascript 的区别?
• Typescript中泛型是什么?
• TypeScript中有哪些声明变量的方式？
• 什么是Typescript的方法重载？
• 请实现下面的 sleep 方法
• typescript 中的 is 关键字有什么用?
• TypeScrip支持的访问修饰符有哪些?
• 请实现下面的 myMap 方法
• 请实现下面的 treePath方法
• 请实现下面的 product 方法
• 请实现下面的 myAll 方法
• 请实现下面的 sum 方法
• 请实现下面的 mergeArray 方法
• 实现下面的 firstSingleChar 方法
• 实现下面的 reverseWord 方法
• 如何定义一个数组，它的元紊可能是字符串类型，也可能是数值类型？
• 请补充 objToArray数

2026全新场景题整理，中大厂面试必备！

1.如何判断用户设备

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

3.介绍下navigator.sendBeacon方法

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

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

6.如何统计页面的long task（长任务）

7.PerfoemanceObserver如何测量页面性能

移动端如何实现下拉滚动加载（顶部加载） 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,如何在划词选择的文本上添加右键菜单(划词:标滑动选择一组字符，对组字符进行操作)【热度:100】

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

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

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

32.px 如何转为 rem

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

34.cookie 可以实现不同域共享吗

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 应用中如何对静态资源加载失败的场景做降级处理

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

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

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

...............................................................................................

无论您是刚接触前端的新人，还是准备冲击大厂高级职位的资深工程师，这套题库都能为您提供精准的备考路径。记住，我们的目标不是让您"背会"这些题库，而是通过这个题库建立应对任何技术考察的自信与能力。

各位前端的小伙伴，有需要跳槽或者面试工作的，我在这里准备好了一份2026年精选的前端面试题，内容都是经过精简的，全部都是高频中大厂的面试真题，有需要的可以拿去看看！【2026最全题库】*