吴思里：阿里淘系前端面试经历
一面
2021-3-12
你是重邮的？我也是
你是2022届的对吧，那你现在是大三？日软是吧
我现在看一下你简历哈，现在看简历不方便一边打电话一边看简历
我先介绍一下我们部门，阿里巴巴淘系技术部，前端架构组
我们团队主要是负责手机淘宝上的前端部分的框架，
包括你可能从来没听过rax，是一个基于一个像手写的react吧，这边自研一套框架，
然后在这一上边有一整套生态，这整个rax生态集都是我们这边在负责，
除了这个我们这边还主要负责像客户端方面的像flutter，像hav?技术方面的事情，
然后呢我本人也是本科17年毕业的，我像了解一下你们在做we重邮对吧，
现在这个we重邮项目怎么样了
we重邮之前是断层了，现在因为疫情关系需要一个平台来管理记录嘛，我们又重新弄起来了，
现在我们在维护每日打卡、出入校管理方面的功能。之前的人用的不是特别多 ，然后现在使用率可以达到99%，就是说学校的同学大部分都会来用这个功能。
我以前的红岩的，我和你们那个we重邮的创始人闵聪挺熟的，然后看到你简历就想先把你招过来
哦~~闵聪啊，我的简历也是拿他好的地方抄过来，然后今天我还模仿他把简历写成HTML网页呢
（笑）噢呵呵呵，你怎么没投腾讯啊
那边已经在面了吗
喔已经拿到offer了对吧，是实习生的岗位吗，深圳？
腾讯文档，嗯挺好的一个部门，不过是腾讯的话我建议你微信啊或者游戏之类的
如果你来阿里的话我们这边是淘宝嘛，也是那个主要部门嘛，（笑）盈利部门，
我们机会会好一点，这边你到时候也可以考虑。
(笑)是的，我也想冲一下阿里和字节
字节你也面了对吧，面得哪个部门，数据部门，电商
base在哪里，就是在哪个地方实习（北京）
如果让你选择去哪个地方实习工作你会倾向哪里
一线城市其实都可以，北上广深啊都可以去闯
行，那我们现在开始面试吧
- 自我介绍
- 你一开始为什么选择前端，然后你觉得前端这个方向跟其他方向，比如后端有什么区别
一开始想把拍的照片做成相册，发现一个很炫的轮播图特效，就把静态文件替换了，然后我就开始入门了前端，一开始我觉得前端就是切切图嘛，把设计师的ui图给实现出来，后来随着学习的深入，我发现前端不只是切图，还要了解计算机网络，了解一下web安全之类的，还要学一下数据结构，优化网络性能。我觉得前端和后端或者其他方向的区别，
嗯...前端与后端或者其他方向的区别，我认为前端是一个桥梁，它就是架起了用户和后端的桥梁，屏蔽了我们计算机专业需要知道的知识，比如隐藏网络传输操作数据库的细节。另外，前端需要和各自部门的人打交道，比如设计师ui、后端、产品的人，因为它们都是以你做的界面为原型展开更深入的开发和讨论，你需要听得懂他们使用的各种专业术语，所以我认为前端对体制内也是充当各个部门的中间层。
还有，前端是整个产品的门面嘛，那除了开发时和其他部门的人一起开发之外，还有各种各样的问题都会找你，同学们弹窗网络异常找你，改一下样式找你，我觉得在这一点上前端可能做得事情要比其他部门要多
3. 你刚刚讲到了几个点哈，包括性能web安全的问题，前端常见的安全漏洞有哪些，如何避免这些问题
SQL注入
XSS攻击
CSRF攻击
DOC攻击
钓鱼网站
4. 还有就是性能问题，性能问题涉及比较广，我看你之前做过很多项目，在你做项目的过程中有没有遇到很明显的性能问题，然后怎么解决的
提高首页打开速度
路由懒加载：我做的博客项目嘛，打包后只有一个入口文件，所有的js都被打包到一个js文件中，路由懒加载分成多个js块
ui按需导入
引用CDN外链
js style动画变成CSS transform动画
js动画为什么会有性能问题
那你知道为什么修改style会导致浏览器性能问题
浏览器执行渲染的流程知道吗
简单点就是浏览器有重绘重排，你对这个有了解吗，那你讲一下什么是重绘重排
修改样式一定导致重绘吗
重绘一定导致重排吗
重排就是我修改元素的位置大小，边框边距，甚至:hover都可能导致重排，因为你会影响到其他元素的位置
重排就是我修改元素的 color 、background-color，浏览器就会重新绘图嘛，不需要重排
重绘不一定导致重排
但重排一定导致重绘
性能这一块你还有什么要补充的吗
分包加载和预加载，我们对we重邮小程序进行了分包处理，常用的放在主包，不常用的放在副包，用户点击了才会加载副包，用户用空闲时间预下载副包的内容
浏览器缓存策略，静态资源服务器在响应头中设置cache-control为true，缓存时间max-age为一年，可以提高网页打开的速度
那你知道浏览器这种cache-control缓存机制大致可以分成哪几类吗?
嗯...我知道设置max-age缓存时间为一年是强缓存，那如果更新了静态资源，浏览器不向服务器请求怎么办，所以还有一种缓存策略是html页面不缓存，对静态资源采用hash命名，浏览器发现静态资源名字不一样，就会重新向静态资源服务器发起请求，从尔达到更新资源的目的，这一种我不知道是不是该叫弱缓存
嗯性能还有吗？那你觉得小程序的性能和纯web浏览器网页性能相比谁哪个好
浏览器网页吧，因为浏览器是运行在webview中，小程序js和页面通信需要时间，用的还是https协议，解密和加密都需要代价
那你知道为什么微信小程序还是选择这样吗
技术是为业务服务的，为了业务安全，花费这样的代价是值得的。比如小程序会有开发能力接口，唤起微信支付功能。这些是需要和微信服务器通信的。
对，说的没错，微信小程序它要做开放，它不能把所有环境都暴露在外面。
5. 最后再问个简单的，我看你最近在饥人谷做培训对吧
（笑）为什么要参加这个培训，我很好奇啊
就是写了两年的网页，感觉学的很迷茫嘛，每天要么就是在写结构样式要么就是在写业务逻辑。
我有种感觉，学了webpack Vue 和React的api，感觉还是差点意思，
有一天听方应杭老师的公开课，发现宝藏了，很多人喜欢讲各种新技术新框架，包括很多培训机构网上教学视频教框架就是罗列API一二三点，你记住然后这些API，然后用这些API实现一个项目就可以足够应对面试和工作了，就可以像流水线一样毕业了。但是很少有人会很有耐心读源码，一步一步教你如何封装API，事无巨细的没有任何省略的实现各种基础组件的细节给你看。只会用别人写好的API写业务，只会在别人建立好的框架上调用API，当然差点意思了，就像曾经的我只会用人家写好的轮播图特效，替换图片资源文件一样，离我真正学会前端还差了十万八千里呢。
它分四个阶段，第一个阶段都是教最基本的前端知识嘛，学到框架，
第二个阶段工作一段时间有必要学的，教你如何封装API，一开始有教你Jquery，promise的实现，然后我也想面向加薪学习嘛，比如造UI轮子，饿了么的elementUI，阿里的Ant Design，还有你之前讲的rax，封装一套符合自己公司业务的框架，就是中级前端输出的组件框架我也想像他们一样能输出。
第三个阶段就是向nodejs后端进阶
第四个阶段就是向全栈进阶
然后我也希望自己未来十年不会为自己前进的方向给困扰，我想知道有一个方向前进，所以报了这个培训班
6. 问一下你宏任务和微任务
7. promise then setTimeout优先级，
就是写了三个谁先执行屏幕上打印输出顺序对吗
你懂我意思哈（言下之意小子你看过面试题哈）
8. 你知道setTimeout和requestAnimationFrame的区别吗 不知道
setTimeout我们一般称为数组方法，就是js数据环境里面提供的方法，它是异步的对吧，它是提供异步参数的是延迟多少毫秒执行嘛
requestAnimationFrame 其实它也是异步，一般我们讲就是16ms执行一次
为什么是16ms你知道吗
就是屏幕刷新频率每16ms一帧吧，一般大多数的显示器都是60帧每秒，
1s/60p大概就是16ms
如果你的显示器不是60fps大概就是8ms，所以requestAnimationFrame 能够动态的决定动画的渲染频率，由浏览器根据你的屏幕刷新率决定要不要渲染这一帧的动画。所以说setTimeout16ms只是一个模拟,它并不能将你的动画关联起来，因为它实际上跟你的屏幕的刷新，浏览器绘制的那一帧是有关联的
嗯ok，多长时间了35分钟，差不多，我这边问题差不多，看一下你有没有问题想问我的
拿了腾讯offer能不能再找阿里或者字节，可以啊，这是你的选择嘛
面试这边正常应该是四面，可能有五面，如果说就是简历评估比较优秀的，可能会安排交叉面，会加一轮交叉面
9. 这次面试打个分嘛
可以，我觉得你这次面试整体还挺好的，就是前端的基础知识你都能回答得出来，我觉得你有一些原理之类的东西可以多去了解一下，像浏览器渲染的机制啊，有一些我没有问哈，包括reload底层的一些原理或者说更基础的一些东西，有一些比较基础的东西比如计算机网络 ，计算机组成，操作系统 ，这个你可以多去了解一下
因为其实我觉得像前端这种像偏应用的东西，说实话的话前端偏应用的东西大多数可以靠，不断的练习，变成一个很熟练的工人，变得熟练之后，你找工作肯定是没问题，你工作几年之后可能会遇到一些瓶颈，就是你可能只是流水线上的一个工人，
就是之前不知道不知道你们有没有听学长说过哈，就是进了大厂，感觉自己天天都在写代码，就像一个螺丝钉一样(笑)，就是感觉公司缺了你好像也能工作，就是因为你看到的视野不够，你看到的视野不够呢原因还是因为你对底层的一些东西不了解，你不能去承担更大的职责哈，架构这方面的东西，需要你更加 了解一下底层的东西，所以我建议你后面可以多去了解一下更commen的一些底层知识，这个不管你以后做前端啊还是转岗做客户端做服务端都能用到的一些东西，这对你以后工作啊各种方面都挺有帮助的。
然后前端这方面这一块呢，一个是你在报培训班学习嘛，我觉得ok，至少说你有一些渠道，能够去了解，那除了是这种，我觉得相对被动的接收知识的这种方式呢，你还可以主动的去看一下社区上github，当然你现在不在公司可能没有这一种环境，交流啊分享啊，当然社区外面也有啊，就是那种像vue的comf?啊，qq com？就是有一些社区会议，就是这些社区会议门槛可能会有一些高一点，甚至你可能还要付出一些交通的成本
面试总结一下，无论是字节还是阿里，对于现在的我，面试问题弱化了HTML和CSS问题，主要围绕了我的项目、数据库和深挖我的技术能力，web安全、DOM数据结构、性能问题、浏览器渲染原理、布局重绘、diff算法、API的封装、框架的实现，挖到我不会为止，挖我有没有深入思考解决问题，有没有关注最新技术，有没有学习源码，有没有关注vue社区，有没有讲故事能力，把我问到难住，有没有讲故事能力这一点是还能提高的地方，方法是总结总结再总结，把面经写来下次讲出更好的故事。
#面试##实习##面经##阿里巴巴#
投递淘天集团等公司10个岗位