2020.10.27 北京阿里大文娱一面总结

先说结果：没过️️️

晚上七点中面试官准时打来了电话，他先是自我介绍了一下，然后就说今晚的面试就是沟通几个问题的思路和方向，没有标准答案，都是开放性题目。嗯···果然如此~~~

---

你们公司的项目工作流程是怎样的？

【我】：什么流程···？
【面试官】：就是产品这边谁跟你对接？有没有约定？接到项目需求后有没有系统化分析和评审？一直到上线的过程是怎样的？
【我】：我们一般是技术经理跟我们对接，技术经理去跟产品那边对接，项目需求也都是技术经理告诉我们，而UI那边是做好了设计图后我们就照着蓝湖上的设计图做。
【面试官】：那前端这边呢，拿到设计图没有评审吗？就直接就做？
【我】：我不知道评审哎
【面试官】：这些你都不参与是吗
【我】：嗯我没有参与
【面试官】：那你们的系统发布时怎样操作的？
【我】：用docker打包镜像发布到rancher上，在rancher上去将镜像部署到服务器。
【面试官】：那测试人员是在里面做什么呢
【我】：我们公司人员测试在服务器上进行测试
【面试官】：那你们是分几个环境呢，是直接发到线上吗
【我】：是先发布到公司内网的测试服务器上，测试没问题了再发布到线上
【面试官】：那你觉得现在这个流程有没有什么问题
【我】：我觉得现在的镜像打包后还要发到rancher上更新镜像到服务器，有点麻烦。
【面试官】：你们打包都是前端来做吗，会不会前端的权利有点过大了？
【我】：如果前端人员不来打包的话，那让实施或者技术经理来打包前端的话，可能出错率还大一点，毕竟前端人员对前端项目的打包肯定更熟悉。
【面试官】：嗯

---

有没有关注过Chrome浏览器在80版本的特性？对前端有什么影响？

【我】：我没有关注过···
【面试官】：你有没有用过iframe
【我】：没用过
(这里他应该说的是iframe吧，不太确定，我就说我没用过···)

之后查了一下，Chrome浏览器的80版本：

1. JavaScript Optional chaining 和 Nullish coalescing 正式支持。
2. Favicon 图标支持 SVG 格式。
3. 移除对 FTP 的支持。
4. Web workers 中支持 ES modules。
5. Content indexing API。
6. 禁用第三方 Cookie

参考地址：https://zhuanlan.zhihu.com/p/107126906

---

你在工作中有没有决定选择用什么技术或者组件库？

【我】：我之前选择过一个视频预览组件
【面试官】：那你选择组件的时候，思考的过程是怎样的？
【我】：参数简单、样式美观、用起来没什么问题
【面试官】：那你是选了一个就拿来用了吗
【我】：看过两个，选择了现在用的这个因为它的文档比较清晰，接口比较全面，我们需要的操作逻辑该有的回调事件也都显示提供了，比较方便。

---

你们做的系统登录态那边是怎么管理的呢

【我】：是请求登录接口时，将后端返回的token存在前端，并且通过过期时间判断token是否失效
【面试官】：那token是存在哪里的呢
【我】：是存在了cookie里面
【面试官】：那你觉得存在cookie里面的是什么呢，这个token是怎么用的呢，怎么验证你的身份呢
【我】token就是一个身份凭证，后面每次请求会随着接口带过去给后端来验证
【面试官】：有没有去了解过后端是怎么验证token是某个人的信息呢
【我】：token应该就是session吧，后端应该是有一个session集合来将前端传来的session做对比校验吧···
【面试官】：嗯···

---

那如果你把本地的cookie拷贝到另一个电脑或者浏览器的cookie里，是不是就是身份信息就被另一个浏览器拿到了可以以你的身份访问服务器了？

【我】：嗯是的，cookie都拷过去了，那身份信息自然也就过去了
【面试官】：嗯，那你有没有什么方案可以防护住呢
【我】：那应该还要存用户信息吧
【面试官】：那应该存哪儿呢
【我】：额··不能存cookie里了，cookie也会被拷过去
【面试官】：你们不涉及电商和支付功能吧，如果是支付话，是不是就可以拿着你的cookie信息来支付了？
【我】：嗯是的
【面试官】：嗯这个可能不涉及到你们的业务，你们的业务可能token就够用了

---

你之前有没有遇到什么安全问题，之前是怎么解决的

【我】：我之前大三大四的时候，做过一个与支付有关的，当时对安全这块懂得还不是很多，就把支付金额之类的数据都放在了前端，点击支付的时候将数据带给后端，但是后来有人通过拦截接口修改数据，就可以篡改支付金额。之后就在后端生成订单，前端只提交一个订单编号过去，金额不再由前端来带过去。 此外，还做过一个抽奖转盘，转盘的结果也是在前端生成的，有的人就通过修改前端的生成数据，获取想要的数据，我发现了这个问题后，就把转盘结果在后端生成，当用户一点击转盘就开始向后端获取抽奖结果，虽然转盘没停但是结果其实已经产生了，然后根据结果控制转盘停在哪个位置。
【面试官】：嗯···以后要是再向上走一步的话，建议再向上看一看。

