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

关注若川视野,回复"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有哪些数据类型

  • 基本数据类型:undefinednullbooleannumberstringsymbol

  • 引用数据类型:objectarrayfunction

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链接三数之和


至此,三轮实习生面试所有能回忆起来的内容结束

推荐阅读

知乎问答:一年内的前端看不懂前端框架源码怎么办?
我在阿里招前端,我该怎么帮你?(文末有福利)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?

末尾

你好,我是若川,江湖人称菜如若川,历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)

  1. 关注若川视野,回复"pdf" 领取优质前端书籍pdf,回复"加群",可加群长期交流学习

  2. 我的博客地址:https://lxchuan12.gitee.io 欢迎收藏

  3. 觉得文章不错,可以点个在看呀^_^另外欢迎留言交流~

小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮,欢迎点击阅读,也可以星标我的公众号,便于查找

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276387.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用webBrowser取源文件取不到的点击数--选秀榜selectop.com网站内容管理系统之六

用idhttp可以取到源文件,但网站用脚本代码,源文件是看不到,并且代码的结果也取不出。webBrowser可以多次返回下载到的内容,不包括任何html语法,这个当中就有文章的点击数。在WebBrowser1DownloadComplete事件中处理&am…

真诚推荐几个最值得关注的前端公众号

前端技术日新月异,发展迅速,作为一个与时俱进的前端工程师,需要不断的学习。这里强烈推荐几个前端开发工程师必备的优质公众号,希望对你有所帮助。大家可以像我一样,利用碎片时间阅读这些公众号的文章。code秘密花园一…

Silverlight Unit Test Framework

微软在08年的时候推出了一个Silverlight的单元测试框架,该框架在Mix 08的时候与Silverlight controls同时推出的,微软工程师Jeff Wilcox一直参与维护该单元测试框架。Scott Gu对这个框架的介绍Jeff Wilcox提供的视频介绍该框架的源代码已经包括在Silverl…

Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解

转载链接:http://freeloda.blog.51cto.com/2033581/1288553 大纲 一、前言 二、环境准备 三、安装与配置Nginx 四、Nginx之反向代理 五、Nginx之负载均衡 六、Nginx之页面缓存 七、Nginx之URL重写 八、Nginx之读写分离 注,操作系统为 CentOS 6.4 x86_64…

能在任意一种框架中复用的组件,太牛了!

Web Component 是一种 W3C标准支持的组件化方案,通过它可以编写可复用的组件,同时也可以对自己的组件做更精细化的控制。更牛的是,Web Component 可以在任何一种框架中使用,不用加载任何模块、代码量小,优势非常明显&a…

stm32cubemx中文_用 STM32 通用定时器做微秒延时函数(STM32CubeMX版本)

概述​ 在使用 DHT11 的时候,时序通信需要微秒来操作,STM32CubeMX 自带一个系统时钟,但是实现的是毫秒级别的。因此就自己用通用计时器实现一个。文章目录环境:开发板:STM32F4探索者(正点原子)1…

人脸识别拷勤门禁主板_捷易讲解AI无感人脸识别考勤门禁终端设备在使用中的维护方法...

人脸识别考勤门禁终端设备虽然在出厂时,都有做密封处理,但面对细小的灰尘,并没有做到百分百防尘。灰尘对于AI无感人脸识别考勤门禁终端设备是有一定的影响的,他会沉淀在主板上、屏幕上,影响设备散热和正常工作&#xf…

【翻译】How-To: Using the N* Stack, part 3

原文地址:http://jasondentler.com/blog/2009/08/how-to-using-the-n-stack-part-3/ Java – 一种代码松散的XML 在我们学习 Fluent NHibernate 之前, 应该先了解下老式的 NHibernate 映射文件应该是怎样写的。 在一个典型的 NHibernate 配置中,你会有很…

你可能需要的网易前端三轮面经

关注若川视野, 回复"pdf" 领取资料,回复"加群",可加群长期交流前言最近一个星期面了几家公司,最后收获了心仪的网易有道offer,于是推掉了其他的面试,至于一些其他大厂,并没有投简历&am…

