尘埃落定！前端暑期实习面视大复盘，字节美团网易快手携程等

之前陆陆续续写了好多面经，基本就是一个流程差不多了就发布出来，写的都是面视流程、问题回顾和简单的体会这三方面，但是私下还是会做深入整理和自我的体会总结。今天是4.29号，距离我的第一次面视（2.19）已经过去了两个多月，随着傍晚收到最后一个offer，我的春招实习之旅算是尘埃落定了。在此好好总结一下这两个多月的面视经历，做一个大复盘，希望给大家一个参考和帮助，也是我自己的自勉吧

个人情况

我是软件工程专业的学生，大二转专业的，保研无望后决心直冲就业，这次春招实习投递的是前端开发实习岗。从大一开始就想着做一些网页项目，于是报了班，接触到了web开发。一开始从Java学起，后来尝试做一个完整的网站才接触的前端（那会儿用的springboot的thymeleaf），之后也系统学了三大件和vue全家桶，当时还想着整一手所谓的“全栈”工程狮。

21年初有幸结识了一些小伙伴一起合作开发，我因为前端的东西做得多一些，就负责了这一块的工作，之后便是一发不可收拾，除了锻炼能力，自己对前端的兴趣也愈发浓烈，直到见识了threejs的厉害后，便决心完全投入前端了（我不学Java了哈哈）。大二期间除了在跟自己的小团队做项目，积累了不少项目经验，也参加了一些比赛，算是比较充实。到了大三则偏向于深入钻研前端知识，从各种网站博客到红宝书黄宝书、css世界什么的都看。之后，在几个朋友相继拿到offer后，我也开始了寒假的潜心准备，在大三下学期开学之际开始了春招之旅

春招回顾

2022.1.1 正式开始准备春招，借疫情隔离之际开始高强度整理面试内容，元宵过后开始投简历，一开始投的提前批和日常实习什么的，算是适应一下面视。等到2月底和3月，一直断断续续的投简历和笔试，也是从3月中旬开始，面视开始密集起来，平均一两天一场面视，一直持续到4月中旬。直到今天4.29，傍晚刚收到了网易云音乐的offer，代表着我春招征程的尘埃落定。在距离我第一次面视（2.19）过去了的两个多月里，有幸拿到几个offer：

杭州：网易云音乐，字节飞书企业应用
北京：快手流程效率中心，美团平台
上海：携程酒店

其他情况：

待约面视：顺丰（一面，到时候肯定不面了）
主动结束：小米、阿里
等笔试结果：网易雷火、腾讯音乐
等捞：京东（笔试挂）、百度（二面挂）
等简历筛选：b站、小红书、腾讯
简历挂：深信服、商汤、安鼎睿

最后决定去base杭州的字节飞书企业应用，因为个人还是比较心水杭州和飞书的（我是浙江人哈哈

面经高频点汇总

之前的面经都是简单的回顾和体会，这次决定好好针对这两个多月的面视，挑选一些高频问题进行汇总，并附上提问到的公司和场次，问题后面会附上我的一些看法和思路。

因为本人能力有限，出现纰漏在所难免，望大神在评论区指正，感谢！（关于面试的公司以及完整的面经和时间流程，可以直接进我主页看：https://www.nowcoder.com/profile/839782878/myDiscussPost）

HTML+CSS

垂直居中方案（快手二面）
盒模型的理解（云网络一二面、网易一面）
flex 布局的理解，容器和项目的宽高影响等（云网络一面、小米一面、快手二面、字节二面）
怎么实现响应式？为什么要有 rem ？（快手一面、小米一面）
梯形、三角、扇形的实现（小米一面）
BFC（字节二面、网易一面）
行内元素和块元素区别，对应的盒模型怎样，为什么要有这样的区分（快手二面）
img的图像的显示、加载、空白图问题（快手二面）

