阿里巴巴盒马前端面试总结

作者：泽锐Masayel

https://juejin.im/post/5e9d2052e51d4546e5571a86

春招总结

记得当时大二的时候，看到实验室的学长学姐忙于各种春招，有些收获了大厂offer，有些还在苦苦面试，其实那时候的心里还蛮忐忑的，不知道自己大三的时候会是什么样的一个水平，所以从19年的寒假放完，大二下学期开始就着手准备面试了：

知识总结

当时也是没有什么方向，在牛客网上刷题，效果也不是特别好。后来和实验室的一个去了阿里云的学长，做了一次长时间的交流，逐渐摸清了些学习方法。4月份的时候，开始制作自己的个人博客网站，并按照前端的技术栈，结合牛客网上别人的面经，开始系统地梳理知识体系，定时定量地写总结博客。记得把前端的基础加上数据结构的知识断断续续直到8月-9月才全部写完。（也挺感谢那个充实的暑假的哈哈）

一些实战

之后到了大三上学期，我开始陆续找一些日常实习，10月份的时候，运气还行，拿到了滴滴，美团，抖音的面试，只有滴滴到了二面，其他的全是一面挂????。当时面试完下来，我都会问面试官我有什么不足，怎么去改进，就这样一边继续巩固基础，一边埋头优化自己的项目，在博客也更新工程化的知识总结，一直持续到2020年的2月份。

现在想想，自己的春招这么顺利，也同当时大二大三积累的多，有一定的关系。

反思

其实，面试的时候，首先，基础一定要按照体系，反复地去复习，形成自己的体系树，这样面试官换角度来问基础的时候，你要保证可以灵活地解决。第二，就是项目，其实我很同意一些人的看法，不建议大家做一些什么仿淘宝，仿饿了么这样的一些网站项目，因为没有自己的思考在里面，项目可以是多种多样的，但项目的亮点，我总结的就是：这个项目有没有自己个人的思考在里面，达到了什么样的技术深度，技术广度。这个项目有没有多人协作，协作中遇到了什么工程化难题，如何解决，用户的反馈如何，做没做过后期调研。

这些都是考察一个工程师的综合素质的，有80%以上的能力，我个人觉得是一定能进阿里实习的。

阿里面试

阿里巴巴的盒马部门，是我面过的场次最多，单次平均面试时间最长的一家部门了，整个流程持续了差不多1个多月，技术面试差不多有5-6轮。对校招的实习生的选拔好严格，同样的，我也是花了一个月时间断断续续写完了这篇面经。

一面（2020 3.6）

前一天晚上投的简历，第二天下午就接到了面试电话

1. 请先做个自我介绍

2. 场景题：提交表单，常用的方法有哪些？应用层，通信层发生了哪些过程？

3. post和get的区别，列举一下

4. http常见的响应码，拒绝服务资源是哪个（403）

5. 说一说这个系统是如何判断机制的（前端鉴权）

6. 你刚才说了三方OAuth，讲一讲内在原理吧

7. 说说https的内在原理，ssl握手过程

8. 为什么要用非对称密钥，pms呢？公钥怎么了？

9. 说一说响应式布局吧？

10. 响应式背后的浏览器原理你知道吗？（不太知道）

11. 旋转动画css，怎么去做？（animation+rotate）

12. dom树和cssom树原理也说一下吧

13. 为什么link要在前，script标签要在后面呢？原理

14. 场景题：保证浏览器不受脚本的恶意攻击，（xss攻击，解决方法）

15. 假如说你的富文本编辑器内部要显示脚本，该怎么办呢？（不太清楚，我就尽可能说）

16. 场景题：promise.resolve.then和setTimeout（有关事件循环event loop）

17. 说说async和await的es5实现（我尽可能地说了一点）

18. 场景题：这里有cat和animal子类和父类，如何进行es5继承，至少说出5种。

19. 说说你项目做的Vue spa首屏优化吧（按需引入，懒加载路由，gzip压缩，关闭一些插件...）

20. 说说webpack打包构建在实际项目中的优化

