迟来的阿里和滴滴一二面面经，请查收~ | 掘金技术征文

Horace_
3,544 阅读13分钟

作者：Horace
博客：文章首发于博客~
ps：新人小白一枚，如有错误，欢迎指出~

之前的文章里说了笔者现在是大三，虽然可能现在实力还不太够，但还是踩着春招的尾巴把自己的简历投了出去，也感谢大厂给的面试机会，面试过程中也发现了自己的不足，我把面试中的一些问题总结记录了下来，希望能对社区同样有求职意向的同学有所帮助~

阿里内推笔试 + 一面(电话面)

笔试

  1. 实现一个 difference 函数，输出两个数组中不同的部分
    [1, 2, 3, 5, 4][2, 4, 7] => [1, 3, 5, 7]
  2. 给定一个 words 数组，其中可能有重复的单词，输出其中不重复的单词的个数，以及每个单词出现的次数
    (去重 + 计数)
  3. 实现一个布局，使得图片无论在什么情况下都是居中显示
    当图片大小超出屏幕大小，按照比例收缩
    。。。其他的要求忘记了

一面

笔试还剩下几十秒的时候面试官直接打电话过来开始电话面

  1. 你最后的题目是因为时间不够没写完吗？你大概还需要多久时间能写完？
    我：我对于布局这一块还不是很熟练，可能还需要很多时间
    面试官：没关系笔试不是很重要，我们看重的是问题的解决方法
    我：我觉得最后一个应该用 flex 布局解决，但我对 flex 的三个参数不是很熟
    面试官：没关系不要紧

  2. 你先做个自我介绍吧，可以从技术点、关键技术过程、你自己的一些想法啊，对于前端技术的一些见解来说

  3. 听完你的自我介绍我大概了解了，那你对你自身的发展有没有什么规划或者是想法？
    说了一下学习前端的几个阶段，然后说了说自己学习的目标，然后说了下自己工作之后的目标

  4. 我这边看到你的简历当中项目经历还是蛮丰富的，你可以说说你对于你项目的一些看法吗？
    大概说了项目中 forEach 的坑，然后去看了源码发现异步问题，最后最近发现其实是把 index 作为 key 影响 diff 以及 Vue 对数组下标变动的劫持问题
    第个项目说了性能优化，页面跳转数据缓存导致加载的问题
    第三个项目还在开发，说了主要是为了锻炼自己的后端能力，所以暂时选用了模板引擎没使用前端

  5. 你说你项目中遇到了性能优化方面的问题，你可以具体描述一下这个场景和你做的选择吗？
    大致描述了页面跳转数据缓存带来的影响以及预加载方案的失效、选择了卸载清空的方案

  6. 那你现在对于这个优化还有什么看法吗？
    (迷惑，询问了一下)
    针对这个场景的优化，你有没有什么新的方案或者是大胆的想法？
    说了一下预测用户行为进行预加载的方案

  7. 其实现在前端框架来说，Vue 和 React 比较流行，我看你对于 Vue 使用的比较多，你觉得 Vue 和 React 在虚拟 DOM 方面和数据方面有什么不一样的地方吗，就你目前了解的来说
    我说了下虚拟 DOM 的优势(内存中操作，一次性渲染)，然后就是 Vue2.0 是用的数据劫持双向绑定，3.0 用的是 Proxy 数据代理进行双向绑定，而 React 则是使用单向数据绑定，必须要用单独的状态管理

  8. 对于 Vue 和 React 的数据，你觉得有什么场景和什么缺点吗？
    说了下双向绑定和单向绑定的视图更新，场景说了嵌套组件的更新，Vue 更新到组件级别精准更新，而 React 如果有嵌套，会进行递归更新造成性能损耗，所以有了 shouldComponentUpdate，之后又有了 Fiber(咱也不知道这是啥，反正就是解决这个的)

  9. 那现在 Vue 我有一个这样的场景(忘了说了啥，反正没听懂)，你觉得 Vue 是怎么处理的？
    我：(老实巴交)您能具体描述一下这个场景吗？
    面试官：就是我有两个组件 A、B 同时依赖一份数据，而我在两个组件同时修改，你觉得会怎么样？
    我：(试探)我觉得数据的更新应该是同步的吧，数据会在内存中处理好之后交给页面去渲染显示，就比如一个删除，一个修改，应该会取最后一个结果

  10. 你说你最后一个项目是想锻炼一下后端能力，那你觉得你现在有哪些方面需要加强的，你有什么方案去实现？
    说了下后端 node、网络编程，方案四个：官方文档、实战、开源作品、技术社区

  11. 你对于 script 标签的属性了解的怎么样，有什么属性是会影响页面的加载的？
    从 src 开始(顺道提了可以跨域)，然后是 defer、async 影响脚本，说了下区别(加载顺序)，最后说了 type(了解不多)

  12. 你觉得你对前端工程化，比如 Webpack 方面了解的怎么样？
    我：了解一些，但不是很多，Webpack 了解一下 loaders、plugin、工作流程、架构方面的
    面试官：那你说说你对工作流的理解
    我：开始作妖，我也不知道我说了什么

  13. 我刚看到笔试题对于 ES6 方面的东西，你能说说 ES6 的新特性，带来的一些语法糖解决的问题吗？
    异步、箭头函数、模板字符串、数组方法的扩充、解构赋值、默认参数、块级作用域、Map 和 Set

  14. 现在前端工作中对于异步的处理比较多，你能说下 async/await 和 Promise 吗？
    扯了回调和 generator(其实不是很了解)说了 async/await 把异步变成同步的，Promise 说了使用链式调用解决回调地狱(回调函数延迟绑定、返回值穿透、错误冒泡) => 回去提了一下 async/await 隐式返回 Promise

  15. 你在学习中或者说在做项目的时候有遇到过跨域的问题吗？
    有，Vue 结合后端请求数据的时候会跨域
    面试官：那你说说跨域和跨域的解决方案吧
    我：JSONP(跨域读、写、资源嵌入，然后结合之前的 script)、CORS、WebSocket(双向通信解决)、node 中间件代理、Nginx 反向代理、location.hash

  16. WebAssembly 有了解过吗？
    果断说没有

  17. 你平时代码管理使用什么工具？
    我：git
    面试官：那你说说 git 常用的指令有哪些？
    我：提交三板斧：git add | git commit | git push
    查看日志：git log => 显示 id 和操作
    回滚：git reset Head | git reset ID
    查看状态：git status
    多人协作的时候：git branch |  git checkout | git merge
    git diff | git rm | git mv | git init | git pull
    (竟然忘记 git config 了。。。)

  18. 你在项目性能优化的时候提到了图片的懒加载，那现在对于静态资源的优化，你觉得 HTTP1.1 和 HTTP2.0 有什么优化
    我说我了解的不多，就从我了解的几个方面说下，说了头部压缩、多路复用(瞎讲，其实不是很懂)

  19. 我这边要了解的就差不多结束了，你有什么问题想问吗？

  • 针对我的表现有什么学习建议(广度、不要钻深度坑死自己，开源作品的目标尝试)
  • 企业级开发对前端框架的选择：Vue、React
  • 之前说的加载的那个性能优化您有什么更好的方案

