现在的前端面试已经从“怎么用”深入到“为什么”。常被追问底层原理与实现机制如框架源码、浏览器工作原理、手写核心API。甚至几场面试下来你会发现知识面需覆盖全链路。从JS/TS、工程化、安全、性能到AI应用、微前端、Serverless等新趋势都可能涉及。 高频出现的复杂手写题如带并发限制的Promise调度器和开放场景设计题如设计虚拟列表相信不少面试的前端人在被问到都是头皮发麻。接下来我会从八股底层原理机制到场景题、算法、项目细节等多个角度解析如果你们也是2月份开始准备前端面试想着提前准备一下年后面试的话建议跟着我的脚步以下https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material4JavaScript相比于npm和yarnpnpm的优势是什么如果使用Math.random() 计算中奖概率会有什么问题吗怎么使用js实现拖拽功能举例说明你对尾递归的理解以及有哪些应用场景说说你对 Iterator,Generator 和Async/Await 的理解说说你对模块化方案的理解比如CommonJS、AMD、CMD、ES Module...前端跨页面通信你知道哪些方法JavaScript脚本延迟加载的方式有哪些?怎么理解ES6中Generator的使用场景有哪些?导致页面加载白屏时间长的原因有哪些怎么进行优化?微前端中的应用隔离是什么一般是怎么实现的JavaScript对象的底层数据结构是什么浏览器和Node中的事件循环有什么区别版本号排序React.jsfiber架构的工作原理React Reconciler 为何要采用 fiber 架构?useState是如何实现的?React Fiber是什么简单介绍下React中的diff算法如何让 useEfect 支持 async/await?React中怎么实现状态自动保存(KeepAlive)ReactFiber是如何实现更新过程可控react中懒加载的实现原理是什么React有哪些性能优化的方法不同版本的React都做过哪些优化React18新特性说说你对ReactHook的闭包陷阱的理解有哪些解决方案React 中怎么给children 添加额外的属性Fiber为什么是React性能的一个飞跃?react是否支持给标签设置自定义的属性比如给video标签设置webkit-playsinline?说说React render阶段的执行过程React中fiber是如何实现时间切片的React 中为什么不直接使用requestIdleCallback?说说React commit阶段的执行过程React中的路由懒加载是什么原理是什么为什么useState返回的是数组而不是对象Vue.jsVue模板是如何编译的vue3相比较于vue2在编译阶段有哪些改进?说说Vue页面渲染流程Vue项目中你做过哪些性能优化如果使用Vue3.0实现一个Modal你会怎么进行设计Vue3.0里为什么要用ProxyAPI替代defineProperty API?Vue有了数据响应式为何还要diff说说vue3中的响应式设计原理说说 Vue 中 CSS scoped 的原理vue3的响应式库是独立出来的如果单独使用是什么样的效果手写vue的双向绑定什么是虚拟DOM如何实现一个虚拟DOM说说你的思路SSR是什么Vue中怎么实现说下Vite的原理Vue2.0为什么不能检查数组的变化该怎么解决React和Vue在技术层面有哪些区别说说vue中key的原理谈谈Vue 事件机制并手写$on、$off、$emit、$oncevue文件中在v-for时给每项元素绑定事件需要用事件代理吗为什么Vue中created和mounted两个钩子之间调用时间差值受什么影响Vue怎么实现权限管理控制到按钮级别的权限怎么做Proxy 和 Object.defineProperty 的区别是啥Vue3.0的设计目标是什么做了哪些优化vue文件中在v-for时给每项元素绑定事件需要用事件代理吗为什么Vue中created和mounted两个钩子之间调用时间差值受什么影响Typescript 面试题如何检查TypeScript中的null和undefined如何将unknown类型指定为一个更具体的类型Typescript中什么是类类型接口说说你对typescript 的理解与javascript的区别什么是TypeScript Declare关键字?in运算符作用是什么纯TS项目工程中如何使用alias path?使用TS实现一个判断传入参数是否是数组类型的方法TypeScript 中的 getter/setter是什么你如何使用它们unknown是什么类型never是什么类型详细讲一下extends条件类型怎么定义如何在TypeScript中实现继承说一说TypeScript中的类及其特性。请实现下面的sleep方法TypeScript中的方法重写是什么tsconfig.json文件有什么用Typescript中never 和void 的区别typescript 中的is关键字有什么用?TypeScript中的类是什么你如何定义它们什么是TypeScript映射文件?TypeScript中的类型有哪些?Typescript中 interface 和 type 的差别是什么?解释如何使用TypeScript mixin。ts中any和unknown有什么区别Typescript中泛型是什么?什么是Typescript的方法重载infer关键字是什么?Webpack 面试题webpack 中 module、chunk、bundle 的区别是什么说说你对前端工程化的理解webpack loader 和 plugin实现原理为什么webpack可以通过文件打包让浏览器可以支持CommonJs规范webpack tree-shaking 在什么情况下会失效?微前端中的路由加载流程是怎么样的说下Vite的原理说说webpack的构建流程说说你对Source Map 的了解ES6代码转成ES5代码的实现思路是什么?webpack的module、bundle、chunk分别指的是什么浏览器是否支持CommonJs规范webpack treeShaking机制的原理是什么package.json里面sideEffects属性的作用是什么什么情况下会导致webpack treeShaking失效?为什么SPA 应用都会提供一个hash路由好处是什么webpack分包的方式有哪些?babel的工作流程是怎么样的npm script了解多少?前后端分离是什么介绍一下tree shaking 及其工作原理webpack是如何给web应用注入环境变量的说说它的原理说说如何借助webpack来优化前端性能性能优化 面试题怎么统计页面的性能指标导致页面加载白屏时间长的原因有哪些怎么进行优化Service Worker是如何缓存http 请求资源的?如何优化DOM树解析过程DNS预解析是什么怎么实现虚拟DOM一定更快吗如果某个页面有几百个函数需要执行可以怎么优化页面的性能React.memo()和 useMemo() 的用法是什么有哪些区别SPA首屏加载速度慢的怎么解决在React中可以做哪些性能优化?前端性能优化指标有哪些怎么进行性能检测怎么进行站点内的图片性能优化什么是内存泄漏什么原因会导致呢浏览器为什么要请求并发数限制css加载会造成阻塞吗以用户为中心的前端性能指标有哪些有些框架不用虚拟dom但是他们的性能也不错是为什么谈谈对window.requestAnimationFrame的理解页面加载的过程中JS文件是不是一定会阻塞DOM和CSSOM的构建衡量页面性能的指标有哪些讲一下png8、png16、png32的区别并简单讲讲png的压缩原理CSR、SSR、SSG、NSR、ESR、ISR 都是什么?说说常规的前端性能优化手段场景 面试题怎么在前端页面中添加水印如何封装一个请求让其多次调用的时候实际只发起一个请求的时候返回同一份结果web网页如何禁止别人移除水印react中怎么实现下拉菜单场景要求点击区域外能关闭下拉组件React 如何实现vue 中 keep-alive 的功能?如何监控前端页面的崩溃如何搭建一套灰度系统如何在前端团队快速落地代码规范前端如何实现即时通讯用户访问页面白屏了原因是啥如何排查如何给自己团队的大型前端项目设计单元测试?如何做一个前端项目工程的自动化部署有哪些规范和流程设计你参与过哪些前端基建方面的建设假如让你负责一个商城系统的开发现在需要统计商品的点击量你有什么样设计与...前端怎么做错误监控token过期后页面如何实现无感刷新如何解决页面请求接口大规模并发问题web应用中如何对静态资源加载失败的场景做降级处理什么是单点登录以及如何进行实现SPA首屏加载速度慢的怎么解决站点一键换肤的实现方式有哪些实现table header 吸顶有哪些实现方式怎么实现扫码登录如果用户说web应用感觉很反应慢或者卡顿该如何排查如何设计一套统计全站请求耗时的工具你是怎么理解前端架构的怎么分析页面加载慢的原因为什么在技术选型中选择了webpack?如果想在小程序中嵌入markdown的文档你有什么思路前端如何实现截图项目亮点难点1.如何防止重复提交一般使用的是防抖和节流节流函数通过控制每次时间执行的时间间隔控制短时间多次执行方法。防抖函数是推迟每次事件执行的时间减少不必要的查询。但是网络慢的时候还是会重复提交没有显示状态用户不知道有没有真的提交。所以就给按钮添加一个加载状态查了发现el-button自带了loading属性传参的时候传一个submit函数是一个Promise,promise状态改变的时候把loading状态改成false。然后点击按钮会有加载动画加载的时候按钮是禁用的。2.控制ajax执行先后顺序一个按钮发送2个ajax请求不会按顺序因为是异步请求浏览器可以并行执行执行快慢看的是响应数据量大小和后台逻辑的复杂程度为了保证顺序就是是最后的结果需要改成同步ajax请求后台数据获取数据之后渲染到页面就需要同步。请求加一个async:false,就可以让ajax会同步执行。但是请求时间比较长需要loading层显示等待状态但是浏览器渲染线程和js线程互斥执行js的时候页面渲染会阻塞掉让ajax函数后面的代码还有渲染线程停止就算dom操作语句是发起请求的前一句也会被阻塞出现假死卡顿现象所以可以引入JQuery中的对象deferred进行封装异步函数对多个deferred对象进行并行化操作当所有deferred对象都得到解决就执行后面添加的回调。3.解析数据填写信息的页面返回的时候填写信息需要留存要用vue的keep-alive实现4.axios用post请求数据会被拦截传不到后端ajax请求可以拿到数据axios就拿不到因为axios的post默认参数格式是字符串传给后端的数据需要用请求拦截器做处理。可以引入qs库对data进行处理qs.stringifyfy。Qs装axios的时候自动安装了。5.路由懒加载需要的时候进行加载把不同路由对应的组件分成不同代码块路由被访问才加载对应组件。路由会定义很多页面页面打包后放到单独的js文件会导致非常大懒加载把页面进行划分需要时才加载减少首页加载速度懒加载主要就是把对应组件打包成js代码块进入首屏不用加载过度的资源从而减少首屏加载速度。就是用import在路由配置的router.jsimport设置好的组件from后面写的是组件的路径6.实现从详情页返回列表页保存上次加载的数据和自动还原上次的浏览位置。7.Storage封装8.Proxy实现跨域vue项目)9.断网处理10.scoped时修改子组件样式11.跳转页面后停止定时器12.v-model进行父子组件双向数据绑定13.解决vuex持久化14.使用history模式后访问内容页刷新会40415.菜单权限用动态添加路由addRoutes解决16.vue项目中用v-fofor 循环本地图片 图片不显示项目细节及疑难点1. 测试和调试2.跨域请求问题3.数据安全和隐私保护4.移动端触摸事件处理5. 性能优化6.响应式布局的挑战7.浏览器兼容性问题8.获取首页链接里面的参数问题9. 更新文件缓存的坑10.解析后端返回的map格式数据的坑。11. vue组件动态加载的坑12.页面缓存的坑。13.路由传参的功能的坑。14. axios请求中post请求的坑。15.为什么需要二次封装组件库16.请结合一个组件库设计的过程谈谈前端工程化的思想17.如何对一个组件库进行测试18.在使用qiankun时你如何处理多个子项目的调试问题19.你能解释一下 qiankun 如何实现keep-alive的需求吗?20.在使用qiankun时你如何处理js沙箱不能解决的js污染问题21.在项目中有没有单独封装组件22.在项目中发送请求怎么携带token23.工作中有用到git吗24. git版本发生冲突你怎么解决的25.如何快速让一个盒子水平垂直居中26.首屏加载白屏怎么进行优化27.路由传参 query与 params区别28.项目基础优化29.对SnextTick异步渲染的理解30.你是怎么对axios进行二次封装的有什么作用31.用戶token失效你是怎么处理的32.说一下项目的流程33.商品和增删改查34.Element-UI的form表单验证你是怎么使用的35.项目中的商品详情页你是怎么实现的36.什么是数组扁平化37.你这个项目登陆是怎么实现的38.项目中的权限管理怎么实现的39.Vue的$nextTick0方法有用到过吗40.深拷贝与浅拷贝41.在Vue是项目中如何打开新的页面42.请解释一下微前端的概念以及它的主要优点和挑战43.你能详细描述一下qiankun微前端框架的工作原理吗44.在使用qiankun时如果子应用是基于jQuery的多页应用你会如何处理静态资源的加载问题45.在使用qiankun时如果子应用动态插入了一些标签你会如何处理46.在使用qiankun时你如何处理老项目的资源加载问题你能给出一些具体的解决方案吗47.你能解释一下qiankun的start函数的作用和参数吗如果只有一个子项目你会如何启用预加载48.axios-请求中post请求的坑49. 路由传参的功能的坑50.页面缓存的坑51. vue组件动态加载的坑52. 解析后端返回的map格式数据的坑53. 更新文件缓存的坑54.h5页面打开调试日志55.获取首页链接里面的参数问题56. h5里面的搜索57.登录接口bug58.封装的请求方法不需要在传入相同的参数。59.进来不在index.htmI文件里面引I入公共的文件60.你做的项目中都使用过那些中间件呢61.你在开发过程中有什么因难点或者使用了什么技术62.会写接口吗项目你负责什么?63.你之前做过小程序吗主要包括哪些功能64.这个小程序的具体设计逻辑是怎么样的有几个人开发周期多长在你离职时这个小程序项目是否还在开发或者你离职时你们公司在开发什么65.你说你负责支付环节那么微信支付的流程是否可以简单说一下66.那好既然流程说完了那么我问你你这个项目涉及到了mb它在用戶点击支付之后的逻辑关系和表关系你是怎么理解的有多少张表表关系67.你觉得这个小程序项目的细节之处有哪些68.如何自定义tabbar?69.你刚才提到了异步在这个项目中你是否被异步坑过最后又是如何解决的70.你能描述一下渐进增强和优雅降级之间的不同吗71.为什么利用多个域名来存储网站资源会更有效72.一个页面上有大量的图片大型电商网站加载很慢你有哪些方法优化这些图片的加载给用戶更好的体验。73.一个页面从输入URL到页面加载显示完成这个过程中都发生了什么74. 前端如何进行登录身份的判断75.电商项目跟其它项目有什么不同76. 实践题77.项目开发中有遇到什么挑战没78.项目研发流程中作为前端开发一般扮演的啥角色79.现在有的项目中觉得哪些项目可以继续优化为啥没有优化?80.平时写项目总结么一般总结哪些东西81.请简单绘制登录场景的业务流程图如不熟悉登录业务也可以选择自己之前项目的业务简单说明。82.项目上线后会将index.html给后端在地址栏上输入http://www.abc.com当在地址后面缀上/layout 回车后页面会报404是否遇见过这个问题又该如何去解决?83.项目中由谁定接口公司文档如何管理由谁负责上传代码怎么上传代码的项目发布都是怎么做的84.请你说说高级前端工程师和初级以及中级有什么区别85.用过echars与highchars么你遇到哪些问题及如何解决的86.项目开发中是用什么工具来管理代码的说一下你是用过的工具用法git、svn87.讲一下最近的这个项目中都负责什么88.怎么判断是开发环境生产环境89.Vue如何在用戶没登陆的时候重定向登录界面90.Vue项目常见优化点91.异步解决方案有哪些92.移动端点击事件300ms延迟如何去掉原因是什么93.如何实现函数的柯里化比如add(1)(2)(394.什么是反柯里化95.如何避免回调地狱96.开发过程中遇到内存泄漏的问题都有哪些97.浏览器有哪些兼容问题你封装过什么插件98.假如A页面我定义了一个定时器然后跳到B页面如果让A页面的定时器暂停99.深拷贝是什么项目哪里是用到了深拷贝100.swiper插件从后台获取数据没问题css代码啥的也没问题但是图片不动应该怎么解决101.常见内存泄漏102.插入几万个dom如何实现页面不卡顿以上https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material4最后一定要记住调整面试心态把面试看作技术交流而非考试。遇到难题可诚实表达当前思考展现分析过程。面试后立即复盘查漏补缺。