互联网大厂秋招前端面试题(快收藏!)

努力的Greatiga

发布于 2022-07-25 02:19:41

74500

代码可运行

文章被收录于专栏：前端开发与网站建设前端开发与网站建设

运行总次数：0

代码可运行

前言

目前已经毕业，在去年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 也可以？？哈哈哈我太天真了，，，
反问了具体的业务，还有自己有待提高的地方

总结

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