26年前端面试项目深挖1000页(面试题库及完整答案)

118 阅读11分钟

现在的前端面试没有一本一眼的复制式面试流程,接下来的面试组成部分:场景题,八股原理及深挖,以及项目细节难点和深挖。

今天整理的就是一些高重复率的项目深挖!

前端项目难点亮点

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默认参数格式是字符串,传给后端的数据需要用请求拦截器做处理。可以引I入qs库,对data进行处理:qs.stringify。Qs装axios的时候自动安装了。

5.路由懒加载

需要的时候进行加载,把不同路由对应的组件分成不同代码块,路由被访问才加载对应组件。路由会定义很多页面,页面打包后放到单独的js文件会导致非常大,懒加载把页面进行划分,需要时才加载,减少首页加载速度,懒加载主要就是把对应组件打包成js代码块进入首屏不用加载过度的资源,从而减少首屏加载速度。就是用import,在路由配置的router.js,import设置好的组件,from后面写的是组件的路径

6.实现从详情页返回列表页保存上次加载的数据和自动还原上次的浏览位置。

vue2中提供了keep-alive。keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素,当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行被包裹在keep-alive中的组件的状态将会被保留,例如我们将某个列表类组件内容滑动到第100条位置,那么我们在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧会保持在第100条列表处。如果要每次进入组件时页面初始位置都是顶部,可以用路由提供的基础功能scrollBehavior

7.Storage封装

Storage存储在浏览器端不参与和服务器的通信,本身有api,localStorage跨页面传参,sessionStorage保存临时数据,防止刷新页面后丢失参数。本身api只是简单的key/value形式,且只存储字符串,需要人工转为json,也不能单个清空,所以对Storage封装,便于更好的操控Storage.向Storage添加参数和模块

4)Proxy实现跨域(vue项目)

在vue.config.js里面设置好proxy,里面写’/api'{作为拦截,里面写好target:后端的接口网址,changeOrigin:true,pathRewrite:{}

9.断网处理

断网时会更新vue中network的状态,根据network状态判断是否需要加载断网组件,断网情况就加载断网组件,不加载对应页面组件,点击刷新,就跳转refresh页面然后立刻返回来实现重新获取数据,所以新建refresh.vue,在beforeRouteEnter钩子种返回当前页面。

10.scoped时修改子组件样式

vue文件正常样式写在中,会被自动加上一个[data-v-xxxx]属性,但是第三方组件内部标签没有编译为这个属性,所以不能修改这个第三方组件。为了父组件不影响子组件,用scoped,有一个方法是给第三方组件写class,然后在公共css或者当前页面写一个没有scoped的style,直接在里面修改第三方组件的样式,但是存在全局污染和命名冲突,约定的那个特殊的命名方式可以避免命名冲突。查找资料发现可以用深度选择器解决。深度选择器用/deep/,用到ElemntUI,又有预处理器就可以用..v-deep。vue中过多使用scoped导致页面打包文件体积增大。通常能写在index中的样式尽量写在index中,我们可以通过在index样式中通过外层组件添加唯一class来区分组件+第三方样式来实现了类似于scoped的效果,又方便修改各种第三方组件的样式。

11.跳转页面后停止定时器

通过$once事件侦听器在定义完定时器之后的位置清除定时器

12.v-model进行父子组件双向数据绑定

v-model是语法糖,可以用来实现全局弹窗组件,v-model控制弹窗的显示隐藏,可以在子组件用model选项来绑定值:

12.页面加载的时候发现页面空白

1)JS异常

在头部加载JS,导致页面渲染被阻塞了

2)客户端请求异常

无效请求,错误路径。vue路由配置错误,比如没有配置路由,路由指向页面是空白页,配置了2个重复路由,app.vue没有防止路由占位符。

3)服务器异常

无法正常找到服务器资源,或者服务器死机(502)

4)网络问题

DNS解析异常(没办法解析出IP地址),连接超时,请求资源较大,设置连接时长,网速慢得时候无法下载完页面资源,导致页面空白。CDN服务器异常,导致上面的资源无法正常进行/加载。

13.解决vuex持久化

情景时列表页跳转到详情页,详情页是新窗口,2个窗口都用到vuexstate,比如共享同一个id数组,修改state数据之后,详情页不能实时更新state数据,只能用缓存解决,比如localStorage,也有组件vuex-persistedstate,把vuex数据动态更新成storage。

14.使用history模式后访问内容页,刷新会404

需要后端重定向配置服务器。

15.菜单权限用动态添加路由addRoutes解决

