23届前端实习腾讯、美团、字节、蚂蚁面经

23届前端实习面经

我是23届毕业生，双非，这个帖子记录了我从20年底到22年上半年找实习的经历，依次分别投递过百度、腾讯、美团、字节、字节、美团、蚂蚁。

汇总

在这里只整理了面试的题目，如果需要详细的时间线以及关于面试的吐槽的话，可以查阅表格中的博客链接。此外我总结的一些我自认为还是比较全面的前端基础知识，也可以看一下。

面试	博客
`20`年百度前端实习一面凉	百度实习生前端面试-产业创新业务部
`21`年腾讯前端实习一二三`HR`面 `offer`	腾讯暑期日常实习前端面试-WeGame
`21`年美团前端实习一面凉	美团暑期日常实习前端面试-基础研发平台
`21`年字节前端实习一面凉	字节跳动暑期日常实习前端面试-幸福里
`22`年字节前端实习一二三`HR`面 `offer`	字节跳动暑期实习前端面试-基础架构
`22`年美团前端实习一二面凉	美团暑期实习前端面试-到店平台技术部
`22`年蚂蚁前端实习一二`HR`面凉	蚂蚁暑期实习前端面试-语雀

20年百度前端实习一面凉

一面

实现一个三列布局，使用flex、position、float实现，屏幕共享手写代码。
position中fixed和absolute的区别。
JavaScript基本数据类型。
JavaScript中Symbol数据类型的作用。
ES6的let、const与var的区别。
Promise对象以及async与await的作用。
ES5与ES6实现继承的方式，手写代码。
JavaScript的作用域、原型链以及闭包。
JavaScript中判断数据类型的方法以及分别有什么区别。
HTTP2.0协议的特点。
HTTP请求中options的用途，简单请求与复杂请求，跨域问题。
浏览器的缓存机制，分别用什么请求头控制，Cache-Control属性的值，强缓存与协商缓存。
XSS与CSRF攻击的原理以及避免。
对于MVVM模式的理解。
Vue的生命周期，分别在何时触发。
Vue中循环的key的作用，我就不该提到diff，没仔细看diff算法，然后给我自己挖了个坑。
Vue的diff算法，层次遍历还是深度遍历。
Vue中父子组件传值通信的办法。
Vue如何实现的数据双向绑定，在2.0与3.0有什么区别。
Vue-Router如何实现的路由，Hash模式和History模式的区别。
编程，编写程序将数组扁平化并去除其中重复部分数据，最终得到一个升序且不重复的数组。
编程，实现plus(1)(2)(3)(4)等于8。

21年腾讯前端实习一二三HR面 offer

一面

必备环节自我介绍。
刚开始是聊天，可能是让我不要紧张，问了问啥时候毕业啥的，聊了聊用PHP做后端和Node.js做后端，我想这完蛋了，我就不应该写PHP，我此时都怀疑我面的是不是前端了。
会不会其他的后端语言，都有什么了解，对比一下。
手写二分搜索，用迭代和递归的方式实现。
手写防抖函数，第一次用那个在线编辑器真的是不太会用，不过有代码提示啥的还不错。
PHP如果读取一个特别大的文件，比如读取很大的一个数组之后进行排序，而PHP对其进行限制会怎么办，这个直接给我问懵了，我也不知道这是啥，当时答的是改改配置文件或者函数设定一个暂时的配置可行，读文件排序可能能用外部排序解决吧，现在搜了搜用php的fseek就可以做到通过指针来操作文件内容了。
写过基于Node.js的服务响应吗，我就在Cloudflare写过一个反代的请求响应，我简历真的没提Node为啥问这么多啊。
HTTP的响应码，都各自代表什么1xx 2xx 3xx 4xx 5xx，501和502具体代表什么含义。
HTTP 1.0和HTTP 2.0的区别，做了哪些改进。
共享屏幕介绍一下项目，在项目开发中遇到什么难点。
项目组件都是自己写的，介绍一下自己觉得写的最好的一个组件，慌了没说出亮点。
介绍一下项目目录为什么这么设计。
说一下你的模块化设计，在这里我说的更多的是Js的模块，面试官想看的大概是是业务逻辑抽象的模块，可能我的理解有偏差，但是对这块我觉得我写的模块确实过于简单了，唯一一个相对复杂的request模块还没来得及说就下一个问题了。
你这个项目里边的Vuex是用来干什么的。
Vue的路由的hash模式和history模式是怎么实现的。
有什么其他项目吗，介绍一下相关目录的设计，我估计到现在为止面试官已经看不上我的小项目了，哭泣。
你博客里边的设计模式，你都用了哪些，稍微介绍下。
Vue的SSR了解过吗，有过实践吗。
手写垂直居中布局。

