关注若川视野
,回复"pdf" 领取资料,回复"加群",可加群长期交流学习
滴滴前端实习面经
滴滴是我投简历之后第二家面试的公司, 国庆节前两三天投的简历, 国庆后复工第一天就给我打了电话约一面。
那时候因为还没什么面试经验,所以一面有些紧张,很多题虽然是八股题, 但因为都是第一次答,所以有些磕巴和不全面(后来就成老油条了)。
总结一下:
一面问的都是常规基础题, 主要考察对知识掌握的广度,初级前端需要的技能栈基本都有所涉及(不超出简历所写的技能范围)。
二面的时候, 因为面试官对我的简历比较感兴趣,所以将近一半时间都在问项目, 还有我自己和前端无关的一些动手折腾的经历。
大概考虑到自己还是存在比较明显的项目经验短板,所以加了三面,把我推给了搞开源框架的小程序负责人,这一面比较难, 会扣细节谈认识,然后开屏幕共享,手撕中等难度的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 追问: 怎么引入依赖
这个没答好
@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); // 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链接三数之和
至此,三轮实习生面试所有能回忆起来的内容结束
推荐阅读
知乎问答:一年内的前端看不懂前端框架源码怎么办?
我在阿里招前端,我该怎么帮你?(文末有福利)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?
末尾
你好,我是若川,江湖人称菜如若川,历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)
关注
若川视野
,回复"pdf" 领取优质前端书籍pdf,回复"加群",可加群长期交流学习我的博客地址:https://lxchuan12.gitee.io 欢迎收藏
觉得文章不错,可以点个
在看
呀^_^另外欢迎留言
交流~
小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间
【源码精选】
按钮,欢迎点击阅读,也可以星标我的公众号,便于查找