简介

本科两年多前端开发经验，常用技术栈Vue+TypeScript。

换工作的原因：想着趁自己还年轻，不能老是在一家公司混吃等死😂毕业之后没有再面试过，想去外面看看机会，合适就溜，不合适就接受一下社会的毒打认清自身的差距踏实的学习(其实这是最初真实的想法)！

最终结果：通过了百度、字节、滴滴、58等岗位的面试。

观前提醒：本篇文章仅为记录+分享，提及的问题都有自己粗略的总结，我把能凑合看的都加上了链接，但不保证其正确性而且肯定比较主观，所以希望大家带着质疑和自己的理解辩证的去看。如果有错误的地方欢迎各位大佬指出一起讨论～

JS基础（基础永远是最重要的）

1. js闭包
2. JS中箭头函数和普通函数区别：
3. JS作用域和作用域链：
4. JS中如何判断this指向：
5. Object.is()与比较操作符“===”、“==”的区别及隐式类型转换：
6. JS中0.1 0.2 != 0.3：
7. 服务端渲染（SSR）的理解：
8. async 和 defer的区别：
9. JS区分对象和数组的方法：
10. Promise理解和实现：
11. js中判断类型的方式，以及typeof 的实现原理
12. Array.prototype.reduce------累加器
13. ES6常见的十大特性
14. JS执行顺序自测
15. 深｜浅拷贝
16. 事件循环机制
17. settimeout和requestAnimationFrame
18. Map和Set的区别,Map和object的区别
19. 对generator的了解
20. Es6常用数组api积累
21. instanceof的实现原理
22. 单例模式
23. 手写bind和call或者apply
24. New操作符的作用及实现
25. 函数柯里化
26. JS原型链和原型链

网络相关

1. XSS和CFRS----浏览器安全
2. 跨域，引起跨域的原因，跨域常见的解决方案，手写一下JSONP的实现
3. cookie的了解
4. CDN为何可以为网页加速？
5. http1.0、1.1、2.0、3.0相关
6. websocket建立链接的过程
7. 强缓存和协商缓存整个流程
8. https
9. 网络请求的参数及含义
10. OSI的七层模型

CSS:

css部分考核确实比较少，主要是细节，这个平时注意积累一下即可，毕竟面试的时候答不出来挺尴尬的可能还会影响自己的心态。

1. opacity、visibility、display将元素隐藏属性的对比
2. 实现左右固定中间自适应，至少说出三种方式
3. 画一个三角形，你能想出几种方式
4. translate、transform、transition分别是什么
5. flex的基本用法，它是哪些属性的简写，分别对应的默认值是什么？
6. 画一条0.5px的线

HTML

在框架满天飞的今天我们可能越来越忽略了HTML认为它不过就是一堆标签，但不要忘了作为前端归根结底就是学习HTML、CSS和JS这才是前端的三大基石！在本次面试中让我印象比较深刻的是面淘宝时面试官就HTML和我聊了将近半个多小时，很遗憾当时的面经后续整理的不太细致，因为当时比较明显的发现这是他的一个KPI任务，但仍然很感谢和面试官有这么一场交流。

1. BFC
2. 事件捕获和事件冒泡机制
3. 标签相关问题总结
4. 移动端适配px、vw、rem的原理与实现

vue

建议关键的位置看一下源码实现，这一部分尽量看完之后有点自己的总结，然后再对比大佬们的总结可能更好理解。假如完全硬记的话可能面试官稍微一聊深点就没法继续了....

1. nextTick原理
2. vue2和vue3的差异性(一般问这个双向绑定肯定要清晰的说出区别和原理，但其他的也要知道，如生命周期、diff算法的提示、ts的支持等等)
3. vue父子组件之间传值的方式(至少说5种以上)
4. watch和computed的区别和使用场景
5. keep-alive的原理，使用有什么问题？如何解决？
6. vue模板（template）里为什么不能使用多个头结点？
7. Vue优化的常用手段
8. vue生命周期(2和3的区别，每个生命周期做了哪些事)
9. vue2中具体是如何处理数组的，如何重写的push方法，让其就算push也可以触发回调
10. Virtual DOM
11. vuex原理
12. 路由简介
13. vue router hash和history模式
14. 组合式API

