2019-07-29 16:24 已编辑北京交通大学前端工程师

关注

滴滴实习一面面经

自己在滴滴出行的官网实习申请，滴滴的HR对于投递的回复也很及时，最后也拿到了面试机会。和面试官约在周一的下午两点，然后提前在工作室外面等待着面试的来临。刚刚两点半面试官就发来了消息让我面试，说实在还是有一点紧张😂。然后在工作室外面WIFI也不好，视频一直卡，但是面试官挺好的让我回寝室再面试。

下面有些题目我只会说一下，小伙伴有不明白的可以自行查阅资料。

1、使用过HTML5哪些新特新？语义化标签的使用场景？

这个问题感觉答得不是太好，我自己只了解过新标签、canvas、音频视频这些，最后下来查资料才发现原来SVG绘图、地理定位、拖放AP、Web Storage这些都是HTML5的😂（具体了解：HTML5的十大新特性）。但是还好自己知道的答得还不错。

2、浮动？什么时候会用到浮动布局？清除浮动

这个问题也还算比较简单，小伙伴不清楚的可以自行查阅资料

3、BFC

BFC触发条件

float不为none
positionposition 为 absolute 或 fixed
overflow 不为 visible 的块元素
display 为 inline-block, table-cell, table-caption

BFC布局规则

BFC容器是一个独立的容器
计算宽高时浮动元素也参与计算
BFC区域不会与浮动元素重合

解决的问题

浮动、margin重叠

4、浏览器呈现一个页面的过程？

这里其实会设计到很多知识，比如DNS解析、三次握手、四次挥手、IP协议等。大家可以查阅一下资料，我就不班门弄斧了。

5、重绘和回流？如何预防重绘和回流

面试官开始说的是重排，我当时真的不知道什么是重排，然后面试官说重绘、重排的时候我才知道重排就是回流😂。

重绘是影响元素的集合属性，但是不影响布局，而回流会是因为影响了布局。回流会消耗性能所以要避免回流。

具体可以参考：juejin.im/post/5a9923…

6、盒模型

IE盒模型和标准盒模型。它们在计算盒子的宽度有不同。面试问我平常用那种，我说看情况，但是IE盒模型用的多一些，因为标准盒模型会改变元素宽度有时候感觉有一点麻烦。

:root {
    box-sizing: border-box
}
* {
    box-sizing: inherit
}
复制代码

7、定位

主要讲了绝对定位和粘性定位。如果不用粘性定位怎么实现一个粘性定位？

8、var、let、const的区别

这几个都是声明变量的，它们的区别我相信大家都很清楚。但是需要注意的是var声明的变量会成为window的属性，即：

var a = 1
console.log(window.a) // 1
复制代码

然后给我出了2道题：

let a = 2
function A() {
  var a = 1
  console.log(window.a)
}
复制代码

function A() {
  console.log(a)
  let a = 2
}
复制代码

9、this指向问题

默认绑定
隐式绑定
显示绑定
new
箭头函数

大家可看看【刘小夕】小姐姐的文章写得很仔细：juejin.im/post/5c96d0…

面试官出的题目

var obj = {
    name: 'foo',
    fun1: function() {
        console.log(this.name)
    },
    fun2: () => {
        console.log(this.name)
    }
}
var fun3 = obj.fun1
fun3()
obj.fun1()
obj.fun2()
复制代码

这里有一个坑就是window上有name属性，可以用它实现跨域,是一个空字符串。

10、原型，原型链

这也是一个基础的问题了，相信大家都知道。

面试官给的题目

Function.prototype.a = 1
Object.prototype.a = 2
Object.a = ?
复制代码

11、EventLoop?宏任务微任务？

参考：juejin.im/post/5bac87…

面试官给的题目

setTimeout(function() { console.log('a') })
var p = new Promise(function(resolve, reject) {
    console.log('b')
    resolve()
    console.log('c')
})
p.then(function() { console.log('d') })
console.log('e')
复制代码

12、Promise

刚刚在时间循环的时候说了Promise，然后面试官让我大概说了一下promise，并让我说一下实现一个promise的思路。emmm...说实在还真的有点难。参考大佬的文章：juejin.im/post/5b31a4…

最后面试官问我，大概是调用then和catch最后返回的promise实例是新的还是旧的？

大家怎么看？

13、实现一个自适应的正方形

我说了vw和padding两种方法。大家有其他的方法可分享一下。

14、事件冒泡

有一个列表上面有各种消息，类似下面

需求是点击消息打开对应的软件，重点在于怎么判断点击的是哪一个。

我的方法是：给每一个添加事件以及给父元素添加通过冒泡。并且说了冒泡怎么判断事件源对象以及优点。

15、说一说Vue响应式原理

大家可以看看Vue官方文档，以及大佬文章：github.com/DMQ/mvvm

16、发布订阅模式，使用发布订阅需要注意什么？

    let publisher2 = {}
    publisher2.clientList = {}
    publisher2.listen = function (key, fn) { // key表示订阅者想要接收消息的关键字
      if (!this.clientList[key]) {
        this.clientList[key] = []
      }
      this.clientList[key].push(fn)
    }
    publisher2.trigger = function () {
      let key = [].shift.call(arguments)
      let fns = this.clientList[key]
      if (!fns || fns.length == 0) {
        return false
      }
      for(let i = 0, fn; fn = fns[i++];) {
        fn.apply(this, arguments)
      }
    }

    publisher2.listen('88', function (price, data) {
      console.log('88',price)
      console.log(data)
    })
    publisher2.listen('100', function (price, data) {
      console.log(price)
      console.log(data)
    })
    publisher2.trigger('88', 20000, 183)
复制代码