滴滴前端实习面经
滴滴是我投简历之后第二家面试的公司, 国庆节前两三天投的简历, 国庆后复工第一天就给我打了电话约一面。
那时候因为还没什么面试经验,所以一面有些紧张,很多题虽然是八股题, 但因为都是第一次答,所以有些磕巴和不全面(后来就成老油条了)。
总结一下:
-
一面问的都是常规基础题, 主要考察对知识掌握的广度,初级前端需要的技能栈基本都有所涉及(不超出简历所写的技能范围)。
-
二面的时候, 因为面试官对我的简历比较感兴趣,所以将近一半时间都在问项目, 还有我自己和前端无关的一些动手折腾的经历。
-
大概考虑到自己还是存在比较明显的项目经验短板,所以加了三面,把我推给了搞开源框架的小程序负责人,这一面比较难, 会扣细节谈认识,然后开屏幕共享,手撕中等难度的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 追问: 怎么引入依赖
这个没答好
-
@babel/parser 解析入口文件(已经过时, 需要拆分),获取 AST
-
使用
@babel/parser
解析并读取器解析入口文件 -
使用
@babel/parser
(JavaScript解析器)解析代码,生成 AST(抽象语法树) -
解析 AST,解析入口文件内容,获取所有依赖模块
dependencies
推荐阅读
如何用 Babel 为代码自动引入依赖
3. 你在简历里写到,用styled-components实践了CSS in JS,谈一谈你的认识
先讲一下ES6的标签模板
然后讲styled-components相对CSS mosules的优势
-
比如可以直接写JavaScript逻辑代码, 而且不必再采用内联样式
-
解决了一些CSS modules中很机械的写法,比如类名不能使用连接符,className写法固定的问题。
点赞支持下吧,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)