21. 算法场景题：数型系统，包含字符串关键词，如何对其作出效率很好的搜索？（balabala说了自己的一些看法，lz77算法，后来翻了翻算法书，应该结合B树来说）

一面追加面（2020 3.7）

编程题：请使用js函数写出markdown转html的文本编辑器。（2个小时）

算法题：在一个字符串中，找到最大不连续子字符串的长度。

一面评级很好，面试官balabala...（给予我建议）

二面（2020 3.9）

1. 请做个自我介绍，学校里做的项目

2. 说说你element-ui的按需引入吧

3. 说说webpack打包优化具体干了什么？为什么要这么做呢？（Dllplugin，happypack）

4. prerender-spa-plugin插件你用过？具体说一说吧

5. SEO优化你做了？具体讲一讲吧

6. 追问：你seo排名怎么样了？（没有进展????）

7. 我记得NUXT.js也可以做渲染和seo吧？了解SSR吗

8. 小程序有碰到过复杂一点的业务场景吗？（说了数据列表懒加载处理setData优化问题）

9. 小程序的框架你有了解吗？要不说说几个？

10. 你了解过的前沿技术来说一说？（Vue3.0，Flutter，Serverless，Typescript）

11. 说说Vue3.0和2.x的双向数据绑定（object.definePorperty和Proxy）

12. 说说你最感兴趣的前端方向（跨端解决方案Flutter、React Native...）

13. 一面面试官说你还可以，那我就不再问你基础问题了，你还有什么要问我的吗？

您对我的评价：balabalabala

三面（leader面）

之前就有跟盒马的前端leader做过微信沟通，了解了一些阿里巴巴新零售的愿景。

1. 先做个自我介绍

2. 说说你的个人博客和你做的小程序吧

3. 你刚才只说了技术层面的，功能层面没有什么创新吗？

4. 你现在还有开展什么新项目吗？

5. 我不管技术层面，还是来到功能层面，除了这一个功能就没有创新了吗？（顿时语塞。。）

6. 有这么一个功能场景，老师随机点名，上堂课没来的同学被抽到的概率会大幅增加，怎么去做？

7. 还有一个功能场景，你的博客系统如何分享文章？

8. 还有一个功能场景，你可不可以做一个在线提交作业的平台，让老师不仅可以收到作业，还可以在平台上对作业进行批改？说说具体技术实现。。。

9. 我的问题问完了，你现在还有面其他的部门吗？balabala

10. 对我的评价，balabala说了很多很多????，其中用技术灵活地解决各种场景问题是非常要紧的素质！！！

说后面还会有P9级别的面试/(ㄒoㄒ)/~~

四面（技术终面）

正式校招系统开放，选择了盒马的邀请。四面在3月23号的下午打电话过来了，听口音像是个北方人。看到我的简历，抛出问题：

1. 请先做个自我介绍吧，并说说你最有成就感的几个项目

2. 详细地讲讲Vue的首屏优化，具体的技术点

3. 优化有过量化评级吗？说说具体为多少？怎么去做的？

4. 有一个问题，你如何去确定哪一种方式是对整个首屏渲染优化起到最关键作用的？

5. 我们现在回过头来，你可不可以按照软件开发的流程模块再来详细地说说博客的整体优化？各个方面的性能优化？（设计，编码，打包部署，上线体验。。。说了一部分）

6. 预渲染prerender-spa-plugin能详细讲讲？

7. 你了解了原理，那么你引入这个prerender插件对于整个项目的架构产生了什么样的特别影响？（讲了路由冲突）

8. 对于上线后的用户体验，你打算怎么做改进？

9. 功能层面是这样，技术层面可以来说说？

10. 数据列表的懒加载这个说的好，那有这么一个场景，你提交了新的文章，由用户在刷你的博客，你怎么让用户通过一定的事件=来查看你的新文章，不要通过页面整体刷新，还是以动态引入的方式？

11. 我们再次回到刚才项目的性能优化这个点上？在你解决首屏的时候，在网络通信的每个阶段，哪个阶段是性能开销的最大的地方，优化后有何变化？如何解决？

