一份热乎乎的滴滴前端面经

2,089 阅读6分钟

滴滴前端实习面经

滴滴是我投简历之后第二家面试的公司, 国庆节前两三天投的简历, 国庆后复工第一天就给我打了电话约一面。

那时候因为还没什么面试经验,所以一面有些紧张,很多题虽然是八股题, 但因为都是第一次答,所以有些磕巴和不全面(后来就成老油条了)。

总结一下:

  • 一面问的都是常规基础题, 主要考察对知识掌握的广度,初级前端需要的技能栈基本都有所涉及(不超出简历所写的技能范围)。

  • 二面的时候, 因为面试官对我的简历比较感兴趣,所以将近一半时间都在问项目, 还有我自己和前端无关的一些动手折腾的经历。

  • 大概考虑到自己还是存在比较明显的项目经验短板,所以加了三面,把我推给了搞开源框架的小程序负责人,这一面比较难, 会扣细节谈认识,然后开屏幕共享,手撕中等难度的JavaScript题,编程题和算法题。

注意, 面试题只给出整体思路,以及某些需要特别注意的地方,部分会附上一些个人推荐的文章链接,但答题细节不做全部展开。

一面

滴滴的面试非常准时,视频会议的入口在开始前十几分钟前才以短信的形式发过来。两点钟的面试,对面一点五十九分打开摄像头。面试官是一个小姐姐,很漂亮人也很温柔, 听鼻音是感冒了,但依然会很耐心地和你说不要紧张,问题没答好还会帮着给提示,总之面试体验非常nice啦~让我这个面试经验几乎为零的小菜鸡不至于太紧张。

1. css部分

1.1 盒模型

开头面的好几家都连续问到了这个问题,所以这道基础之基础题可以多看,争取回答的滴水不漏。

关键点: 不要漏掉IE的怪异盒模型

1.2 怎么实现一个水平居中

先说,自己实际中常用的就两种

  • flex三板斧

  • 绝对定位

然后补充说一些其它的

有些比较trick,了解就好: absolute + margin负值/cacl/50%/translate、writing-mode + text-align、基于视口、grid三板斧

Tips: 《CSS揭秘》有谈到克服解决居中问题的历史,循序渐进,比满天飞的罗列居中方法的文章有意思的多,如果觉得死记硬背记不全,可以从历史演变的角度来理解记忆。

垂直居中-《CSS揭秘》-微信读书

早期方法,表格布局法/行内块法/绝度定位 → translate → 视口单位 → Flexbox → Grid

再就是些奇技淫巧: 快狗打车-:before搭配vertical-align:middle

二面

二面的是个能明显感觉到技术很强的小哥哥

后来加了微信才知道,小哥哥已经在滴滴工作四五年了

1. 聊项目

这一块都是对着简历里写的东西问的,不只有项目,还有自己以前做的各种奇奇怪怪的折腾和开发经历

不展开来说,只把问题记录一下吧~

1.1 你用lua脚本的写的一个小应用,介绍一下

1.2 追问: 怎么实现这里面的广告拦截

1.3 展示一下字体设计

1.4 组件库项目的设计思路

2. async有用过吗, 它是怎么实现异步的

  • 介绍了Promise和Generator

  • Generator底层实现机制--协程

  • 协程执行流程

  • 协程如何与Promise配合

  • 封装执行生成器代码(参考co)

  • 回到async/wait的语法糖

3. ES6怎么兼容低版本的浏览器

正确思路应该是,从Babel和AST结合去展开讲,比如

Babel将 ES6 源码转换为 AST,然后再将 ES6 语法的 AST 转换为 ES5 语法的 AST,最后利用 ES5 的 AST 生成 JavaScript 源代码

对了,当然也不要忘记去讲Polyfill

推荐参考:Babel文档-@Babel/polyfill(已经拆分为core-js和regenerator-runtime)

但我那时候一下子只想到了Babel

所以选择了两个我自己熟悉的角度切入(后来发现其实跑题了......)

我经常会用Babel去帮助深入理解一些ES6的特性

举了两个例子:

  • for循环中的let的隐蔽作用域, 编译成ES5是什么样子

  • ES6怎样去编译class

后端开发了解过吗

答: 大二学了java,但掌握的很浅

然后正在学习node……

有用过TS吗

答: typescript也正在待学习清单上……

小哥哥继续问: 尽可能说一下对TS了解

答: (胡言乱语)TS增加了泛型, 更向java靠拢……

实在扯不下去了,小哥哥看我不怎么了解也没问下去了

连续水了node和typescript的问题,出现两块这么大的空白,感觉已经有点崩了

三面

第三面是加面(滴滴的前端实习本来只有两面),二面的小哥哥把我推给了滴滴小程序部门的leader,这位大佬主导开发了滴滴一个开源框架mpx,但其实给人感觉特别平易近人

1. react有一些新特性,比如fiber,谈谈你对react fiber的认识

常规问题,愿意的话,可以讲的非常深入

2. 说说你对打包器的了解

讲了讲以前手动封装一个JavaScript打包器的经历

2.1 追问: 怎么引入依赖

这个没答好

  1. @babel/parser 解析入口文件(已经过时, 需要拆分),获取 AST

  2. 使用 @babel/parser 解析并读取器解析入口文件

  3. 使用 @babel/parser(JavaScript解析器)解析代码,生成 AST(抽象语法树)

  4. 解析 AST,解析入口文件内容,获取所有依赖模块 dependencies

推荐阅读

如何用 Babel 为代码自动引入依赖

3. 你在简历里写到,用styled-components实践了CSS in JS,谈一谈你的认识

先讲一下ES6的标签模板

然后讲styled-components相对CSS mosules的优势

  • 比如可以直接写JavaScript逻辑代码, 而且不必再采用内联样式

  • 解决了一些CSS modules中很机械的写法,比如类名不能使用连接符,className写法固定的问题。

点赞支持下吧,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)