看得出来 Flex 布局绝对是必备内容，之前关于 float 的内容准备得焦头烂额，但反而没怎么问到，毕竟现在css3和弹性盒等布局已经成为主流，flex 容器和项目的所有属性最好都要有所掌握和实践。float 算是一种硬布局方式，属于早期那种“不太负责任”的布局方式，所以关于 float 的问题和解决方案还是需要了解的。
至于 BFC，准备面试之前我其实都没听过，后来了解到了，也只是在父子元素的margin重叠问题上使用较多，可能看个人需求的，其实开发过程处处用到 bfc，自己没有注意到
盒模型也是重中之重，不再赘述，更深入的了解其实可以看看《CSS世界》这本书，相信对于 css 中盒模型的一些像素级的细枝末节问题能有更多体会
垂直居中方案算是很经典的问题了，margin的偏移、绝对定位、transform 等方案最好都掌握，之前阿里面试官的笔试测评里也有考到
其实我们平时对“是什么”关注得比较多，但是对“为什么”反而思考得比较少，比如行内元素和块状元素的区别都烂熟于心，但是为什么要这么区分呢？有一个比较有意思的切入点就是，曾经的互联网早期时代，网页多以图文为重，在美观需求并不大的时代里，左到右的行、上到下的段是最主要的展示方式，所谓块状和行内也应运而生，其中涉及到的 margin、padding 等盒模型属性，也是为段落的排版服务。当然放到当下，他们的用处可不止如此了。如果面视的时候可以跟面试官侃侃而谈，聊到一些技术的历史问题、来源和未来，也能够体现自身的坚实素养和兴趣浓厚。

JS

数据类型问题、null和undefined（百度一面、快手二面、美团一面）
箭头函数和 function 区别，new 构造过程，proto指针（携程一面）
继承方式，各自优缺点（小米一面）
事件循环，对宏任务和微任务的理解，为什么要有这样的区分（携程二面）
axios、ajax、fetch 的区别（百度二面）
对异步的理解，回调、Promise、异步函数，以及他们的顺序调用实现（网易一面、小米一面、云网络二面）

数据类型问题是很基本的，可以延展到内存访问、类型判断等方面，还能够对上声明方式等说一说，如果面视问到，那就按照自己擅长的方面来延展，越全面越好
函数问题，向内可以考虑构建过程、this 指向、闭包，向外可以联系this指向&原型链、尾调用等方面，函数作为JS中特殊的类型，在基于原型对象系统的JS中，与Java等静态语言中的函数还是区别很大的。推荐红宝书黄宝书好好看一看，这一块能联系上原型对象系统和上下文执行栈最佳。至于继承方式，也只是基于函数对象和原型链的一个特殊处理。毕竟很容易按照静态语言的“类”概念来理解，而JS实际上只有“类型”，而没有类概念，所谓的“实例化”，更合理的理解也许是基于原型对象的“克隆”吧。
事件循环的话，常说的都是浏览器的（nodejs我不太了解），也是联系到函数调用、执行栈以及事件处理回调来讲，这些都是在同一个执行体系里的。宏任务和微任务不可避免要聊到，微任务的高优先级实现的“插队”效果，是JS单线程运行却能实现异步调用后的状态同步的关键（这里的状态同步比较广义，我的理解为上一轮循环更新的状态，能够给下一轮循环提供正常访问）
对于回调、Promise、异步的使用发展，推荐遵循“后者的特点如何解决前者的缺点”来理解，回调的高耦合、低信任，promise的链式、强信任，再到异步函数的“同步”过程、方便 try/catch 等等，都可以说一通。至于 Promise 的理解，我一般按“三二一”理解（三状态、二落定、一执行），稍微好记一点。

框架

微信小程序的优点，与 H5 页面开发的区别、公众号开发的区别？（携程一面）
vue 响应式问题，getter/setter，watcher是什么（网易一面、二面、携程一面、ecs一面、快手一面）
v-key、v-for、v-if问题（快手一面、小米一面、美团一面）
vue3新特性（快手一面、ecs一面）
vue 组件通信，生命周期（美团一面、网易一面）
vue-router 的原理，从一个路由到另一个路由发生的变化（美团二面）
vuex 的理解，为什么需要vuex（美团二面）
vue 的单向数据流，组件通信与vuex是不是打破了这种单向性（网易二面）
dom 的常用操作，为什么要有 dom，原生操作dom与vue操作dom的区别（百度一面、钉钉一面、云网络二面）
为什么大家选择用 vue 或 react 来开发 web 应用，而不是其他早期的原生库？（钉钉一面）
jsx 与直接 html 渲染相比性能怎样？为什么还要使用 jsx？（云网络二面）
对虚拟dom的理解（阿里云ecs一面）

