马上也是快2026年了,不知道大家对于寒假前端岗实习的准备进度达到了什么程度,另外很多人都说今年面试很难,"造火箭",可信可不信吧,很多人觉得难是因为他们面试准备不足,而且个人技术积累较少,实习面试还是不难的。
今天就给大家整理一下今年最新的面试题库,由很多中大厂面经整理而来,还有飞书上大佬的整理,甚至源码笔记等!
今天内容不全是萌新入门,3-8年面试也可用!
技术点提升
《大厂性能优化详解及实操》
《Vue&工程化 面试必知必会》
《简历中项目没亮点?低代码项目实战来了!》
《4小时集训,解决简历痛点及面试全流程梳理》
《从字节面试的底层逻辑看 2-1P6 的进阶答法》
《Vite All in One Vite工程化开发实践与构建原理解析》
《突破字节前端2-1面试 掌握JS异步编程相关问题应答范式及进阶》
《New React19Features You Should Know& How toUpgrade》
《揭秘大厂工程化内核,从软件工程视角剖析编译时、运行时及打包构建三板斧》
《字节前端专家揭秘大厂React最佳实践,手把手从0打造一个开源社区前沿的组件库》
以上内容含MP4、源码笔记,紧跟实操深入进阶
以上:https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material5
飞书内容整理
场景题
1.如何判断用户设备
2.将多次提交压缩成一次提交
3.介绍下navigator.sendBeacon方法
4.混动跟随导航(电梯导航)该如何实现
5退出浏览器之前,发送积压的埋点数据请求,该如何做?
6如何统计页面的long task(长任务)【热度:140】
7.PerfoemanceObserver如何测量页面性能
8.移动端如何实现下拉滚动加载(顶部加载)
9.判断页签是否为活跃状态
10.在网络带宽一定的情况下,切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗?
11.大文件切片上传的时候,确定切片数量的时候,有哪些考量因素
12.页面关闭时执行方法,该如何做
13.如何统计用户pv访问的发起请求数量
14.长文本溢出,展开/收起如何实现
15.如何实现鼠标拖拽
16.统计全站每一个静态资源加载耗时,该如何做
17.防止前端页面重复请求
18.ResizeObserver作用是什么
19.要实时统计用户浏览器窗口大小,该如何做
20.当项目报错,你想定位是哪个commit引入的错误的时,该怎么做
21.如何移除一个指定的commit
22.如何还原用户操作流程
23.可有办法将请求的调用源码地址包括代码行数也上报上去?
24.请求失败会弹出一个toast,如何保证批量请求失败,只弹出一个toast【热度:420)
25.如何减少项目里面if-else【热度:310】
26.babel-runtime作用是啥【热度:200】
27.如何实现预览PDF文件
28.如何在划词选择的文本上添加右键菜单(划词:标滑动选择一组字符,对组字符进行操作)【热度:100】
29.富文本里面,是如何做到划词的(鼠标滑动选择一组字符,对组字符进行操作)?【热度:100】
30.如何做好前端监控方案【热度:672】
31.如何标准化处理线上用户反馈的问题【热度:631】
32.px 如何转为rem【热度:545】
33.浏览器有同源策略,但是为何cdn请求资源的时候不会有跨域限制【热度:579】
34.cookie可以实现不同域共享吗【热度:533】
35.axios是否可以取消请求【热度:532】
36.前端如何实现折叠面板效果?
37.dom里面,如何判定a元素是否是b元素的子元素【热度:400】
38.判断一个对象是否为空,包含了其原型链上是否有自定义数据或者方法。该如何判定?
39.is如何判空?「空」包含了:空数组、空对象、空字符串、0、undefined、null、空map、空set都属于为空的数据【热度:640】
40.css实现翻牌效果【热度:116】
41.flex:1代表什么【热度:400】
42.一般是怎么做代码重构的
43.如何清理源码里面没有被应用的代码,主要是JS、TS.CSS代码【热度:329】
44.前端应用如何做国际化?【热度:199】
45.应用如何做应用灰度发布【热度:247】
46.「微前端]为何通常在微前端应用隔离,不选择iframe方案【热度:280】
47.[微前端]Qiankun是如何做Js隔离的【热度:228】
48.[微前端]微前端架构一般是如何做JavaScript隔离
49.[React]循环渲染中为什么推荐不用index 做key【热度:320】
50.[React]如何避免使用context的时候,引起整个挂载节点树的重新渲染【热度:420】
51.前端如何实现截图?
52.当QPS达到峰值时,该如何处理?
53js超过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元素是否在可视区域【字节一面】
76.前端如何用canvas来做电影院选票功能【美团一面】
77.如何通过设置失效时间清除本地存储的数据?【腾讯二面】
78.如果不使用脚手架,如果用webpack构建一个自己的react应用
79.用nodejs实现一个命令行工具,统计输入目录下面指定代码的行数
80.packagejson里面sideEffects厘性的作用是啥【必会】
81.script标签上有那些厘性,分别作用是啥?【必会】
82.为什么SPA应用都会提供一个hash路由,好处是什么?
83.[{React]如何进行路由变化监听【字节一面】
84.单点登录是是什么,具体流程是什么【腾讯一面】
85.web网页如何禁止别人移除水印【百度一面】
86.用户访问页面白屏了,原因是啥,如何排查?
87.[代码实现]s中如何实现大对象深度对比
88.如何理解数据驱动视图,有哪些核心要素?【腾讯二面】
89.vue-cli都做了哪些事儿,有哪些功能?
90.JS执行100万个任务,如何保证浏览器不卡顿?【百度一面】
91.JS放在head里和放在body里有什么区别?
92.Eslint代码检查的过程是啥?【必会】
93.虎拟混动加载原理是什么,用JS代码简单实现一个虚拟滚动加载
94.[React]react-router和原生路由区别
95.html的行内元素和块级元素的区别【京东一面】
96.介绍-下requestlIdleCallback api
97.documentFragment api是什么,有哪些使用场景?【必会】
- git pull和 git fetch 有啥区别?
99.前端如何做页面主题色切换【腾讯一面】
100.前端视角-如何保证系统稳定性【字节一面]
101.如何统计长任务时间、长任务执行次数【腾讯二面】
102.V8里面的JT是什么?【京东一面]
103.用Js写一个cookies解析函数,输出结果为一个对象
104.vue 中Scoped Styles是如何实现样式隔离的,原理是啥
105.样式阿商方式有哪些【字节一面】
106.在JS中,如何解决递归导致栈溢出问题?
107.站点如何防止爬虫?【百度一面】
108.ts项目中,如何使用nodemodules里面定义的全局类型包到自己项目src下面使用?【百度二面】
109.不同标签页或窗口间的【主动推送消息机制】的方式有哪些?(不借助服务端)
110.【React】在react项目开发过程中,是否可以不用reactrouter使用浏览器原生history路由来组织页面路由?
111在表单校验场景中,如何实现页面视口滚动到报错的位置
112,如何一次性渲染十万条数据还能保证页面不卡顿【百度二面】
113.【webpack】打包时hash码是如何生成的【必会】
114.如何从0到1搭建前端基建【京东一面】
115.你在开发过程中,使用过哪些TS的特性或者能力?【美团一面】
116JS的加载会阻塞浏览器渲染吗?【百度一面】
117.浏览器对队头阻寒有什么优化?【百度一面)
118.Webpack项目中通过script 标签引入资源,在项目中如何处理?
119.应用上线后,怎么通知用户刷新当前页面?【腾讯一面】
120.Eslint 代码检查的过程是啥?
121.HTTP是一个无状态的协议,那么Web应用要怎么保持用户的登录态呢?
122.如何检测网页空闲状态(一定时间内无操作)【百度二面】
123.为什么Vite速度比Webpack快?
124.列表分页,快速翻页下的竟态问题【百度二面】
125.JS执行100万个任务,如何保证浏览器不卡顿?
126.git仓库迁移应该怎么操作
127.如何禁止别人调试自己的前端页面代码?【字节二面】
128.web系统里面,如何对图片进行优化?【必会】
129.0Auth2.0是什么登录方式
130.单点登录是如何实现的?
131.常见的登录鉴权方式有哪些?
132.需要在跨域请求中携带另外一个域名下的Cookie该如何操作?
133.vite和webpack 在热更新上有啥区别?
134.封装一个请求超时,发起重试的代码
135.前端如何设置请求超时时间timeout【必会】
136.nodejs 如何充分利用多核CPU?【字节二面】
137.后端一次性返回树形结构数据,数据量非常大,前端该如何处理?
138.你认为组件封装的一些基本准则是什么?
139.页面加载速度提升(性能优化)应该从哪些反向来思考?
140.前端日志埋点SDK设计思路
141.token进行身份验证了解多少?【腾讯一面】
142.在前端应用如何进行权限设计?【字节二面】
143.【低代码】代码平台一般泊染是如何设计的?
144.【低代码】代码平台一般底层协议是怎么设计的
145.【Webpack】有哪些优化项目的手段?
146.IndexedDB存储空间大小是如何约束的?
147.浏览器的存储有哪些【腾讯一面】
148.【Webpack】如何打包运行时chunk,且在项自工程中如何去加载这个运行时chunk?
149.为何现在市面上做表格消染可视化技术的,大多数都是canvas,而很少用svg的?
150.在你的项目中,使用过哪些webpack plugin,说一下他们的作用
151.在你的项目中,使用过哪些webpackloader,说一下他们的作用
152.【React】如何避免不必要的染?【美团一面】
153.全局样式命名冲突和样式盖问题怎么解决?
154.【React】如何实现专场动画?
155.【React】从React层面上,能做的性能优化有哪些?
156.[VUE】中为何不要把v-if和v-for同时用在同一个元素上,原理是什么?
157.将静态资源缓存在本地的方式有哪些?
158.SPA首屏加载速度慢的怎么解决
159.axios是如何区分是nodejs环境还是浏览器环境的?
160.如何拦截web应用的请求
161.前端有哪些跨页面通信方式?
162.H5下拉刷新如何实现?
163.如何修改第三方npm包?
项目细节及疑难点
- 测试和调试
2.跨域请求问题
3.数据安全和隐私保护
4.移动端触摸事件处理
5.性能优化
6.响应式布局的挑战
7.浏览器兼容性问题
8.获取首页链接里面的参数问题
9.更新文件缓存的坑
10.解析后端返回的map格式数据的坑。
11.vue组件动态加载的坑
12.页面缓存的坑。
13.路由传参的功能的坑。
- axios请求中post请求的坑。
15.为什么需要二次封装组件库?
16.请结合一个组件库设计的过程,谈谈前端工程化的思想
17.如何对一个组件库进行测试?
18.在使用qiankun时,你如何处理多个子项目的调试问题?
19.你能解释一下 qiankun 如何实现keep-alive 的需求吗?
20.在使用qiankun时,你如何处理js沙箱不能解决的js污染问题?
21.在项目中有没有单独封装组件
22.在项目中发送请求怎么携带token
23.工作中有用到git吗
- git版本发生冲突你怎么解决的
25.如何快速让一个盒子水平垂直居中
26.首屏加载白屏怎么进行优化
27.路由传参 query与 params区别
28.项目基础优化
29.对$nextTick异步渲染的理解
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.页面缓存的坑
- vue组件动态加载的坑
52.解析后端返回的map格式数据的坑
53.更新文件缓存的坑
54.h5页面打开调试日志
55.获取首页链接里面的参数问题
- h5里面的搜索
57.登录接口bug
58.封装的请求方法不需要在传入相同的参数。
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给后端,在地址栏上输入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插件从后台获取数据没问题,cs代码啥的也没问题,但是图片不动,应该怎么解决?
101.常见内存泄漏
102.插入几万个dom,如何实现页面不卡顿?
前端面试会问的题及深挖

面试官:谈谈你对BFC的理解?
面试官:CSS如何画一个三角形?原理是什么?
面试官:css选择器有哪些?优先级?哪些属性可以继承?
面试官:介绍一下grid网格布局
面试官:元素水平垂直居中的方法有哪些?如果元素不定宽高呢?
面试官:如何实现单行/多行文本溢出的省略样式?
面试官:如果要做优化,CSS提高性能的方法有哪些?
面试官:深入理解设备像素、CSS像素、设备独立像素、DPR、PPI之间的区别与适配方案
面试官:说说flexbox(弹性盒布局模型)
面试官:深入理解CSS盒子模型
面试官:谈谈你对BFC的理解?
面试官:CSS3动画有哪些?
面试官:介绍一下grid网格布局
面试官:DNS协议及完整的查询过程
面试官:为什么说HTIPS比HTTIP安全?HTIPS是如何保证安全的?
面试官:什么是HTIP? HTTP 和HTIPS 的区别?
面试官:如何理解CDN?说说实现原理?
面试官:如何理解OSI七层模型?
面试官:如何理解TCP/IP协议?
面试官:如何理解UDP和TCP?区别?应用场景?
面试官:GET和POST的区别及使用场景
面试官:说说HTTP常见的请求头有哪些?作用?
面试官:说说HTTP1.0/1.1/2.0的区别?
面试官:说说HTTP常见的状态码有哪些,适用场景?
面试官:说说TCP为什么需要三次握手和四次挥手?
面试官:说说地址栏输入URL敲下回车后发生了什么?
面试官:说说对WebSocket的理解?应用场景?
面试官:Date类:日期和时间处理
面试官:JS中的异步编程与Promise
面试官:JavaScript中的Generator函数与其在实现Async/Await的应用
面试官:JavaScript中的编码
面试官:JavaScript事件流:深入理解事件处理和传播机制
面试官:JavaScript修饰器:简化代码,增强功能
面试官:JavaScript对象
面试官:JavaScript数组
面试官:Javascript数据类型和类型转换
面试官:requestAnimationFrame:优化动画和渲染的利器
面试官:作用域和作用域链
面试官:函数上下文和this关键字
面试官:前端跨页面通信:实现页面间的数据传递与交互
面试官:原型和原型链
面试官:实现符合Promise/A+规范的Promise
面试官:异步的终极解决方案:async/await
面试官:执行上下文与闭包
面试官:深入理解Proxy
面试官:详解Cookie,Session,SessionStorage,LocalStorage
面试官:面向对象编程与Class
面试官:说说linux系统下常用的命令有哪些?
面试官:TS实战之扑克牌排序
面试官:函数
面试官:命名空间和模块
面试官:扩展类型定义
面试官:接口和类
面试官:枚举和泛型
面试官:泛型和类型体操
面试官:说说你对TypeScript的认识?
面试官:说说flexbox(弹性盒布局模型)
面试官:说说Git常用的命令有哪些?
面试官:探索现代图片格式:从GIF到HEIF,优势与适用场景一览
面试官:Node性能如何进行监控以及优化?
面试官:如何实现jwt鉴权机制?说说你的思路
面试官:如何实现文件上传?说说你的思路
面试官:如果让你来设计一个分页功能,你会怎么设计?前后端如何交互?

面试官:Node文件查找的优先级与Require方法的文件查找策略
面试官:Nodejs 中有哪些全局对象?
面试官:说说Node中的EventEmitter?如何实现一个EventEmitter?
面试官:说说你对Nodejs的理解?优缺点?应用场景?
面试官:说说对Node中的Buffer的理解?应用场景?
面试官:说说对Node中的Stream的理解?应用场景?
面试官:说说对Node中的fs模块的理解?有哪些常用方法
面试官:说说对Node中的process 的理解?有哪些常用方法?
面试官:说说对Nodejs中的事件循环机制理解?
面试官:说说对中间件概念的理解,如何封装node中间件?
面试官:React中的key有什么作用?
面试官:React中组件之间如何通信?
面试官:React事件绑定的方式有哪些?区别?
面试官:React构建组件的方式有哪些?区别?
面试官:state和props有什么区别?
面试官:super0和super(props)有什么区别?
面试官:你在React项目中是如何使用Redux的?项目结构是如何划分的?
面试官:在react中组件间过渡动画如何实现?
面试官:说说React 性能优化的手段有哪些?
面试官:说说React生命周期有哪些不同阶段?每个阶段对应的方法是?
面试官:说说React中的setState执行机制
面试官:说说Real DOM和Virtual DOM的区别?优缺点?
面试官:说说React JSX转换成真实DOM过程?
面试官:说说React Router有几种模式?实现原理?
面试官:说说React diff的原理是什么?
面试官:说说React render方法的原理?在什么时候会被触发?
面试官:说说React服务端渲染怎么做?原理是什么?
面试官:说说React的事件机制?
面试官:说说react中引入css的方式有哪几种?区别?
面试官:说说你在React项目是如何捕获错误的?
面试官:说说你在使用React过程中遇到的常见问题?如何解决?
面试官:说说你对React Router的理解?常用的Router组件有哪些?
面试官:说说你对Redux的理解?其工作原理?
面试官:说说你对immutable的理解?如何应用在react项目中?
面试官:说说你是如何提高组件的渲染效率的?在React中如何避免不必要的render?
面试官:说说对React的理解?有哪些特性?
面试官:说说对Fiber架构的理解?解决了什么问题?
面试官:说说对React Hooks的理解?解决了什么问题?
面试官:说说对React refs的理解?应用场景?
面试官:说说对React中类组件和函数组件的理解?有什么区别?
面试官:说说对Redux中间件的理解?常用的中间件有哪些?实现原理?
面试官:说说对受控组件和非受控组件的理解?应用场景?
面试官:说说对高阶组件的理解?应用场景?
面试官:SPA首屏加载速度慢的怎么解决?
面试官:SSR解决了什么问题?有做过SSR吗?你是怎么做的?
面试官:Vue.observable你有了解过吗?说说看
面试官:Vue中的SnextTick有什么作用?
面试官:Vue中的过滤器了解吗?过滤器的应用场景有哪些?
面试官:Vue中组件和插件有什么区别?
面试官:Vue实例挂载的过程
面试官:Vue常用的修饰符有哪些有什么应用场景
面试官:Vue组件之间的通信方式都有哪些?
面试官:Vue项目中你是如何解决跨域的呢?
面试官:Vue项目中有封装过axios吗?主要是封装哪方面的?
面试官:v-if和v-for的优先级是什么?
面试官:v-show和v-if有什么区别?使用场景分别是什么?
面试官:vue3有了解过吗?能说说跟vue2的区别吗?
面试官:vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
面试官:vue项目本地开发完成后部署到服务器后报404是什么原因呢?
面试官:为什么data属性是一个函数而不是一个对象?
面试官:什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
面试官:你了解axios的原理吗?有看过它的源码吗?
面试官:你了解vue的diff算法吗?说说看
面试官:你对SPA单页面的理解,它的优缺点分别是什么?如何实现SPA应用呢
面试官:你是怎么处理vue项目中的错误的?
面试官:你有写过自定义指令吗?自定义指令的应用场景有哪些?
面试官:你知道vue中key的原理吗?说说你对它的理解
面试官:动态给vue的data添加一个新的属性时会发生什么?怎样解决?
面试官:双向数据绑定是什么
面试官:有使用过vue吗?说说你对vue的理解
面试官:说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢?
面试官:说说你对keep-alive的理解是什么?
面试官:说说你对slot的理解?slot使用场景有哪些?
面试官:说说你对vue的mixin的理解,有什么应用场景?
面试官:请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?
面试官:Vue3.0所采用的Composition Api与Vue2x使用的Options Api有什么不同?
面试官:Vue3.0性能提升主要是通过哪几方面体现的?
面试官:Vue3.0的设计目标是什么?做了哪些优化
面试官:Vue3.0里为什么要用Proxy API替代defineProperty API?
面试官:用Vue3.0写过组件吗?如果想实现一个Modal你会怎么设计?
面试官:说说Vue3.0中Treeshaking特性?举例说明一下?
面试官:与webpack类似的工具还有哪些?区别?
面试官:如何提高webpack的构建速度?
面试官:说说Loader和Plugin的区别?编写Loader,Plugin的思路?
面试官:说说webpack proxy工作原理?为什么能解决跨域?
面试官:说说webpack中常见的Loader?解决了什么问题?
面试官:说说webpack中常见的Plugin?解决了什么问题?
面试官:说说webpack的构建流程?
面试官:说说webpack的热更新是如何做到的?原理是什么?
面试官:说说你对Webpack的理解?解决了什么问题?
面试官:说说如何借助webpack来优化前端性能?
面试官:请你谈谈微信小程序的实现原理?
面试官:说说微信小程序的生命周期函数有哪些?
面试官:说说你对微信小程序的理解?优缺点?
面试官:说说微信小程序中路由跳转的方式有哪些?区别?
面试官:说说微信小程序的支付流程?
面试官:说说微信小程序的登录流程?
面试官:说说提高微信小程序的应用速度的手段有哪些?
面试官:为什么需要二次封装组件库?
面试官:请结合一个组件库设计的过程,谈谈前端工程化的思想
面试官:如何对一个组件库进行测试?
面试官:Element-Ul的多语言方案是怎么设计的?
面试官:组件库如何实现在线主题定制的?
面试官:组件库的类型定义应该怎样设计?
面试官:组件库的渐进升级策略应该怎么设计?
面试官:组件库的按需加载实现中存在哪些潜在问题,如何解决?
面试官:样式如何实现真正的按需加载?避免样式重复打包?

前端项目难点亮点
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文件正常样式写在</script>中,会被自动加上一个[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动态引入文件。
以上:https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material5
感谢大家的de观看阅读,谢谢大家