结束加了个微信，自我感觉挺凉的

阿里二面(电话面)

  • 自我介绍，问了下 GPA 满分是多少，问了在专业中的成绩排名，还问了下英语水平情况(因为我填了熟练)

  • 问了下项目情况

    • 因为我说了 wxParse 组件渲染的时候 key 造成的问题，然后就根据 Vue 的 key 问了一系列问题
    • 为什么 wxParse 会重复渲染
    • 项目中用了 vue-qr，vue-qr 转换二维码怎么实现的
    • wxParse 不停的渲染阻塞其他逻辑，其他逻辑是执行了还是没执行，还是执行的很慢？
    • 顺藤摸瓜问了我 js 是单线程，那两个同时运行的动画怎么实现的

  • 顺延项目问了 Vue 数组元素监听，怎么实现数据具体元素的监听

    • 为什么可以监听 pop、push 这类的改变

  • import 和 require 的区别

    • 面试官说我说的太语法化，直接问 import 在浏览器中怎么运行的

  • for in 和 for of 的区别

  • relative 定位

  • 宽始终是高的 2 倍怎么实现

  • 浏览器缓存

    • 提到了 service worker、memory cache、disk cache 和 push cache，然后就问 service worker 怎么更新，memory cache 和 disk cache 怎么缓存的(不太了解。。)

  • 如何进行强缓存

  • 两个窗口怎么共用缓存

  • 两个标签页之间怎么通信

  • 输入 URL 到页面显示

    • 构建 DOM 树和样式计算有顺序吗，还是同时进行的？
    • 提高了浏览器补全协议，那浏览器怎么知道协议？

然后问了面试官几个问题就结束了

说实话阿里面完之后自我感觉还是挺凉的，自己的基础还是有欠缺，知识体系不够完善，果然二面之后一段时间都没有面试官来联系我，然后就转投了滴滴