二面

必备环节自我介绍。
之后又是聊天，说第一轮偏技术，咱们二面就多聊一聊项目，我在想一面也没怎么问基础啊。
首先问了问后端，说一下你小程序后端用PHP都有什么难点，遇到过什么问题，难点我主要是回答了这个爬虫解析HTML模拟登录，以及访问内网的手段，问题最主要的是安全问题。
前端的安全相关的东西，XSS、CSRF、SQL注入、CSS劫持攻击这些的基本概念和解决方案。
场景题，CSS劫持攻击如何处理，如果表单存在这个攻击怎么处理。
场景题，如果我想在两个请求比如用户头像和用户列表都加载该如何显示，基于这个条件下如果有一个Promise失败了但是我依旧想显示加载成功的那部分该怎么做。
项目都是与小程序有关的，有没有其他项目，挑一个项目咱们说说，我这时候慌了，完蛋又开始项目了。
你这个项目难点在哪，都怎么解决的，我还是回答了两次重构以及封装一类的。
为什么重构，是为了功能体验还是为了技术什么的，那当然是技术了，实际上也确实是。
第一次重构都做了什么，回答主要是组件化的封装、样式、Js模块的封装。
CSS封装怎么处理的，原来是怎么处理的，都处理了什么，回答的时候又说了SCSS预编译器。
你用SCSS预编译器都干了啥。
除了Js模块的封装，你对于组件有什么封装吗，回答表单组件整体样式布局全局组件等。
如果两个组件相似度非常高，达到了80%，你会怎么做，答高阶组件。
说说你对高阶组件的理解。
说说你怎么封装的request模块的，你怎么统一处理异常的，答统一处理减少catch代码，提升用户体验，统一上报错误，之后又说了微信小程序提供的实时日志。
对于小程序的性能处理有什么了解吗，用Promise是能够提升性能吗。
除了小程序，对于前端页面的优化有什么实践或者了解吗，答雪碧图、字体图标、样式与脚本定义为止、CDN等等等等。
遇到过什么兼容性问题吗。
了解过webpack吗，这个真不了解，老哥给了我个台阶下，说你做小程序多，基本不用webpack，不了解也正常。
说一说Js的闭包和原型链，都各自有什么常用的应用。
为什么要学前端，答因为对JavaScript感兴趣。
对于Js有什么想法吗，说了说优点和缺点，以及在小程序上的各种。
对于之后有什么规划吗，做架构之类的。
除了这些项目你还做过什么好玩的东西吗，我就掏出了我的文本选中复制的脚本，几十万安装的脚本，吹了半天牛逼，怎么做的，为什么要做这个，遇到过什么问题。
看你这个每日一题这个小项目，我说写了一年巴拉巴拉，其实就是我的博客，还问我是什么让你坚持学习以及写下去的。
看你都是自己做的项目，平时有什么人可以交流吗，前端没人交流后端倒是不少巴拉巴拉。
平时遇到非常难以解决的问题你都是怎么处理的，有什么请教的地方吗。
反问阶段。

三面

常规自我介绍。
你的小程序数据是怎么来的，是你一个人做的吗，ps:我的小程序项目。
你的小程序怎么推广的。
你的小程序在做的时候遇到了什么困难。
你为什么做这个小程序。
你平时都接收用户的反馈吗。
平时玩游戏吗，没想着做个小游戏出来。
为什么要来鹅厂。
你觉得项目、团队氛围、技术沉淀，按重要程序排个序。
为什么选择前端方向。
前端领域发展的很快，你有什么看法。
在前端这么多方向，你更喜欢哪些。
有时候有些需求不能很明显的区分是前端需求还是后端需求，你会怎么做。
反问，介绍了一下部门，属于IEG做WeGame平台这方面的。

