26年前端面试题-综合八股文+场景题整理

八股文中心
0 阅读15分钟

昨天面了3个前端，结果全挂！不是岗位要求多高，而是太多人栽在「准备不足」的细节上——没经验不可怕，思路混乱和深度不够才真的没机会！

1️⃣ 自我介绍别背简历，要“亮出技术栈与项目”

很多人上来就说“我叫XX，会用Vue和React，做过一些项目”。

✅ 参考结构：技术背景 + 核心技能 + 项目亮点 + 工程意识：

“面试官您好，我叫XXX。我的前端技术栈以Vue3/React为核心，熟悉TypeScript、Pinia/Redux状态管理，并有Webpack/Vite工程化实践经验。我独立开发过[具体项目名称，如：数据可视化后台]，不仅实现了核心功能，还重点解决了首屏加载优化（如通过路由懒加载将LCP从3s降至1s内）和复杂组件封装的问题。我对编写可维护代码和团队协作规范很有热情，非常期待能加入贵团队贡献价值。”

2️⃣ 项目经验不足？“个人项目”就是你的最佳答卷

有人直接说“我只有一些课程Demo，没上线项目”。

✅ 可以这样说：

“虽然我的商业项目经验有限，但我通过高仿[某知名应用，如：某电商核心页面]或自主开发[某工具，如：待办应用] 来系统性实践。在这个项目中，我不仅应用了 [某框架]，还刻意练习了 前端路由设计、状态管理、与Mock API联调，并使用了Git进行版本控制、ESLint规范代码，最后部署到Vercel/Netlify。这让我对现代前端开发的全流程有了扎实的理解。”

3️⃣ 简历上的技术点，必须能“深挖一层”

有人写“精通Vue”，追问“Vue3的响应式原理和Composition API设计初衷是什么？”就卡壳。写“熟悉性能优化”，问“具体分析工具和优化指标是什么？”答不上来！

🧠 提前备好这些技术追问：

关于框架：这个项目为什么选React而不是Vue？你的组件是如何设计和拆分的？遇到了哪些状态管理的挑战？

关于难点：你提到的性能优化，是用Chrome DevTools的哪个面板定位问题的？具体优化了哪些指标（如LCP、CLS）？

关于工程：你的项目构建工具有哪些自定义配置？如何处理代码分割和按需加载？

关于协作：你的代码规范和提交规范是什么？如何与后端协作保证接口质量？

4️⃣ 最后别再说“我没什么问题了”！

面试官问“你有什么想问的”，是让你展示“你对职位和团队的关注点”，不是走流程！

✅ 高加分反问：

“团队目前主要的技术栈和未来的技术规划是怎样的？如果我加入，前期会参与哪个产品方向？”

“团队在前端工程化（如CI/CD、质量监控）、代码审查和知识沉淀方面是怎样的流程？”

“对于这个岗位的新同学，团队会提供哪些方面的指导或资源来帮助他快速成长？”

📌 总结

前端面试不是“问答检查”，而是“能力演示”——你需要通过清晰的表述、有深度的项目复盘和主动的技术思考，证明你能解决问题、能快速学习、能融入工程团队。扎实的准备远比空谈“热爱学习”更有说服力。

以下展示的前端最新场景题
看最后哦，都可以嗱去看看！

高频场景题综合整理：

1.请求失败会弹出一个toast,如何保证批量请求失败，只弹出一个toast
2.如何减少项目里面 if-else
3.babel-runtime 作用是啥
4.如何实现预览PDF文件
5.如何在划词选择的文本上添加右键菜单（划词：鼠标滑动选择一组字符，对组字符进行操作）
6.富文本里面，是如何做到划词的（鼠标滑动选择一组字符，对组字符进行操作)？
7.如何做好前端监控方案
8.如何标准化处理线上用户反馈的问题
9.px 如何转为 rem
10.浏览器有同源策略，但是为何cdn请求资源的时候不会有跨域限制
11.cookie可以实现不同域共享吗
12.axios是否可以取消请求
13.前端如何实现折叠面板效果？
14.dom里面，如何判定a元素是否是b元素的子元
15.判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定？
.....................................................................................................................................................................