---

ES6用的多吗，数组中的forEach和map最大的区别是什么

【我】：map有返回值，forEach没有返回值
【面试官】：map会改变数组本身吗
【我】：map不会
【面试官】：嗯，forEach呢
【我】：forEach会
【面试官】：嗯

---

用到过ES6里新增的Set结合吗

【我】：用过，主要是用来去重的
【面试官】：嗯

---

给你一个对象，怎么样判断它是一个空对象？

【我】：可以使用Object.keys转数组，再判断length是不是等于0
【面试官】：恩不错不错可以，还有吗
【我】：这种就是转数组的，我想了几种转数组的都是算同一种的吧
【面试官】：可以说说
【我】：用扩展运算符展开
【面试官】：还有哪些，或者说还有吗，取决于你，看你能不能还能想得到
【我】：还可以通过ES2017的一个Object.entries将对象转化成键值对集合
【面试官】：嗯就是对象的实体，还有吗
【我】：暂时没想到
【面试官】：还有toString来判断，还可以for···in

---

React的父组件传给子组件一个属性，是一个回调函数，父组件上的属性刷新了会触发子组件的刷新吗

【我】：会，只要父组件更新了，子组件就会更新
【面试官】：那怎样控制子组件不更新呢
【我】：通过shouldComponentUpdate生命周期去控制，它默认是返回true，更新子组件，可以通过判断子组件的属性有没有变化，没变化就返回false不去更新
【面试官】：嗯，这里面有个坑，就是这里面传给子组件的一个属性是一个函数，那要怎么判断子组件里判断函数属性变化呢
【我】：这个我不知道，我之前没注意过怎么判断函数属性的变化···
【面试官】：嗯这是一个坑，有关于hooks的性能优化的

看来我得赶紧学学hooks了····

---

你怎么看待Vue2升级到Vue3.0的最根本变化

【我】：最根本的变化应该是它的响应式API的变化，原本用的Object.defineProperty，现在的是Proxy，以前需要一次性递归监听所有的响应式数据，而Proxy不需要一次性监听了，访问到对象的哪一层就监听到哪一层
【面试官】：那还有呢，它们还有什么区别
【我】：Object.defineProperty无法监听对象属性的新增和删除，而Proxy可以通过deleteProperty方法监听属性的删除，通过set方法判断原来的属性值是否为空来判断是不是在新增属性。
【面试官】：嗯

---

Vue3.0里面的Vite编译方式有啥变化吗

【我】：Vite是一个新的编译器，相当于打包工具，也就是一个服务一样，不需要打包了，而用webpack在开发模式下其实也是打包了的，只不过打包的结果在内存里面，每次更新一点代码都需要重新代码。而Vite就不需要打包了，你访问到某个页面，它才会去处理这个Vue页面，将Vue代码转换成js
【面试官】：那你说Vite是能打包吗
【我】：额····
【面试官】：也就是说如果上线的话，也是用Vite打包吗
【我】：这个我不记得了唉，我只记得开发时Vite可以直接编译页面的Vue文件
【面试官】：嗯这个说的没错，不过刚才说的有点漏洞哈，就是真正用Vue3.0打包上线的话，还是用webpack进行打包，只不过是在开发调试阶段使用Vite来提升效率
【我】：哦

---

你在遇到跨域问题是怎么解决的

【我】：我们生产模式使用Nginx配置反向代理解决跨域，而开发模式使用webpack-dev-server里面配置Proxy进行跨域
【面试官】：能说一下Nginx里面怎么配置的吗
【我】在Nginx里面的http server里面配置location /api,凡是匹配到以api开头的URL都替换成真正的后端地址，然后在访问时不是先经过Nginx这一层嘛，Nginx就会对请求做处理，根据它的配置里将/api开头的请求转发到后端地址
【面试官】：那你们可以设置白名单吗
【我】：那我就不知道了，我们的系统都是给某些集团做的内部系统
【面试官】：哦，纯粹内部用是吧

---

最后：

【面试官】：今天聊得差不多了，有的可能没有达到我的目标期望，后期的正式岗可能无法推进了，这边的话，我觉得你还是应该挑一个主攻方向吧，比如说React最新的技术打扎实，Vue感兴趣的也行，挑一个。对了，你觉得你有没有什么亮点可以说服我的地方呢
【我】：额···额···我觉得我写代码方面还可以吧
【面试官】：嗯嗯对，ES这方便还挺了解的，包括用JS都挺有想法。是刚工作几年是吧
【我】：嗯，工作一年了
【面试官】：哦哦才工作一年啊，那后续吧，可能接触的业务更多，我建议可以再往外再迈一步，多想想前端的往外延伸，比如说和后端的交互方面、跨域的更好方案之类的。你的基础知识我还是满意的，不过我考察的更多的可能还是一些泛化的东西，跟个人的工作经验有关的，这个没有关系，挺不错的，小姑娘，加油吧~
【我】：嗯好，谢谢
【面试官】：嗯嗯，那正式岗推不动的话，你会考虑做外包吗
【我】：额不想做外包
【面试官】：嗯我清楚了，那今天的面试就到这儿，祝你今后工作愉快
【我】谢谢

---

_over