大厂前端面经

欢迎阅读

前言

目前已经毕业,在去年2020秋招的摸爬滚打中,侥幸收获了几个小offer。最后也很幸运去腾讯实习了一段时间。所以想着把自己经历的大厂前端面试题整理出来,留给需要找实习工作的童鞋们一个参考。

大厂前端秋招面经

包括腾讯区域研发、字节跳动、腾讯日常实习、小米的前端面经

(一)腾讯区域研发前端

一面

* 自我介绍
* 介绍一下你最难的项目
* 谈谈对 vue 和 react 的理解,以及他们的区别
* vue 常用指令说一下
* 父子组件传值?多个组件共享状态?有什么更好的处理方法?(vuex或者其他状态管理解决方案)
* vue-router 用过吗?说一下它常见的钩子函数
* vue路由的 hash 和 history 模式?
* vue 自定义指令
* vue 双向绑定原理
* vue 虚拟DOM 的 Diff 算法
* 浏览器事件循环机制
* node 事件循环机制呢?
* nextTick() 是什么任务?(宏任务or微任务?)
* 用 node.js 做过什么东西?
* websocket 怎么做的聊天服务器
* HTTP 和 WebSocket
* TCP 三次握手和四次挥手
* 常见的网络攻击?(说了 xss, xsrf, sql注入)
* 反问

二面

  • 结合自身学习介绍项目
  • 我有说到发布 npm 包,封装组件,总结反思优化什么的,所以大部分问题都围绕我的介绍来问
  • npm 包开发测试到上传的流程
  • 用 node 做了一个小的聊天服务器
  • 如何看待 Vue 和 React 这些框架带来的好处?
  • 模块开发的好处?
  • 你觉得 element-ui 的哪些组件封装的较好?
  • 如果让你封装自己的组件应该怎么做?
  • 面对新的框架和技术你怎么学习?
  • 你怎么规划未来的前端学习?

三面HR面

  • 自我介绍
  • 为什么打算来这?
  • 你的期望薪资?
  • 你在学校做了哪些对自己有意义的事?
  • 面试官让等待后续,通过的话会打电话或发邮件通知接下来的进展

总结

总结下来感觉问题都是交叉的,基础、框架、网络安全、项目都有。二面的时候让自我介绍加项
目介绍,后面问题都是围绕你的回答展开。HR面正常回答就好,表现出你想去公司工作的愿望

(二)字节跳动前端

一面(1h)

* 自我介绍

* Flex布局,实现两个子元素垂直,并且一个靠右一个靠左

1
2
3
4
5
 <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
 </div>

  • css代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.parent {
display: flex;
align-items: center;
justify-content: space-between;
height: 400px;
border: 1px black solid;
}
.left {
width: 100px;
height: 150px;
border: 1px red solid;
}
.right {
width: 100px;
height: 150px;
border: 1px green solid;
}

* JS基本数据类型
* 闭包
* 你说到了作用域链,那么你来谈一下作用域?
* 说到了执行上下文,所以又问了执行上下文
* 继续深入问到变量提升、词法作用域、动态作用域

  • 看一点相关的题目吧
1
2
3
4
5
6
7
8
9
10
console.log(foo);
function foo(){
console.log("foo");
}
var foo = 1;

输出
//ƒ foo(){
// console.log("foo");
//}
1
2
3
4
5
6
7
8
9
10
11
12
var value = 'tom';
function foo() {
console.log(value)
}
function bar() {
var value = 'bob';
foo();
}
bar();

输出
//tom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function foo() {
return function() {
console.log(this)
}
}
foo()();

输出
//window

var foo = {
bar: function () {
return this;
}
}
foo.bar();

输出
//{bar: f}

* http的请求方法
* http常见状态码

  • TCP 和 UDP区别
    * 为什么浏览器的请求有两次,一次options,第二次才是真正请求?哪些场景用到
    * 模拟一个队列
    * 数组扁平化?至少两种方法实现
    * 反问

二面(1h)

* 问了项目中的D3.js

  • 前端展示统计图或者一些复杂的图片是用图片好还是svg生成,这两种方式的优缺点,以及如何做取舍
  • 最近出了 Vue 3.0,有了解过它与 Vue 2.0 的区别吗?
  • Vue 3.0 的 Composition API 有了解吗?
    * Css画圆有哪些方式?
    * 如何知道某个dom元素是否在当前可视窗口呢?
    * scrollTop如何获取?
    * Css的position的常见属性,sticky用过吗?
    * Promise说一下
    * Promise.all用过吗,自己用promise封装一个Promise.all?要求每一个promise能并行执行,并且要保证最后的回调参数顺序与执行顺序一致(解释:每个 promise 封装的请求不一定会按照调用顺序得到响应,可能后面调用的比前面的要快,但一样要保证最后的顺序是按照调用顺序的)
    * 写一个题吧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const obj = {a: {b : {c : {d: 3}}}}

