滴滴前端实习面经

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

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

总结一下:

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

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

• 大概考虑到自己还是存在比较明显的项目经验短板，所以加了三面，把我推给了搞开源框架的小程序负责人，这一面比较难， 会扣细节谈认识，然后开屏幕共享，手撕中等难度的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
bar

---

7.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
setTimeout

---

8. 算法部分

这道算法是剑指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 追问: 怎么引入依赖

这个没答好

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写法固定的问题

---

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); // 20

---

5.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 -