滴滴一面(视频面)

  • 自我介绍，面试官人很好，就像是在聊天一样

  • 介绍下项目

    • 直接就看最后一个项目，问我模板引擎的选择，然后面试官问我有没有用过其他的模板引擎(说了 ejs)，然后面试官笑着说他喜欢 pug，本来是想问这个
    • 有没有想过用 SSR
    • eslint 的作用，在项目中使用的感受
    • 怎么去找出代码中一些比较低级的语法的错误

  • 有没有用过 Vuex，说下 Vuex

    • Mutation 的作用

  • 写一个编程题

    let x = {
  a: {
    b: {
      c: 1
    }
  }
}
let y = 'a.b.c'

function fun(obj, str) {}

console.log(`fun(x,y):`, fun(x, y)) // 1

    实现一个 fun 方法完成输出
    然后在面试官的带领下考虑边界和优化(说实话自己太菜了，全靠面试官引导和提醒)

  • 结束的时候问了两个问题

滴滴二面(视频面)

面试官说设备有点问题没开摄像头

  • 面试官说找找我的简历让我做个自我介绍

  • 说说项目的情况，看到我有一个商业项目已经上线了

    • 问了项目前端是几个人做的
    • 介绍下商业项目实现的功能(说了一堆功能)
    • 面试官说实现的功能还挺多的，让我详细描述下简历中写到的一个问题(详细说了下，并说了解决过程)，说完了之后问我还有没有遇到什么问题(说了支付接口返回结果的问题，用 vue-qr 转二维码还有造成的渲染过慢问题)
    • 讲讲在做商业项目中 git 使用的流程
    • 我看你后面两个项目的数据库一个是用 mysql，一个是 mongodb，你能讲讲为什么吗？(我和面试官都笑了，我说了客观原因和数据约束、开发便捷度方面)

  • CSS 中的定位属性有哪些？
    static、absolute、relative、sticky、fixed

  • 在 JS 中的数据类型有哪些？

  • Symbol 类型一般是用来做什么的？

  • null 和 undefined 有什么区别？

  • 怎么判断一个变量是不是数组？
    instanceOf、isPrototypeof、Array.isArray()、Object.prototype.toString.call()之类的

  • Promise 中有一个 all 方法，你能讲一下它的作用是什么吗？

    • 那在没有 Promise.all 之前也要做到这种效果的话，可以怎么去实现？
      面试官提示我说就是有很多个异步操作，怎么判断所有的异步操作都已经结束并拿到返回的结果
    • 有没有了解过 new Promise 的时候怎么去创建一个 Promise 对象

  • 防抖和节流？他们的区别是什么？
    举了个查看对象的按钮的例子搞得两个人都在笑

  • http 中的 304 状态码是什么？

  • 你对 React 熟悉吗？

    • 那我想听下你对 Vue 和 React 这两个框架自己的理解和看法，包括在使用的过程中，优劣什么都可以
      说了一些自己的见解和两个框架的区别，然后说 Vue 像初恋一样，所有美好的东西都提供给你，React 就比较狂野一些，什么都要你自己做，把面试官逗笑了

  • 最后几个比较简单的问题

    • 你大概从大二开始接触前端的，学校的前端课程应该很少吧
    • 大部分前端都是自学或者靠其他时间，你是怎么学习前端的东西呢？
    • 什么时候能来实习

滴滴的面试体验还是很好的，和阿里的面试官一样会去引导你回答一个问题，阿里和滴滴看重的都是基础和实际解决一个问题的能力

最后说几句

笔者在春招的尾巴面了好几家公司，总体来说题目还是比较简单的，对于应届生来说，基础真的真的很重要，文章中只列出了印象比较深刻的两家，目前是拿到了滴滴 HR 小姐姐的口头 offer

通过面试其实也是一个很好的学习过程，一是在准备面试的过程中可以去不断地完善自己涉及不多的方面，而是在面试的过程中可以很明显的感受到自己到底哪一方面还不够好，这样在之后的学习中就会更加的有目的性。在面试的过程中也可以积累一些面试经验和技巧，面试是双向选择的过程，这个过程中破冰也是很重要的，如果说你让面试官一直板着脸对着你，你自己也会很紧张。所以说面试的技巧是很重要的，面试也是自己学习过程中重要的一环，因为面试的过程中总是可以意外的收获到很多

面试不能怕失败，想要一步就成功很难，要在失败的过程中不断地进步，屡败屡战，找到适合自己的路，最后也祝大家拿到自己心仪的 offer~

avatar
文章
阅读
粉丝