滴滴前端实习面经
滴滴是我投简历之后第二家面试的公司， 国庆节前两三天投的简历， 国庆后复工第一天就给我打了电话约一面。
那时候因为还没什么面试经验，所以一面有些紧张，很多题虽然是八股题， 但因为都是第一次答，所以有些磕巴和不全面(后来就成老油条了)。
总结一下:
一面问的都是常规基础题， 主要考察对知识掌握的广度，初级前端需要的技能栈基本都有所涉及(不超出简历所写的技能范围)。
二面的时候， 因为面试官对我的简历比较感兴趣，所以将近一半时间都在问项目， 还有我自己和前端无关的一些动手折腾的经历。
大概考虑到自己还是存在比较明显的项目经验短板，所以加了三面，把我推给了搞开源框架的小程序负责人，这一面比较难， 会扣细节谈认识，然后开屏幕共享，手撕中等难度的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
2. JS部分
2.1 JavaScript有哪些数据类型
基本数据类型：
undefined、null、boolean、number、string、symbol引用数据类型：
object、array、function
Tips: 千万不要漏掉null，undefined，Symbol
2.2 JavaScript是单线程还是多线程
本质考察的是消息队列和事件循环
首先，JavaScript是单线程，这是它的核心特征，现在和未来都不会改变，即使加入Web Worker，但子线程完全受主线程控制，不会改变JavaScript单线程的本质
为了统筹调度唯一主线程上的各种任务，引入消息队列和时间循环机制
有需要的话可以展开详述，不过这就是另一个大坑了......
JS部分除了这两道，应该还问了几道JavaScript相关题，暂时想不起来了
3. 浏览器部分
3.1 项目中有遇到过跨域的问题吗，你是怎么解决的
我当时回答的有些支离破碎, 这里直接给出一位朋友的公众号文章吧
3.2 现在使用的浏览器是单进程还是多进程
讲了一遍Chrome架构的发展史:
单进程浏览器时代(存在的几个问题) → 多进程浏览器时代(新加入了哪些进程) → 面向服务架构的时代(工作内容以及有什么意义)
3.3 描述一下浏览器渲染过程
这里只给出骨架
HTML解析 → 字节流Bytes转为Tokens → 生成node节点 → 构造DOM树 → 同时请求CSS和JavaScript文件 → 响应CSS数据, 构建CSSOM → 响应并执行JavaScript → 继续构建DOM → 构建布局树 → 分层 → 分块→ 合成(包括光栅化)
4. 计网部分
4.1 常见状态码有哪些
先从整体讲起
状态码 | 含义 |
1×× | 指示信息–表示请求已接收，继续处理 |
| 2×× | 成功–表示请求已被成功接收、理解、接受 |
3×× | 重定向–要完成请求必须进行更进一步的操作 |
4×× | 客户端错误–请求有语法错误或请求无法实现 |
5×× | 服务器端错误–服务器未能实现合法的请求 |
平时遇到比较常见的状态码有:200，301，302，304，400，401，403，404，422， 500
然后逐个讲，说到304的时候，提到了检查缓存
这个时候，小姐姐开始灵魂追问(属于自己把自己带进坑了)
4.2 追问: 是在命中强缓存还是协商缓存的时候才返回304呢?
协商缓存生效，返回304和Not Modified
4.3 追问: 那聊聊浏览器缓存
推荐文章
浏览器缓存
4.4 三握手的过程
直接放一篇写的非常好的文章
通俗大白话来理解TCP协议的三次握手和四次分手
4.5 OSI七层模型
我一直背的是五层模型，其实很多地方都用的OSI标准，学校课本也是，但我不记得了......
安利一波阮一峰老师的TCP/IP协议入门(很基础，但讲的非常清晰)
互联网协议入门（一）阮一峰
互联网协议入门（二）阮一峰
回答的时候，不知怎么的，扯到了HTTPS(又一次把自己带偏)
4.5 追问: HTTPS位于哪一层呢
HTTPS所处的安全层插入在TCP和HTTP之间，连接了传输层和网络层
但并不会影响到上层的 HTTP 协议，也不会影响到下层的 TCP/IP
5. Git部分
5.1 用过哪些Git命令
balabala说了一大通~
对于Git还是挺有信心的，因为参与过几个项目的PR，包括github某大名鼎鼎的女装项目(大误
Git闯关游戏也基本通关了，自以为问题不大
现在想想，估计就是给接下来的问题挖了坑吧
5.2 怎么切换到新分支
git checkout咯
创建 + 切换分支就是git checkout -b 'new branch'
5.3 手上的代码还不足够commit，需要暂存当前工作并返回上一个commit，应该用哪个Git命令
前面讲了很多我用过的命令，小姐姐估计特意挑了一个我没说的
这个情景没答上来，因为确实不记得有对应的处理命令了。瞎说了一个git add到缓冲区，然后checkout到另一个分支。
小姐姐提示说这样不行哦，会污染当前的工作区状态，然后给出了正确操作:git stash， 还建议我回去可以了解一下
git方面，推荐一篇从实践里总结出来的好文(非全面归纳)，可惜自己当初没有细看
前端瓶子君-珍藏多年的 Git 问题和操作清单
6. 框架
框架题基本被我水掉了
因为我这段时间用的都是React
Vue还是一年多前对着文档写过东西，中间一直没捡回来，所以和滴滴目前Vue为主的技术栈不太吻合，和小姐姐也不太聊的上来，中间甚至还有一小段尴尬的沉默......
最后还是象征性地问了一个八股题
6.1 React和Vue的区别
可以围绕的角度: 数据绑定、数据渲染、生命周期、使用场景、开发风格、操作粒度等等.....还可以提一嘴Vue3做出的改变
7. 分析输出
这两道题因为是现场给出的，都找不到原题了，this指向题是我根据记忆大概重写的，异步分析题是在网上找的类似的
7.1 this指向分析
var myObject = {
foo: "bar",
func: function() {
var self = this;
console.log(this.foo);
console.log(self.foo);
(function() {
console.log(this.foo);
console.log(self.foo);
}());
}
};
myObject.func();
输出
bar
bar
undefined
bar7.2 异步分析
在网上找了一道题，比小姐姐出的面试题要难一丢丢，这道题比起原面试题，多了async/wait，少了一个setTimeout(面试题里有两个定时器)，能正确分析出这道题，对于异步最基础的认知应该就没问题了
async function foo() {
console.log('foo')
}
async function bar() {
console.log('bar start')
await foo()
console.log('bar end')
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
}, 0)
bar();
new Promise(function (resolve) {
console.log('promise executor')
resolve();
}).then(function () {
console.log('promise then')
})
console.log('script end')
输出结果放在这里，分析完了可以核对:
script start
bar start
promise executor
script end
foo
bar end
promise then
setTimeout8. 算法部分
这道算法是剑指offer原题，小姐姐出题的时候也直说了是剑指offer上的
在一个 n * m 的二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。
这道题用二分查找法或者坐标系法(原书解法)都可以搞定
直接放LeetCode链接二维数组中的查找
二面
二面的是个能明显感觉到技术很强的小哥哥
后来加了微信才知道，小哥哥已经在滴滴工作四五年了
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的问题，出现两块这么大的空白，感觉已经有点崩了
4. 你简历上写了对V8有过了解，那么说说JavaScript和C有什么区别
一开始没有get到重点，只说了JavaScript是动态的(不需要检查数据类型)，弱类型(支持隐式类型转换)的语言，而C是静态(需要检查数据类型)的，弱类型(支持隐式类型转换)的语言。
然后小哥哥提醒，可以说说两者在编译上的区别吗
追问: JavaScript和C在编译上的区别
本质就是考察JavaScript编译原理，这里直接放一个对比图吧
5. 追问: 你说C编译生成了一个exe文件，那这个exe文件里具体存储的是什么呢
这个不是很了解......(不敢深入说)
6. 说一说你对JIT的认识
细节不再赘述，这里面可以讲的太多， 直接上总图
三面
第三面是加面(滴滴的前端实习本来只有两面)，二面的小哥哥把我推给了滴滴小程序部门的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写法固定的问题
4. 性能优化
这个可以说的太多太多了
先从自己的经验切入，扯了一些实际用到过的，比如从DOMFragment转移到虚拟DOM啦， 把耗时操作分解到微任务和延时队列啦，will-change和requestAnimationFrame啦，webpack首屏优化啦，script的defer和async啦，懒加载啦，balabala挺多的
实践经验讲完了，然后系统归纳优化方案
加载阶段
减少关键资源(HTML、JavaScript、CSS)个数
减少关键资源大小
降低关键资源的 RTT 次数
交互阶段
减少 JavaScript 脚本执行时间
避免强制同步布局
避免布局抖动
尽可能利用 CSS 合成动画
避免频繁的垃圾回收
关闭阶段
如何安全退出
再送一张图
5. 手写: 组合继承
冴羽大佬的博客里对这个梳理的很好，但那篇文章更多像是红宝书的读书笔记，所以建议直接反复阅读红宝书上继承的部分(写的非常精彩)
参考范例引用自冴羽的博客
JavaScript深入之继承的多种方式和优缺点
function Parent (name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
console.log(this.name)
}
function Child (name, age) {
Parent.call(this, name);
this.age = age;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
var child1 = new Child('kevin', '18');
child1.colors.push('black');
console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]
var child2 = new Child('daisy', '20');
console.log(child2.name); // daisy
console.log(child2.age); // 205.1. 追问: 分析你写的组合继承中的原型链
这个很简单，说明白就好了
7. 手写: async
这个网上的资料很多，我就不把自己写的贴出来了: )
8. 算法: 三数之和
给你一个包含 n 个整数的数组 nums，判断 nums 中是否存在三个元素 a，b，c ，使得 a + b + c = 0 ？请你找出所有满足条件且不重复的三元组。
这道题在LeetCode原题上稍有改动，条件里的 a + b + c = 0 改成了 a + b + c = target，不过都是差不多的啦~
思路: 双指针夹逼 + 二分法加速
照例，放上LeetCode链接三数之和
至此，三轮实习生面试所有能回忆起来的内容结束！
- END -
6539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