浏览器原理和计算机网络

https如何保证传输安全？（百度二面，快手一面）
http请求方式、响应码、get和post区别（百度一面、云网络一面）
cookie、session的比较（云网络二面）
浏览器导航过程、重定向过程、输入url到页面显示发生的过程（携程一面、云网络一面、小米一面）
cookie、LocalStorage、SessionStorage的比较（美团二面、网易一面、小米一面）
浏览器缓存策略和资源更新问题（网易一面、二面、携程一面、二面）
对重排和重绘的理解，怎么优化（携程一面）
跨域问题，什么是同源策略，怎么跨域，预检请求（网易一面、百度一面、钉钉一面、美团一面）
websocket与http的区别（百度二面）

场景题

一万条数据渲染到页面，如何保持流畅（携程一面）
搜索栏防抖如何处理用户输入不定性造成的无用请求问题（快手二面）

工程化

webpack的理解，模块规范，tree-shaking，打包问题（网易二面、携程二面）
对 loader、plugin 的理解（携程二面、字节一面）
区分 bundle、chunk、module、vendor，以及各种哈希命名（网易二面、携程二面）

算法题和手写题

排序，快排和轴选取，堆排序稳定性（钉钉二面、快手二面、小米一面）
数组乱序，声明式和命令式区别（携程一面）
手写模态框vue组件（字节二面）
手写bind（网易一面）
手写flat（快手二面）

（运气比较好，遇到的都是mid、easy题，具体看面经吧）

看题输出

事件循环，promise系和setTimeout系（快手二面、网易一面、字节一面）
this指向、声明方式、原型链、闭包（网易一面、二面、字节三面）

（以上仍在整理，保持更新）

小总结

整体看下来，庆幸运气比较好，没遇到那种完全摸不着头脑（不会的直接说不会了）的问题，都能说上几嘴。大致可以看出：

基础三大件确实都是考察基础多一点，JS 方面配合手写题能够体现对函数、对象的理解。HTML+CSS 的场景题其实不是很多（只是我碰得不多），不过 DOM 的一些简单访问还是会考到的。
相比之下，需要“动脑子”的更偏向于框架这一块，以及 webpack 打包流程，前者会问底层原理，后者会问场景方案。有意思的是，面试官在问完原理是什么之后，还会问“为什么这样”、“这样就一定好吗”等等，所以关于框架的底层实现，还要多了解实现的原因以及利弊，这样也是日常开发需要关注的，了解底层的问题才能更好地利用框架，扬长避短地开发使用。
计算机网络虽然说问得都是那些，只能看自己学得深度如何了，答得越深越全面越好，我到后面全凭当时语感来说的，这个更像是一种知识素养了，平时使劲学就是了
算法的话，可以具体看我之前的面经，我其实也就写个一半一半，前端要求可能不是很高，所以我其他方面发挥得好问题也不大。平时的话，刷题养成规律，多注释、多总结，我刷了 270+，hot100和剑指offer肯定要过几遍的
有一点比较难搞的就是浏览器原理，缓存优化、渲染优化、配合 H5 新特性等等，说实话我之前没有找到比较系统权威的文档，都是靠网上的东一篇西一篇拼起来的，再结合权威网站的文章，最后总结起来的（光是渲染流程中那个所谓“渲染树”的问题就找了很久）。不过我更多的是基于“巨人”整理的补充，直接发我的整理其实不太好，如果有小伙伴对某个问题比较难理解（比如完整的 URL 到页面展示，私认为整理得比较全面了），可以私聊我探讨一下
项目的话，我就没贴上了，这个肯定得问一次改进一次，争取越说越好，难点的实现流程和效果，问题的方案选型、解决过程，都需要好好整理一下。其实不光是硬技术问题，你也可以提到一些软能力，比如开发合作的问题，我之前第一次跟朋友合作开发前端还是遇到很多问题的，总结了一些比较好的合作方案，面试官也会比较感兴趣（我也经常借此抛砖引玉，了解大厂的协作模式）

还是有很多要总结的地方，有些内容准备了很多却一次没问到（尾调用、css工程什么的），有些薄弱点也比较侥幸，没被深入问到。还是要保持警惕的，知识细化还得继续（我面了两个月视就不能享受享受吗/doge）