webpack

1. webpack构建｜打包流程
2. webpack相关问题
3. webpack打包速度优化
4. webpack优化运行时体验
5. tree-Shaking webpack树摇原理
6. css-loader的作用是什么？不使用css-loader行不行
7. Webpack如何实现的proxy，为何可以解决跨域
8. webpack如何实现热更新
9. webpack基本配置&主要功能

我webpack部分的具体实践比较少，所以只整理了一些比较基础的问题，如果你跟我一样也只有几年工作经验有某个部分比较弱的话建议面试之前花点时间补一下，木桶原理不要让某个短板特别明显，大佬忽略～

TypeScript

1. never和unknow的区别
2. interface和class的区别
3. interface和type的区别
4. TS装饰器
5. TS中的泛型
6. 函数重载
7. TS自测练习题：

可能大家和我一样，平时直接上手用平时总结的很少，如果你的简历上也有提到不妨看看。

代码考核：

算法对于前端来说到底重不重要，这个仁者见仁智者见智，它确实稍微有点耗费时间而且使用频率没有特别大，但是如果你想进大厂尤其是大环境比较差，面试者都比较卷的当下。我建议还是适当的刷一下。主要攻破：二叉树、链表、递归、回溯、动态规划。以我本次找工作的经历来说：字节、小红书、快手、猿辅导的代码题都有考察算法。我自己差不多刷了LeetCode 100道左右，以middle为主（easy:20%、mid:70%、hard:10%）如果前期自己效率比较低确实刷不下去的话推荐《labuladong的算法小抄》跟着一起看。

1. 防抖&节流
2. 处理url，返回一个存储url参数的对象
3. 二叉树的深｜广度优先遍历
4. 01背包和完全背包
5. 反转链表
6. 快速排序
7. 手写一个迷你观察者
8. 双向绑定的实现
9. 数组的全排列

   输入一个数组 arr = [1,2,3] 
   输出全排列 [[1], [2], [3], [1, 2], [1, 3], ...., [1,2,3], [1,2,4] ....]

10. 叠词的数量

    Input: 'abcdaaabbccccdddefgaaa' Output: 4 
    
    
    1. 输出叠词的数量 
    2. 输出去重叠词的数量 
    3. 用正则实现

11. 虚拟dom转真实dom
12. 数组转树结构
13. 并发限制,1000个请求，限制最大同时请求数量为N个
14. 最长无重复子串
15. 还有一些常见的刷几十道leetcode就可以解决的就不一一列举啦

结尾的一些唠叨

正式的面经到这里就结束了，后面你可以认为是朋友之间的闲谈(不感兴趣的可以直接忽略)。我最开始也有提到我本次出来看机会的初衷是因为缺乏学习的动力，希望接受一下社会的毒打，而且毕业之后也没有任何面试的经验。但我又怕先去刷题和背八股时间太长，拖着拖着不了了之(本人间接性踌躇满志，持续性混吃等死)，所以啥也没准备就开始了自己的第一场面试，毫无意外当场GG。但我也不是直接摆烂，而且面试结束之后那位面试官还主动加了我的微信。后来我才得知他也是刚开始替公司面试，其实当时和我一样紧张。因为我俩工作年限相近，又都是北漂还是有一些共同话题的。之后还一起去王者峡谷奔跑了几圈😂（算是一个有趣的小插曲吧，如果你跟我一样是个重度的拖延症患者不妨尝试一下这种方式，但这个拿来练手的小白鼠最好是个你不打算去的中小企业）

如果你自己有比较强的自制力和自我驱动能力，强烈建议还是稳扎稳打的来，先去网上搜集2-3篇和自身经验匹配的高赞面经汇总，以我自身举例我找了两篇和我年限相近的：掘金面经-1、掘金面经-2，然后把里面80%以上的问题搞清楚(问原理的非常清楚的张口就来，代码题十分钟内直接手写出来，千万不要模模糊糊，一问有印象，一答支支吾吾说不清楚)然后再去集中约面，相信这样下来你的效率和offer的数量都会比我高很多。还有一些其他唠叨的话和本次踩过的坑就不在这里展开说了，如果感兴趣也可以去看看【面试三部曲：约面方式&心态调整&argue薪资】