有一个公共路由,登录后获取权限,得到需要动态添加的路由表,把路由添加到router里。实现方式是提前定义好完整的路由表,然后跟后台传输的权限做对比,过滤出一个路由权限表,再用addRoutes动态添加到路由里。然后根据过滤出的路由权限表渲染侧边栏。

16.vue项目中用v-for循环本地图片,图片不显示

需要把图片放到static文件夹,或者用requires动态引入文件。

2025年前端项目细节及疑难点

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.在项目中发送请求怎么携带token
23.工作中有用到git吗
24.git 版本发生冲突你怎么解决的
25.如何快速让一个盒子水平垂直居中
26.首屏加载白屏怎么进行优化
27.路由传参query与 params区别
28.项目基础优化
29.对nextTick异步渲染的理解30.你是怎么对axios进行二次封装的,有什么作用31.用戶token失效你是怎么处理的32.说一下项目的流程33.商品和增删改查34.ElementUIform表单验证你是怎么使用的35.项目中的商品详情页你是怎么实现的36.什么是数组扁平化37.你这个项目登陆是怎么实现的38.项目中的权限管理怎么实现的39.VuenextTick异步渲染的理解** **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.登录接口bug
58.封装的请求方法不需要在传入相同的参数。
59.进来不在index.html文件里面引入公共的文件
60.你做的项目中都使用过那些中间件呢?
61.你在开发过程中有什么因难点(或者使用了什么技术)
62.会写接口吗?项目你负责什么?
63.你之前做过小程序吗?主要包括哪些功能?
64.这个小程序的具体设计逻辑是怎么样的?有几个人开发?周期多长?在你离职时,这个小程序项目是否还在开发?或者你离职时,你们公司在开发什么?
65.你说你负责支付环节,那么微信支付的流程是否可以简单说一下?
66.那好,既然流程说完了,那么,我问你,你这个项目涉及到了rmb,它在用戶点击支付之后的逻辑关系和表关系你是怎么理解的?有多少张表?表关系?
67.你觉得这个小程序项目的细节之处有哪些?
68.如何自定义tabbar?
69.你刚才提到了异步,在这个项目中你是否被异步坑过,最后又是如何解决的?
70.你能描述一下渐进增强和优雅降级之间的不同吗?
71.为什么利用多个域名来存储网站资源会更有效?
72.一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用戶更好的体验。
73.一个页面从输入URL到页面加载显示完成,这个过程中都发生了什么?
74.前端如何进行登录身份的判断
75.电商项目跟其它项目有什么不同?
76.实践题
77.项目开发中有遇到什么挑战没?
78.项目研发流程中作为前端开发一般扮演的啥角色?
79.现在有的项目中觉得哪些项目可以继续优化,为啥没有优化?
80.平时写项目总结么,一般总结哪些东西?
81.请简单绘制登录场景的业务流程图,如不熟悉登录业务,也可以选择自己之前项目的业务简单说明。
82.项目上线后,会将index.html给后端,在地址栏上输入www.abc.com,当在地址后面缀上/layout 回车后,页面会报404,是否遇见过这个问题,又该如何去解决?
83.项目中由谁定接口,公司文档如何管理,由谁负责上传代码,怎么上传代码的,项目发布都是怎么做的?
84.请你说说高级前端工程师和初级以及中级有什么区别?
85.用过echars与highchars么,你遇到哪些问题及如何解决的
86.项目开发中是用什么工具来管理代码的;说一下你是用过的工具用法(git.svn)
87.讲一下最近的这个项目中都负责什么
88.怎么判断是开发环境生产环境
89.Vue如何在用戶没登陆的时候重定向登录界面?
90.Vue项目常见优化点
91.异步解决方案有哪些?
92.移动端点击事件300ms延迟如何去掉?原因是什么?
93.如何实现函数的柯里化?比如add(1)(2)(3)
94.什么是反柯里化
95.如何避免回调地狱?
96.开发过程中遇到内存泄漏的问题都有哪些?
97.浏览器有哪些兼容问题,你封装过什么插件
98.假如A页面我定义了一个定时器,然后跳到B页面如果让A页面的定时器暂停
99.深拷贝是什么?项目哪里是用到了深拷贝?
100.swiper插件从后台获取数据没问题,css代码啥的也没问题,但是图片不动,应该怎么解决?
101.常见内存泄漏
102.插入几万个dom,如何实现页面不卡顿?

github.com/encode-stud…

今天的内容就到这里了,如果觉得不错,对你有帮助的话,麻烦帮我点个小心心支持一下哈~

最后预祝大家12月或者26年初拿下心仪的offer!