引言
本人现大三在读生，在2022年10月份集中面试，先后面试了哔哩哔哩，vivo，滴滴，字节，很幸运这几个都OC啦！下面奉上我的面经和一些个人总结！
如果这篇文章对你有帮助，还请你给我一点点支持~~ 点赞+收藏+关注哦❤
说明：
- 对于一些题解这里只是列出一些要点，具体细节可以根据要点进行自检或者扩展学习哦~
哔哩哔哩（已OC）
1、大数相加 算法题
链接丢这里：leetcode.cn/problems/ad…
另外推荐一个我刷算法时发现的宝藏，里面附有多种语言的讲解并且比较系统化，入股不亏哦 代码随想录
2、说说你知道的http状态码
- 大体说一下五大类 1xx,2xx,3xx,4xx,5xxx状态码总体的含义
- 之后，说一些具体常见的状态码，比如 200,301,302,304,404
Tips：确保提到的具体的状态有深入了解以及扩展，将面试官向自己擅长有准备的方向去引导，比如可以说 304 从而引导问 浏览器缓存方面的问题
3、404什么意思
这里就是面试官扩展上一个问题问的
4、cookie是干什么的
浏览器存储这里还是很常问的，可以把这里扩展前后都学习一下哦 推荐：
- 从历史发展角度去看：从为什么要有浏览器存储？是为了解决什么问题？到cookie的出现、cookie的特点、字段的含义以及cookie的缺陷，为了解决这些缺陷引入了 WebStorage、 localStorage和 SessionStorage 的优缺点
- 对比来看，比如掌握 cookie 和 WebStorage 的区别，cookie 和 token 的区别，cookie 和 session的区别
另外为了解决 HTTP 无状态化这个特点，后期还进一步引入了 session（服务端存储） 和 token （解放服务端）
5、利用cookie登录（讲一下前端后端怎么交互）
6、addEventListener是干啥的，有哪些参数
7、跟服务端交互数据是什么格式的
我的项目主要是使用 json，方便一些
8、了解json能存储什么样的数据类型吗/ 什么不可以
能存储的：字符串、数字、对象 不可以的：函数，日期，undefiend 这里感觉比较偏细节了
9、axios.post 数据格式
这里想问的主要是 POST 的数据编码格式：
- application/x-www-formlencoded
- application/json
- multipart/form-data
- text/xml
10、上述提到的数据格式的区别？
11、箭头函数和普通函数的区别
es6 推荐阮一峰老师的绿皮书《ECMAScript 6 入门》！
12、async 函数返回的是什么
13、css的flex怎么用，说一下常用的属性
可以先从总体概括flex入手，再细讲 容器的属性 和 项目的属性
14、说vue的生命周期
这里附上一张图 把这张图搞明白就差不多啦
（图来自尚硅谷vue讲义的哈，侵权删55）
16、v-model是干嘛的
17、父组件调用子组件的方法 子组件给父组件传参
利用 ref 或 $emit $on
组件间通信也是一个常考点，可以扩展学习一下~ 列几个点：
- props/
$emit- eventBus 事件总线
$parent/$children- vuex
- ref
- 依赖注入（provide/inject）
体验：面试官些微有点严肃（可能是我抗压差一点55） ，搞得气氛怪紧张的，不过最后还是面过啦 base上海
vivo（已OC）
1、自我介绍
2、在大三？实习多久？得租房子
3、项目收获和困难
下面几个问题都是项目展开的
4、遇到的最大困难
Tips：提前准备好项目亮点，可以展开讲的!
5、哪个步骤会并发
这里是针对我的项目处理 refresh token 实现免登陆遇到的并发问题
6、防抖怎么做的
划重点：防抖和节流也是常考点哦
- 手写防抖和节流
- 两者的区别
- 两者各自的应用场景
7、自定义组件怎么做的（vue.extend）
关于自己项目实现的自定义弹框组件，这里就不展开说啦
8、啥时候开始学vue?
9、自定义组件怎么实现组件通信
还是项目哈，如果你的项目没有涉及，大概率不会问到这里的 所以：自己项目的亮点一旦说出来要尽可能扩展哦
10、讲一下路由
这里的学习，推荐从前端路由来源（SPA）入手，到路由的两种模式（history 和 hash），以及深入源码会理解的更透彻！
11、路由守卫哪几种
12、一键换肤咋做的
回到我的 vue 项目啦
13、项目中的实时聊天咋实现（socket.io）
14、watch和computed
15、深度监听和普通监听
16、怎么做到只监听一次
17、git常用命令
18、有分支的概念吗
19、处理冲突？什么时候解决冲突？
体验：一回生二回熟，随着知识体系的加固以及心理调整，在越来越好！同样OC~
滴滴（已OC）
1.css新特性
2.水平垂直居中
3.重绘、重排
这里推荐从浏览器整个渲染过程讲起
4.盒模型
5.为什么要初始化css的样式（兼容、节约代码）
6.css隐藏元素的方法
7.bfc
8.手写一个两栏布局（两栏布局宽高比例不固定怎么实现）
9.写一个扇形
10.定位的区别
11.数组的方法
12.map 和 forEach 的区别
13.闭包（使用场景）
这里推荐从多个角度去看待闭包（同样列出几个可以深入了解的点）：
- 执行上下文变量的回收
- 变量存储（闭包是存储在堆中的）
- 作用域链（变量对象存有父作用链，从而有变量引用，形成闭包）
- 垃圾回收机制（闭包引起的问题）
14.原型和原型链
一些输出题这里也有涉及哦
15.获取原型的方法
16.es6都有哪些新特性
尽可能说自己擅长 深入了解的
17.读代码
Promise.resolve().then(()=>{
console.log(1);
}).then(()=>{
console.log(4);
}).then(()=>{
console.log(3);
}).then(()=>{
console.log(6);
}).then(()=>{
console.log(5);
})
18.手写bind
19.深拷贝、浅拷贝
20.eventloop
21.实现瀑布流的方法
22.防抖和节流
23.浏览器缓存
这里同样概括性列出几个要点：
- 为什么要有浏览器缓存（减轻服务端负担等...
- 浏览器缓存机制的大体流程
- 第一次访问，没有缓存：直接请求服务器以及返回相应缓存字段
- 再次访问
- 缓存未过期：强缓存
- 缓存过期：协商缓存
24.ajax和axios的请求原理
ajax: 原生实现：通过 XHR 对象 或者 fetch axios：对 XHR对象实现 ajax 的进一步封装（包括使用了 promise、对请求和响应做拦截、对响应数据转换）
25.跨域
这里的学习推荐从浏览器的同源策略出发，到常见的跨域方式（CORS、JSONP、Node/Nginx代理跨域、Websocket协议跨域、iframe等）
26.vue的data为什么是一个函数？
27.双向数据绑定的原理
划重点，重要的点，推荐看相关源码会理解更清晰哦~
28.computed和watch的区别
可以从这几个点入手：是否有缓存，使用区别，是否支持异步，各自的应用场景
29.mvvm和mvc的区别
心里暗自嘀咕：叭叭累了
30.封装过组件吗？
31.vuex的原理和流程
32.链表是否有环
快慢指针相遇！
你走过我走过的路，我们总会相遇（dddd）
字节（已OC）
一面
1. 讲下你的项目
概括性地介绍了一下项目，具体实现的功能，以及自己准备的一些可以扩展的项目亮点
2. 如何实现15天免登陆
这个问题是根据上面的回答进行的进一步追问，我主要是通过 access token 和 refresh token 实现的，另外利用了缓存加锁对并发请求实现了进一步的控制（具体略）
3. 如何实现聊天功能
项目中利用的是 socket.io 实现实时通讯，具体项目实现以及对从 socket.io 实现原理，到 webSocket 原理、长轮询、短轮询机制
4.还有什么要补充的项目亮点吗?
再详细讲了一下如何通过 vue.extend 封装自定义命令式组件以及防抖处理搜索框
5. HTTP状态码
- 大体说一下五大类 1xx,2xx,3xx,4xx,5xx 状态码总体的含义
- 之后，说一些具体常见的状态码，比如 200,301,302,304,404
Tips：确保提到的具体的状态有深入了解以及扩展，将面试官向自己擅长有准备的方向去引导，比如可以说 304 从而引导问 浏览器缓存方面的问题
6. 浏览器缓存
这里同样概括性列出几个要点：
- 为什么要有浏览器缓存（减轻服务端负担等...
- 浏览器缓存机制的大体流程
- 第一次访问，没有缓存：直接请求服务器以及返回相应缓存字段
- 再次访问
- 缓存未过期：强缓存
- 缓存过期：协商缓存
7. 读代码
window.name = 'byte';
function A(){
this.name = 123
}
A.prototype.getA= function(){
console.log(this);
return this.name +1
}
let a=new A();
let funcA = a.getA
funcA()
输出：byte1
这里涉及知识点包括：
- this 指向
- 字符串
8.函数柯里化实现
9.写防抖、节流、问问闭包
10.合并两个有序数组（算法）
体验：一面问题这里可能有遗漏，没有及时记录，现在想起有点遗忘，一面是一个小姐姐面的，体验感也不错，自己输出了很多，二面面试官有提到自己在一面面评回答浏览器缓存回答的很好hh
二面
1.TCP为什么需要三次握手？
关于计网这里推荐学习：小林Coding
2.https
3.中间人攻击是什么 怎么预防
4.为什么出现了http2.0
这里就要从HTTP发展史以及HTTP2.0解决的问题来入手
5.为什么要有缓存
6.为什么要设计强缓存和协商缓存
7.JS数据类型
这个问题也很常问奥 分为原始数据类型和引用数据类型，把各自类型都分别说一下然后可以从两者的存储位置进行扩展
8. 判断是数组 instanceOf 原理
手写也要掌握奥
9.考察js作用域的一道输出题并解释
var x = 10;
(function (fn){
var x = 20;
fn();
})(function(){
console.log(x)
})
这里主要考察js作用域是词法作用域，在定义的时候就决定了，所以x的作用域就是全局，输出10
10.事件循环输出题 为什么要有宏任务和微任务 为什么要有任务队列
这里就可以看出面试官不仅仅关注一些知识本身，更关注它的历史发展和缘由，所以就像我之前说的学知识要多问为什么？关注来源、历史发展才能进一步掌握
11.算法：求两个数组的并集
12.手写Promise.all
Promise这里建议把源码都过一遍
体验：夸完一面面评，就来了两个浏览器缓存的为什么打得措手不及，在自己的理解之上说了一些，总体回答的还不错
三面
主要是集中项目展开问的
为什么要用refresh token？ 缓存加锁的弊端
有考虑过使用 cookie 实现15天免登陆吗？优点是什么？
微信实现就是用 cookie ，leader这里向我推荐了要学会向“竞品”学习
聊天是通过什么实现的？用webSocket 有什么弊端？
实现红绿灯
绿、黄、红循环m次，每隔n秒一亮
function red(){
console.log('red')
}
function green(){
console.log('green')
}
function yellow(){
console.log('yellow')
}
const step = (m, k, n) => {
if(k <= m){
task(n, 'red')
.then(() => task(n, 'green'))
.then(() => task(n, 'yellow'))
.then(() =>{
step(m, k+1,n)
})
}
}
step(2, 1, 1000)
把step改写成async形式
const step2 = async(m, k, n) => {
if(k <= m){
await task(n, 'red')
await task(n,'green')
await task(n,'yellow')
step2()
}
}
最后还有一道不难的算法题
体验：leader 人真的很好！很尊重我的想法，愿意倾听和肯定我的思考方向，同时会给予我一些额外的建议，受益匪浅！
hr面 11.22
前面几轮面试整体感觉是怎么样呢？
了解业务方向吗？
什么契机接触前端？为什么学前端呢？
介绍印象比较深的一个项目 项目中比较大的挑战?
以前暑假寒假都做什么
未来职业规划
互联网行业吸引你的点在哪？
自我评价 优缺点? 最近成就感较大的事情?
一周后就发 offer 啦，激动子！最后毅然选择去了字节啦~ base北京 技术中台（今年初九实习报到）
学习总结
- 尽可能将面试官往你会的知识点去引导，自己说出来的知识点就一定要是你深入扩展的，不然稍微一问就不知道啦（当然从学习本身出发，有探究精神，学知识要了解前因后果以及扩展必然也是不可少的！）
- 学习知识不要仅限于这个知识点，推荐从历史发展的层面去看，从这个东西为什么要有? 要解决什么问题? 它的前身是什么? 有什么缺陷导致后续的发展，这样才可以进一步掌握知识！（面试官也经常会问为什么哦）
愿所有努力都不会被辜负 祝愿你也得到你想要的offer哦！加油！