ps：本来我是想在问题下贴上完整的总结答案，结果发现太占用篇幅，不太方便，而且很多问题其实网上都有答案，我就不再赘述了。所以我更偏向于贴上一些我对这些问题的简单理解，以及我的面试思路。如果有小伙伴对个别问题想作详细了解的话，可以在评论提问，我会尽量解答我当时面视的回答情况和后来的总结整理。

心得体会

蜕变：坐立难安的菜鸡到收放自如的老狗（bushi）

其实形容得真的很形象了，一开始投递简历的时候，又紧张又兴奋，约面视到开始面视之间的时间里，真是坐立难安，慌张地看总结好面经，看了忘忘了看那种，一下子感觉自己啥都不会了又。直到真正开始面视的时候，其实进入状态后就没那么紧张了，也比较幸运第一面（阿里云网络）问得不难，回答得不错。因为之前的团队里，大家都是写后端的，我很少向人用声音输出过我对于前端技术的总结和看法，这一次面视可以算是打开了“心扉”，酣畅淋漓的处女面，给了我后面很大的信心。不过经验还是不够，后来的小米八股面，氛围太广、提问密集，导致舌头打结，脑子里的体系到了嘴边就混乱了，还是紧张的原因。

不过，随着面视得越来越多，也总结得越来越多，知识体系更加深入和清晰，整个人就从容了起来，而且面视也经常遇到相同的问题，能够做到一次比一次答得好。面视时如果感觉说得不顺畅了，也会下意识地调整自己的语速，来平复自己、增加思考的间隙，到后面也能够达到以自己的知识体系来跟面试官有来有回的斗智斗勇。其实这些的前提，还是需要自己不是在“背”，而是理解所谓的八股。

说实话前端的内容大部分还是日常开发会用到的，还不至于到“造火箭”的地步，完全可以通过自己的实践来加强掌握。不过面到后面，人确实还是有点麻的，有点想躺，可是还没拿到满意的offer，就又不敢躺，可是还是忍不住，越到后面面经复习得越来越少。引以为戒！！！

(说来挺那啥的，美团二面前十分钟还在打游戏，字节每次面前十分钟都还在ls）

面视：是展现自己的过程，能发扬优点，也需要直面不足

面视过程的不定性是很大的，能做的就是展示自己。如果问到我总结过的内容，我是尽可能地输出我所知道的内容，比如百度面视那会，我从状态码说到304时，联系到http缓存和浏览器缓存策略，再联系到web应用的资源命名。而数据类型那一块，除了说明7大类型，还聊到内部存储，聊到类型判断和历史遗留问题等，反正就是尽可能达到让面试官无需追问的程度，如果还有得问，那就尽可能答上自己的理解，往熟悉的知识去引，面试结束后也要记得总结，下一次就可以更进一步地说。

会的地方要好好发挥，不会的也别露拙，尽量发挥，往自己熟悉的引，这其实也是一种主动性的体现，就像我网易二面开头的输出题，我在解释的时候，就等同于在言善道有理有据地跟面试官说1+1为什么等于3（尴尬），后来发现虽然咱错了，但是咱很主动、覆盖面很广也很深，其他的突出点依旧能够打动面试官的。

积极交流，会的内容说得流畅沉稳，不会的或错的地方表现出恍然大悟或大智若愚之感，这也是提高交流过程的舒适度的好方法。自信很重要！

寒冬之下，取暖共勉

今年确实很难，各种负面新闻来袭，一度感觉到互联网行业的坍塌，大家每天也是人心惶惶的，各种群里的朋友们都表现得十分焦虑。“勿以赢小而不麻”，已经足以说明这个情形下能够取得一定成果的不容易了。自己好像很幸运，但也不幸运，何去何从的疑问在当下已经扩散到各个领域岗位，我作为初入的半个“社会人”，也体会到了这背后愈发明显的风卷云涌。其实也像是围城，我也不知道自己拿到offer后，之后的路就是否好走？这都是没有定数的。但既然走到这一步，自己能有一点成果，也说明了自己是有能力的，走一步算一步，每一步都算数。其实感觉牛客上认识的小伙伴们都很友好，互相鼓励，每个offer帖下面都有恭喜的声音。寒冬之下，自己有一份热，尽力发一份热吧

共勉！