秋招腾讯字节跳动小米前端面经

欢迎阅读

作者的个人网站: Greatiga的个人网站。会不定时分享各种学习心得文章

前言

目前已经毕业，在去年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布局，实现两个子元素垂直，并且一个靠右一个靠左

 <div class="parent">
    <div class="left">div>
    <div class="right">div>
 div>

• css代码

.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基本数据类型
• 闭包
• 你说到了作用域链，那么你来谈一下作用域？
• 说到了执行上下文，所以又问了执行上下文
• 继续深入问到变量提升、词法作用域、动态作用域
• 看一点相关的题目吧

console.log(foo);
function foo(){
    console.log("foo");
}
var foo = 1;

输出
//ƒ foo(){
//    console.log("foo");
//}

var value = 'tom';
function foo() {
    console.log(value)
}
function bar() {
    var value = 'bob';
    foo();
}
bar();

输出
//tom

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 封装的请求不一定会按照调用顺序得到响应，可能后面调用的比前面的要快，但一样要保证最后的顺序是按照调用顺序的）
• 写一个题吧

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

• 改动前的代码实现（不一定对，望大家给个建议）

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年秋招考察的依然是这些 --> 扎实基础 + 基本必须掌握的算法 + 知识的广度与深度。

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