20.如何清理源码里面没有被应用的代码，主要是JS、TS、CSS代码
21.前端应用如何做国际化？
22.应用如何做应用灰度发布
23.[微前端]为何通常在微前端应用隔离，不选择iframe方案
24.[微前端]Qiankun是如何做JS 隔离的
25.[微前端]微前端架构一般是如何做JavaScript隔离
26.[React]循环渲染中为什么推荐不用index 做 key
27.[React]如何避免使用context的时候，引起整个挂载节点树的重新渲染
28.前端如何实现截图？
29.当QPS达到峰值时，该如何处理？
30.js超过Number 最大值的数怎么处理？
31.使用同一个链接，如何实现PC打开是web应用、手机打开是一个H5 应用？
32.如何保证用户的使用体验
33.如何解决页面请求接口大规模并发问题
34.设计一套全站请求耗时统计工具
35.大文件上传了解多少
.....................................................................................................................................................................

45.什么是领域模型
46.一直在window上面挂东西是否有什么风险
47.深度SEO优化的方式有哪些，从技术层面来说
48.小程序为什么会有两个线程
49.web应用中如何对静态资源加载失败的场景做降级处理
50.html中前缀为data-开头的元素属性是什么？
51.移动端如何实现上拉加载，下拉刷新？
52.如何判断dom元素是否在可视区域
53.前端如何用canvas来做电影院选票功能
54.如何通过设置失效时间清除本地存储的数据？
55.如果不使用脚手架，如果用webpack构建一个自己的react应用
56.用nodejs实现一个命令行工具，统计输入目录下面指定代码的行数
57.packagejson里面 sideEffects 属性的作用是啥
58.script标签上有那些属性，分别作用是啥？
59.为什么SPA应用都会提供一个hash路由，好处是什么?
60.[React]如何进行路由变化监听
.....................................................................................................................................................................

70.虚拟滚动加载原理是什么，用JS代码简单实现一个虚拟滚动加载。
71.[React]react-router和原生路由区别
72.html的行内元素和块级元素的区别
73.介绍-下requestldleCallback api
74.documentFragment api是什么，有哪些使用场景？
75.git pull 和 git fetch 有啥区别?
76.前端如何做页面主题色切换
77.前端视角-如何保证系统稳定性
78.如何统计长任务时间，长任务执行次数
79.V8 里面的JIT是什么？
80.用JS写一个cookies解析函数，输出结果为一个对象
81.vue 中 Scoped Styles是如何实现样式隔离的，原理是啥？
82.样式隔离方式有哪些
83.在JS中，如何解决递归导致栈溢出问题？
84.站点如何防止爬虫？
85.ts项目中，如何使用node_modules里面定义的全局类型包到自己项目src下面使用？
86.不同标签页或窗口间的【主动推送消息机制】的方式有哪（不借助服务端）？
.....................................................................................................................................................................

90.[webpack]打包时 hash码是如何生成的
91.如何从0到1搭建前端基建
92.你在开发过程中，使用过哪些TS的特性或者能力？
93.JS的加载会阻塞浏览器渲染吗？
94.浏览器对队头阻塞有什么优化？
95.Webpack项目中通过script 标签引I入资源，在项目中如何处理？
96.应用上线后，怎么通知用户刷新当前页面？
97.Eslint代码检查的过程是啥？
98.HTTP是一个无状态的协议，那么Web应用要怎么保持用户的登录态呢？
99.如何检测网页空闲状态（一定时间内无操作）
100.为什么Vite速度比Webpack 快?
101.列表分页，快速翻页下的竞态问题
102.JS执行100万个任务，如何保证浏览器不卡顿？
103.git仓库迁移应该怎么操作
104.如何禁止别人调试自己的前端页面代码？
105.web系统里面，如何对图片进行优化？
106.OAuth2.0是什么登录方式
107.单点登录是如何实现的？
.....................................................................................................................................................................

JavaScript

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

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

CSS

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

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

HTML

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

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

React

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

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

Vue

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

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

算法

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

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

TypeScript

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

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

以上都准备好

图片.png

在面试场景题的应对中，展现清晰的逻辑链条比完美答案更重要。建议候选人建立自己的「场景案例库」，记录真实项目中遇到的典型问题及解决方案。当你能从容地将问题拆解为可执行的步骤，并展现出持续优化的思维，就已经握住了通过技术面试的金钥匙。

avatar
文章
阅读
粉丝