满怀期待地投出简历，精心准备了半个月，自认为八股文背得滚瓜烂熟，项目经历也能倒背如流。3月的第一场面试，我信心满满地打开视频，结果——被虐得体无完肤，整整恶心了一周。
不是说前端面试就是问问Vue生命周期、flex布局、闭包吗？
我遇到的面试官，上来就是一套组合拳：
- 手写Promise.all？ 我写了，他追问：“如果其中一个Promise抛异常，但不影响其他Promise，怎么设计？”
- 实现一个EventBus？ 我写了，他追问：“如何保证on和off的健壮性？如果有重复订阅怎么去重？”
- React Fiber架构了解吗？ 我背了概念，他追问：“Fiber是如何实现时间切片的？如果任务执行时间过长会怎样？”
- 从输入URL到页面展示？ 我讲了DNS、TCP、渲染，他追问：“浏览器是如何解析CSS选择器的？回流和重绘的具体触发条件有哪些？你怎么用代码强制触发重绘？”
每一个问题都像剥洋葱，剥完一层还有一层，直到我哑口无言。
最恶心的是，问完基础，又扔过来一个场景题：
“假如你是一个大型电商项目的前端负责人，首页有几十个模块，首屏加载需要3秒以上，你怎么优化？从工程化、网络、渲染、代码层面，给出至少5条具体方案，并说明优先级和预期收益。”
我大脑一片空白，支支吾吾挤出几条，面试官微微一笑：“还有吗？”
还有？我当时就想关视频走人。
更离谱的是，面试最后还让手写一道LeetCode hard：实现一个带过期时间的LRU缓存。
我写完，他看了看说：“时间复杂度O(1)吗？怎么证明？”
全程90分钟，我感觉像被扒了一层皮。面完HR问“感觉怎么样”，我只能苦笑：“被恶心到了。”
后来我才知道，现在的前端面试已经不是考察你会不会干活，而是考察你有没有深度、有没有广度、有没有工程化思维、有没有场景应变能力。八股文只是入场券，手写题、设计题、场景题、源码分析才是真正的拦路虎。
这次面试给我留下了深深的阴影，但也让我明白：如果不系统地把整个前端知识体系打通，随便一个追问就能让你原形毕露。
现在想起来，依然觉得恶心——但恶心归恶心，该学的还是得学，该刷的还是得刷。毕竟，面试官不会因为你觉得恶心就放你一马。
虽然拿到了offer，但是这种情况下的面试足矣卡住很多人，上次有人问我能否把我准备的刷题资源借鉴一下，今天就抽空都整理了出来，本来3月这个求职旺季，还是希望能赠人玫瑰，手里余香，以至于未来或许也有同样的好心人帮扶一把
刷题文档资源目录展示
由困难中等简单三层分级，可以供面试和学习双用，而且分类比较全面，大厂会问的leetcode也有，省了很多找资料的麻烦！！！
2.飞书资源
- JavaScript (323题)
1.不会冒泡的事件有哪些？
- mouseEnter 和mouseOver 有什么区别？
3.MessageChannel是什么，有什么使用场景?
- async、await 实现原理
5.Proxy能够监听到对象中的对象的引用吗？
6.如何让var [a, b]= {a: 1, b: 2}解构赋值成功？
7.下面代码会输出什么？
8.描述下列代码的执行结果
9.什么是作用域链？
10.bind、call，apply有什么区别？如何实现一个bind?
11.common.js和es6中模块引I入的区别？
12.说说vue3中的响应式设计原理
13.script标签放在header里和放在body底部里有什么区别？
14.下面代码中，点击"+3”按钮后，age的值是什么？
15.Vue中，created和mounted两个钩子之间调用时间差值受什么影响？
16.vue中，推荐在哪个生命周期发起请求？
17.为什么Node在使用esmodule时必须加上文件扩展名？
18.package.json文件中的devDependencies 和dependencies对象有什么区别?
19.React Portals 有什么用?
- react 和 react-dom是什么关系？
21.MessageChannel是什么，有什么使用场景？
22.React 中为什么不直接使用requestIdleCallback?
23.为什么react需要fiber 架构，而Vue 却不需要？
24.子组件是一个Portal，发生点击事件能冒泡到父组件吗？
25.async、await 实现原理
26.前端性能优化指标有哪些？怎么进行性能检测？
27.Proxy能够监听到对象中的对象的引用吗？
28.css 中的 animation、transition、transform 有什么区别？
29.使用Promise实现红绿灯交替重复亮
30.如何让 var [a,b]= {a: 1, b: 2} 解构赋值成功？
31.React 为什么要废弃componentWillMount.componentWillReceiveProps、componentWillUpdate这三个生..
32.说说React render方法的原理？在什么时候会被触发？
33.下面代码会输出什么？
2. CSS (61题）
- css 中的 animation、transition、transform 有什么区别？
2.怎么做移动端的样式适配？
3.相邻的两个inline-block节点为什么会出现间隔，该如何解决?
- 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之间有什么区别？
23.说说你对盒子模型的理解
24.怎么实现样式隔离？
25.flex布局下，怎么改变元素的顺序？
26."flex: auto;“是什么意思？
- object-fit 用法
28.行内元素和块级元素有什么区别
29.em/px/rem/vh/vw这些单位有什么区别?
30.html和css中的图片加载与渲染规则是什么样的？
31.CSS中，有哪些方式可以隐藏页面元素？有什么区别？
32.CSS3中transition和animation 的属性分别有哪些？
33.说说对CSS预编语言的理解，以及它们之间的区别
3. HTML(57题）
1.什么是DOM 和 BOM?
2.简单描述从输入网址到页面显示的过程
3.一台设备的dpr，是否是可变的？
4.前端该如何选择图片的格式？
5.前端跨页面通信，你知道哪些方法？
6.说说你对 Dom 树的理解
7.行内元素有哪些？块级元素有哪些？空(void)元素有那些？
8.html和css中的图片加载与渲染规则是什么样的？
9.title与h1的区别、b与strong的区别、与em的区别？
10.script 标签为什么建议放在body标签的底部(defer、async)
11.说说你对SSG的理解
12.什么是HTML5，以及和HTML的区别是什么？
13.什么是渐进增强和优雅降级？
- Node和 Element 是什么关系？
15.导致页面加载白屏时间长的原因有哪些，怎么进行优化？
16.如何控制input 输入框的输入字数？
17.渐进式jpg有了解过吗？
18.假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？
19.怎么实现”点击回到顶部”的功能？
20.SPA应用怎么进行SEO?
21.如何实现SEO优化
- SEO是什么？
23.SEO的原理是什么？
24.DNS预解析是什么？怎么实现？
25.HTML5 有哪些drag 相关的API？
26.浏览器乱码的原因是什么？如何解决？
27.Canvas和sVG有什么区别？
28.浏览器是如何对HTML5的离线储存资源进行管理和加载？
29.HTML5的离线储存怎么使用，它的工作原理是什么
30.img的srcset属性的作用？
31.label标签有什么用？
32.js和css是如何影响DOM树构建的？
33.CSSOM树和DOM树是同时解析的吗？
4. React(83题）
1.下面代码中，点击"+3”按钮后，age 的值是什么？
-
React Portals 有什么用?
-
react 和react-dom是什么关系?
-
React 中为什么不直接使用requestIdleCallback?
5.为什么react 需要 fiber 架构，而Vue 却不需要？
6.子组件是一个Portal，发生点击事件能冒泡到父组件吗？
- React 为什么要废弃componentwillMount.componentwillReceiveProps、componentWillUpdate 这三个生.
8.说说Reactrender方法的原理？在什么时候会被触发？
9.说说Reac事件和原生事件的执行顺序
10.说说对受控组件和非受控组件的理解，以及应用场景？
11.你在React项目中是如何使用Redux的？项目结构是如何划分的？
12.说说对Redux中间件的理解？常用的中间件有哪些？实现原理？
13.说说你对Redux的理解？其工作原理？
14.说说你对immutable的理解？如何应用在react项目中？
15.说说ReactJsx转换成真实DOM过程？
16.说说你在React项目是如何捕获错误的？
17.说说React服务端渲染怎么做？原理是什么？
18.React Fiber是如何实现更新过程可控？
19.Fiber为什么是React性能的一个飞跃？
20.setState是同步，还是异步的？
21.简述下React的事件代理机制？
22.简述下React的生命周期？每个生命周期都做了什么？
23.为什么不能在循环、条件或嵌套函数中调用Hooks？
24.说说你对useContext 的理解
25.说说你对useMemo的理解
26.说说你对自定义hook的理解
27.如何让useEffect 支持 async/await?
28.我们应该在什么场景下使用useMemo和useCallback？
29.说说你对React Hook的闭包陷阱的理解，有哪些解决方案？
30.React18新特性
31.React中，怎么实现父组件调用子组件中的方法？
32.你常用的 React Hooks 有哪些?
33.说说你对useReducer的理解
5.Vue(80题）
- Vue有了数据响应式，为何还要diff？
2.vue3为什么不需要时间分片?
3.vue3为什么要引入Composition API？
- 谈谈 Vue 事件机制，并手写off、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中computed和watch区别
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项目中的错误的？
26.Vue项目如何进行部署？是否有遇到部署服务器后刷新404问题？
27.Vue项目中如何解决跨域问题？
28.Vue怎么实现权限管理？控制到按钮级别的权限怎么做？
29.大型项目中，Vue项目怎么划分结构和划分组件比较合理呢？
30.Vue项目中有封装过axios吗？怎么封装的?
31.说说vue中的diff算法
32.什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路
33.说说你对Vue中keep-alive的理解
- Vue.observable是什么？
8. Node.js（27题）
1.common.js和es6中模块引入的区别？
2.为什么Node在使用esmodule时必须加上文件扩展名？
3.浏览器和Node中的事件循环有什么区别？
4.Node性能如何进行监控以及优化？
5.如果让你来设计一个分页功能，你会怎么设计？前后端如何交互？
6。如何实现文件上传？说说你的思路
7.如何实现jwt鉴权机制？说说你的思路
8.说说对中间件概念的理解，如何封装node中间件？
9.说说Node文件查找的优先级以及Require方法的文件查找策略？
10.说说对Nodejs中的事件循环机制理解？
11.说说Node中的EventEmitter? 如何实现一个EventEmitter?
12.说说对Node中的Stream的理解？应用场景？
13.说说对Node中的Buffer 的理解？应用场景？
14.说说对Node中的fs模块的理解？有哪些常用方法
15.说说对Node中的process的理解？有哪些常用方法?
16.Node.js 有哪些全局对象？
17.说说你对Node.js的理解？优缺点？应用场景？
18.body-parser这个中间件是做什么用的？
19.Koa中，如果一个中间件没有调用await next(O)，后续的中间件还会执行吗？
20.在没有async await的时候，koa是怎么实现的洋葱模型？
21.koa框架中，该怎么处理中间件的异常？
- Node.js 如何调试?
23.说说你对koa洋葱模型的理解
24.pm2守护进程的原理是什么？
25.koa和express有哪些不同？
26.两个Node.js进程如何通信？
27.npm是什么？
9. TypeScript(46题）
1.说说对TypeScript 中命名空间与模块的理解？区别？
-
说说你对 typescript 的理解？与javascript 的区别？
-
Typescript中泛型是什么？
4.TypeScript中有哪些声明变量的方式?
5.什么是Typescript的方法重载?
6.请实现下面的sleep 方法
- typescript 中的 is关键字有什么用?
8.TypeScript支持的访问修饰符有哪些？
9.请实现下面的myMap方法
10.请实现下面的 treePath 方法
11.请实现下面的 product 方法
12.请实现下面的 myAll方法
13.请实现下面的 sum 方法
14.请实现下面的 mergeArray方法
15.实现下面的 firstSingleChar 方法
16.实现下面的 reverseWord 方法
17.如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型？
18.请补充objToArray 函数
19.使用TS实现一个判断传入参数是否是数组类型的方法
20.TypeScript的内置数据类型有哪些？
21.ts中any和unknown有什么区别？
22.如何将unknown类型指定为一个更具体的类型？
23.使用ts实现一个判断入参是否是数组类型的方法？
24.tsconfig.json文件有什么用？
25.TypeScript中的 Declare关键字有什么用？
26.解释一下TypeScript中的枚举。
27.TypeScript 的主要特点是什么？
28.TypeScript中的方法重写是什么？
29.什么是TypeScript映射文件?
30.TypeScript中的类型有哪些？
31.如何检查TypeScript中的nullQundefined？
32.如何在TypeScript中实现继承？
33.什么是TypeScript Declare关键字?
34.TypeScript和JavaScript的区别是什么？
10. 性能优化（25题）
1.script标签放在header里和放在body底部里有什么区别？
2.前端性能优化指标有哪些？怎么进行性能检测？
3.SPA(单页应用）首屏加载速度慢怎么解决？
4.如果使用CSS提高页面性能？
5.怎么进行站点内的图片性能优化？
6.虚拟DOM一定更快吗？
7.有些框架不用虚拟dom，但是他们的性能也不错是为什么？
8.如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？
9.讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理
10.页面加载的过程中，JS文件是不是一定会阻塞DOM和CSSOM的构建？
11.React.memo0和useMemo0的用法是什么，有哪些区别？
12.导致页面加载白屏时间长的原因有哪些，怎么进行优化？
13.如果一个列表有100000个数据，这个该怎么进行展示？
14.DNS预解析是什么？怎么实现？
15.在React中可以做哪些性能优化?
16.浏览器为什么要请求并发数限制？
17.如何确定页面的可用性时间，什么是PerformanceAPI?
18.谈谈对window.requestAnimationFrame 的理解
19.css加载会造成阻塞吗？
20.什么是内存泄漏？什么原因会导致呢？
21.如何用webpack来优化前端性能
22.说说常规的前端性能优化手段
23.什么是Css Sprites?
24.CSS优化、提高性能的方法有哪些？
25.script 标签中，async 和defer两个属性有什么用途和区别？
14.编程题(50题）
1.使用Promise实现红绿灯交替重复亮
- bind、callapply 有什么区别？如何实现一个bind?
3.利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符串aabccccaaa会变为a...
4.说说new操作符具体干了什么？
5.如何实现上拉加载，下拉刷新？
6.大文件怎么实现断点续传？
7.什么是防抖和节流，以及如何编码实现？
8.说说ajax的原理，以及如何实现?
9.深拷贝浅拷贝有什么区别？怎么实现深拷贝？
10.用js实现二叉树的定义和基本操作
11.如何实现一个轮播图组件？
12.写出一个函数trans，将数字转换成汉语的输出，输入为不超过10000亿的数字。
13.将下面的数组转成树状结构
14.编写一个vue组件，组件内部使用插槽接收外部内容，vmodel双向绑定，实现折叠展开的功能
15.实现lodash的set和get方法
16.去除字符串中出现次数最少的字符，不改变原字符串的顺序。
17.实现一个批量请求函数，要求能够限制并发量
18.树转数组
19.数组转树
20.删除链表的一个节点
21.请实现一个函数，要求能在页面请求很多时，尽可能快地按照顺序输出返回的结果。
22.实现一个请求函数：fetchWithRetry，要求会最多自动重试3次，任意一次成功就直接返回
23.链表中，环的入口节点
24.多叉树指定层节点的个数
25.请手写”快速排序”
26.使用js实现有序数组原地去重
27.计算出下面数组中的平均时间
28.实现compose函数，类似于koa的中间件洋葱模型
29.请按以下要求实现方法f：遇到退格字符就删除前面的字符，遇到两个退格就删除两个字符
- Promise 的 finally 怎么实现的?
31.实现一个函数，可以间隔输出
32.不定长二维数组的全排列
33.两个字符串对比，得出结论都做了什么操作，比如插入或者删除
34.实现一个方法，从某个数值数组中，获取最小正数（非零非负数）的索引值
16.工程化（34题）
- package.json文件中的devDependencies 和dependencies对象有什么区别？
2.webpack 5 的主要升级点有哪些？
- 说下Vite的原理
4.与webpack类似的工具还有哪些？区别？
5.说说如何借助webpack来优化前端性能？
6.说说webpack proxy工作原理？为什么能解决跨域？
7.说说webpack的热更新是如何做到的？原理是什么？
8.面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路？
9.说说webpack中常见的Plugin？解决了什么问题？
10.说说webpack中常见的Loader？解决了什么问题?
11.说说webpack的构建流程?
12.说说你对webpack的理解？解决了什么问题？
13.webpack loader 和 plugin 实现原理
14.如何提高webpack的构建速度？
15.说说 webpack-dev-server 的原理
16.你对 babel了解吗，能不能说说几个stage代表什么意思？
- webpack的module，bundle、chunk分别指的是什么？
18.什么是CI/CD?
19.说说你对前端工程化的理解
20.说说你对 SSG 的理解
21.聊聊 vite和webpack 的区别
22.webpack treeShaking机制的原理是什么？
23.介绍一下 tree shaking 及其工作原理
24.前后端分离是什么？
25.Babel的原理是什么
26.webpack的热更新是如何做到的？说明其原理
27.如何提高webpack的打包速度
28.如何用webpack来优化前端性能
29.webpack的构建流程是什么
30.webpack的Loader和Plugin的不同
31.webpack有哪些常见的Plugin
32.webpack.rollup、parcel优劣
33.Webpack中loader的作用是什么，以及常用loader有哪些
34.谈谈你对Webpack的认识