复习.net/c#时的小文章之万年草稿版 (全是基础概念,请懂的人绕行)

必读文:61条面向对象设计的经验原则(体会篇) C#知识点集合 (面试必备)一、显式(explicit)转换和隐式(implicit)转换的一般概念int i 100; Response.Write(i); // 这就是隐式 Response.Write(i.ToString()); // 这就是显式 一般来讲&#xff…

timertask run函数未执行_图执行模式下的 TensorFlow 2

文 / 李锡涵,Google Developers Expert本文节选自《简单粗暴 TensorFlow 2.0》尽管 TensorFlow 2 建议以即时执行模式(Eager Execution)作为主要执行模式,然而,图执行模式(Graph Execution)作为 TensorFlow 2 之前的主要执行模式&#xff0c…

如何从 0 到 1 打造团队 PC/H5 构建工具

关注若川视野, 回复"pdf" 领取资料,回复"加群",可加群长期交流学习一、前言 大家好,我叫鳗鱼,这次分享的主题是如何从 0 到 1 打造适合自己的构建部署方案。image.png先例行的自我介绍,大概 14 年…

testng接口自动化测试_Java+Maven+TestNG接口(API)自动化测试教程(10) 使用 Jenkins 构建自动化测试持续集成...

现在代码可以运行了,但是每次运行都需要我们手工去执行,并且测试报告也只能在执行测试的电脑上才能看到,我们希望能够定时自动执行测试,并且能够做到自动发送测试报告到相关人员的电子邮箱中。Jenkins 正好可以很好的完成以上诉求…

论公众号内卷

关注若川视野, 回复"pdf" 领取资料,回复"加群",可加群长期交流学习曾几何时公众号文章的标题单纯且没有套路七年前的我就是这样仅仅把公众号当做一个写文章的博客平台甚至是像有道云一样的在线笔记平台当时的标题是这样子滴《hashma…

程序异常异常代码: 0xc0000005_Java基础:看完这篇你还怕碰到异常吗?

前言在日常的开发以及平时的学习练习中,异常相信对于大家来讲并不陌生,但是对于异常的具体使用、底层实现以及分类等等可能并不是很了解。今天我就抽出了一点时间系统的整理了异常的各个知识点,希望能够帮助到大家对于Java 异常的理解与学习。…

写给初中级前端工程师的进阶指南

学习一门新技术的时候,最大的苦恼之一,大概就是不知道从何入手。典型的情况是,你大概知道学会以后,这门技术可以帮你解决什么问题。但是,怎么才能学会、循序渐进的学习路线是什么、学习范围有多大的深度和广度、涉及到…

千层套路 - Vue 3.0 初始化源码探秘

关注若川视野, 回复"pdf" 领取资料,回复"1",可加群长期交流学习刘崇桢,微医云服务团队前端工程师,左手抱娃、右手持家的非典型码农。9 月初 Vue.js 3.0 正式发布,代号 "One Piece"。大秘…

2020年大前端技术趋势解读

导Lead语如今的前端早已不再拘泥于满足页面展示,而是开始延展到通过全栈来闭环产品。这表明前端已经有能力透过业务深入产业,继而影响商业结果。这种表象的改变背后是本质的转变,从更为宏观的角度来说,前端正在通过持续的技术革新…

lc滤波器是利用电感的感抗_你对LC谐振电路你都了解吗

根据在电路中电感器L和电容C的连接方式不同,可以有两种LC谐振电路,LC并联谐振电路和LC串联谐振电路。LC并联、串联谐振电路在应用中的变化较多,是电路中分析的一个难点,只有掌握LC并联、串联电路的阻抗特性等基本概念,…

给小程序再减重 30% 的秘密​(京喜小程序首页瘦身实践)

前言—在 web 开发场景,减少代码体积虽然是性能优化的一个方向,还没到锱铢必较的程度。但是在小程序场景,由于代码包上传阶段限制了主包 2M 和总包 16M(近期微信官方正在内测将总包上限调整至 20M )的尺寸,…