12. SEO怎么做的，讲一讲技术细节

13. 你有对你的用户群体做过数据的量化统计吗？说说你有什么样的思路，如何去利用好这些数据？

14. 这边有个问题，如果单纯地通过前端来分析用户的行为，开销会非常大，你有什么好办法？说说思路

15. 如果过了很长时间，有人问你，一个高性能的博客页面该如何搭建，你会按照什么样的逻辑取来跟他分析这些零碎繁杂的性能优化？

16. 好了，博客项目只是你个人对于技术的探索，你还有没有学校里真正拥有用户的实际项目呢？说说看

17. 功能描述的很详细，这里有个问题，总所周知，二维码有一定的时效性，可传播性，如何防范那些没来同学也扫到二维码了？说说方法

18. 没来的学生，你们就会采取这种单一的方案吗？还有没有别的？

19. 说说你们项目组的团队，如何分工的？

20. 在这个团队对于项目的功能构建中，你起到了什么作用呢？

21. 你刚才说到了前后端分离，讲讲你和后台同学如何落实好前后端分离的？

22. 对于后台的数据接口，经常会发生一些分歧，你们团队是怎么化解这种分歧的，有没有一种方式增进团队之间的沟通？

23. 这小程序现在的用户量怎么样呢？日活又如何？

24. 同样的，再说说这个小程序性能优化做了哪些呢？

25. 你对于前端未来的开发？以及你以后的职业规划？

26. 你希望阿里能给到你什么样的经历？在阿里希望能学到什么？

27. 这边在杭州，之后方便过来对吧？

28. 我的问题问完了，你这边有什么问题？

29. 惯例您对于我的评价：ok，在应届生群体中，你已经具备了工程师的素养和一定开发经验，但性能优化这一块是一个永无止境的过程，应当不断追求卓越balabala。。。。。

面下来差不多一个小时，真的少见。。。

五面（P9 交叉面）

约在了3月25日的晚上，面试官比较严肃，问的问题也蛮有深度的，时间不长30分钟，但问的问题也比较广。。。

1. 请先做个自我介绍

2. 说说你最有成就感的项目

3. 你的博客网站，难道没有分析过用户的行为吗？对于用户量很大的情况下，难道没有做过性能分析吗？

4. 详细地讲一讲你做了哪些性能优化？

5. 就这么多吗？对于效果你有做过量化的评测吗？

6. 对于首屏中的FP，FCP，FMP，TTI你又分别去做量化的考虑吗？

7. 对了，你如何通过代码来分析首屏的FCP时间？

8. 除了这些，难道就没有进一步优化吗？

9. prerender预渲染是什么原理呀？

10. 这样的一种插件引入，为整个性能提升又带来了多少量化的参考呢？你有去研究过吗？

11. 说说你拥有的实际用户量的项目吧？

12. 这个小程序已经上线对吧？你们团队有没有对这个小程序做过用户行为的调研呢？

13. 我想要知道的是在程序里面有代码去自动去分析用户的行为吗？

14. 我看你懂Vue，React有学过一些吗？系统地说一说两者的区别

15. Vue如何解析template模板，diff算法两者的不同是什么？？

16. 详细地说说前端的动画种类？

17. canvas有了解过吗？它适用于什么样的场景？

18. 你对于前端前沿技术的看法？

19. 你刚刚讲了flutter，Dart语言能不能说说看？

20. React Native做过项目吗？

21. 你希望在未来，你在阿里能学习成长到什么？

22. 我的问题问完了，你这边有什么问题呢？

对我的评价：评价我先不给你，我说输送我对于你的建议，继续探索下去，保持好奇心，用最前沿的技术尝试去做项目，前端的知识很广，需要去不断深入了解原理知识balabala。。。。（最后）我觉得你还是不错的，加油吧。。。。

后来，leader发了微信，交叉面顺利过了，剩下的就是HR了。

HR面

这个我就不写了哈哈哈。。。。

好文和朋友一起看~