function getValue(obj, str, defaultValue) {}

getValue(obj, 'a.b.c.d', 1) => 3 (存在该属性返回该属性对应的值)

getValue(obj, 'a.b.c.d.e', 1) => 1 (出现错误返回传入的默认值)

改动,能处理数组

const obj_1 = {a: {b : {c : {d: [{e : 4}]}}}}

getValue(obj_1, 'a.b.c.d[0].e', 1) => 4

  • 改动前的代码实现(不一定对,望大家给个建议)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getRightValue(obj, propertyString, defaultValue) {
let str = propertyString.split('.');
for(let i = 0; i < str.length; i++) {
if(obj.hasOwnProperty(str[i])) {
obj = obj[str[i]];
} else {
return defaultValue;
}
}
return obj;
}

const obj = { a: {b: {c: { d: 3 }}}}

console.log(getRightValue(obj, 'a.b.c.d', 1))
  • 改动后加上了数组,所以细节要处理好,我当时卡壳了没弄出来

* 反问

三面(35min)

  • 前两次的面试感觉怎么样?
  • 通过之前的面试觉得自己还有哪些问题?
  • 说一下你认为做得好的一个项目,遇到了些什么问题?
  • 说了一个项目,然后接下来大部分时间都是围绕这个项目交流
  • 问了自己更偏向于实习还是正式,然后自己回答:优先考虑正式 offer,如果达不到正式批要求,给一个实习 offer 也可以??哈哈哈我太天真了,,,
  • 反问了具体的业务,还有自己有待提高的地方

总结

因为自己没有实习经历,项目都是自己写的,一下子想不出什么难点,只是简单聊了一些功能实现。所以建议大家以后聊项目时,有好的实习经历,就说一下实习的项目,没有实习只有自己项目的,也要往自己项目里面添加一些亮点(难点)。面试之前也要梳理好自己的项目,不然面试一下想不起来细节就尴尬了,别像我一样,,,呜,,,

(三)腾讯日常实习

一面(43min)

  • 介绍一下自己的项目
  • http 状态码
  • TCP 和 UDP
  • get 和 post 区别?
  • 浏览器如何渲染
  • 进程和线程的区别
  • 场景题,5种颜色的球,每种颜色球有无数个,每人每次拿两个球,问至少多少人拿,才能保证至少有两个人拿的球一模一样。
  • 编程题:找出一组数中两两相加为零的所有组合
  • 说一说快排
  • 后端能写些什么

二面(15min)

  • 项目中的难点
  • 聊了一个项目中的部分功能实现
  • 有合作开发的团队项目吗
  • 如何调试数据的
  • 高数学过吗???
  • 线性代数学过吗?说一说用矩阵的知识解方程
  • 概率论在it中的应用
  • 什么时候能来实习?实习多久?

总结

这个日常实习很迷,而且一开始面试就明确说了实习后面不会留。考察比较偏算法和逻辑思维

(四)小米前端

一面(30min)

  • 自我介绍
  • 统计字符串字符出现个数
  • 原型链说一下
  • 原型继承写一下
  • vue怎么通信的
  • 用类写一个发布订阅者模式
  • Css 垂直居中
  • vue组件的 data 为什么是一个函数
  • http 与 https 区别
  • http 304 ?
  • 说一说你的优势
  • 说一说自己未来三年规划
  • 反问

二面(20min)

  • 学习方式?
  • 项目中的难点
  • 统计页面标签个数?
  • 聊了一些经历,对事情的看法
  • 给面试官看了自己的学习笔记
  • 自己的优缺点
  • 反问,
  • 因为没有实习经历,问了公司项目的大体开发流程。面试官小哥哥很有耐心的概括了一遍。非常感谢!
  • 问了自己不足的地方

总结

小米前端的面试整体上来说是比较偏基础的,面试官人也很好。算法题需要掌握一些基础的

后续

希望这些大厂面经能对你有所帮助,虽说是2020年的秋招,但是万变不离其宗,我想2021年秋招考察的依然是这些 –> 扎实基础 + 基本必须掌握的算法 + 知识的广度与深度。

学弟学妹以及万千互联网求职者们,加油!

文章作者: 努力向前
文章链接: https://greatiga.cn/2021/03/31/前端面经/bigFactory_1/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 努力向前