HR面

为什么来腾讯。
看你有内推，是认识在腾讯这边的人吗。
面试过哪几家公司，都是什么进展。
广东来过吗，了解广东吗。
有亲戚好友在广东吗。
大概能实习多长时间。
学校是哪里的，家是哪里的。
介绍一下家庭情况。
介绍一下近期的项目吧。
介绍一下比赛，有代表性的。
平时玩什么游戏。
对以后的职业规划，有什么具体方面的规划。
了解部门吗，部门都做什么业务。
之前面试官怎么样，觉得团队氛围怎么样。
介绍一款玩的你最多的游戏吧。
反问啥时候能知道结果，答一到两周，留意电话和邮件。
再次确定了实习时间以及能够实习多久。

21年美团前端实习一面凉

一面

标准环节自我介绍。
怎么学习的前端，学习的方向。
问了问啥时候能够实习，能实习多长时间。
H5本地存储的种类，有什么区别。
localStorage与Cookie怎么清除。
Cookie在什么情况下不会自动发送。
怎么解决跨域问题。
JSONP的原理。
Vue里CSS怎么只作用于组件中。
怎么进行CSS的组件穿透。
ES6用的多吗，都用了啥。
介绍一下Promise的异步流程，如何解决的异步问题。
实现Promise.allSetted，面试官说我实现的比较夸张，没见过这么实现的哈哈。
写算法，长字串中的最大回文长度，没做出来。
Vue生命周期。
Vue的keep-alive组件的生命周期。
Vue怎么实现自定义组件，v-model是怎么实现的。
介绍一下你的小程序项目，都是怎么实现的，为啥要做。
有和学校聊一聊维护一下学校的网站吗。
怎么处理的密码，有过加密吗。
数据有缓存吗，是实时爬取还是定期刷新数据。
又问了下实习时间。
反问，介绍一下部门。

21年字节前端实习一面凉

一面

域名到IP的过程，就是DNS解析过程。
第二次访问比第一次快，缓存机制。
浏览器在下载css的时候会阻塞dom的解析吗。
<script>标签的defer与async。
两个tab互相通信。
https加密传输过程。
http2特点。
linux命令，如果我想kill一个Node进程该如何做。
数据库事务的概念。
服务器如何记录一个用户的登录态。
如何区分引用类型，即类似于判断a是Object还是Array。
[] == !([])结果。
实现一个单例模式。
js是单线程，怎么实现的异步。
点击事件流，即js事件流模型。
const，如何使对象的属性不可修改。
margin-top/padding-top是基于父元素的哪个属性，这个老哥跟我解释了一下，因为子元素实际会影响父元素的高度，所以如果基于高双向因果会造成循环。
响应式布局一般怎么实现。
px、em、rem、rpx各自的区别。
如何实现一整个页面的灰色，即转为将整个文档转为灰度图像filter: grayscale。
transform:translatez(0)属性，老哥解释说这个因为可以在一个新的层级，可以提升性能。
Vue几种watcher，render-watcher、computed-watcher、watch-api。
父子生命周期顺序。
实现Promise.all。
实现多叉树的广度优先遍历查找，自定义多叉树节点node结构（只需要定义节点结构即可，无需构建树），按照广度优先查找符合要求的节点（没有符合要求的节点返回null），比如查找电话号码为phone的用户信息，调用如下：let node = wideTraversal(node,(e)=>e.phone===phone)。
智力题：在岛上有100只老虎和1只羊，老虎可以吃草，但他们更愿意吃羊，假设：A每次只有一只老虎可以吃羊，而且一旦他吃了羊，他自己就变成羊。B所有的老虎都是聪明而且完全理性的，他们的第一要务是生存。问最后这只羊会不会被吃？如果是n只老虎和一只羊呢？
写出这段代码执行结果。

async function async1() {
    console.log('async1 start');
    let a =await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');