滴滴一二面梁经

# 滴滴

# 一面

1. 自我介绍
2. url在输入浏览器的过程中经历了什么
3. 你理解的闭包，闭包的应用场景和会引起什么
4. 日常使用的优化办法
5. webpack优化办法
6. 强缓存和协商缓存
7. 讲一下项目中低代码部分实现逻辑
8. 讲讲浏览器的渲染过程
9. 讲讲在浏览器渲染过程中JS是在什么时候执行的
10. 代码题输出：

1) 最后I’am here文字的大小，你怎么判断的

```html
<style type="text/css">
    #a {font-size:12px}
    div p{ font-size:13px }
    .a .b .c{ font-size:15px }
    #b{ font-size:15px }
    div .c{ font-size:15px }
</style>
<div id="a" class="a">
    <div id="b" class="b">
         <p id="c" class="c">I’am here</p>
    </div>
</div>
```

css的选择器优先级，id选择器大于class选择器大于标签选择器。

2）这个li会呈现什么效果什么颜色，为什么？

```html
<style>
    #header .nav > li a:hover {
        color: green;
    }
    .nav li a:hover {
        color: red;
    }
</style>

  <div id="header">
      <ul class="nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
      </ul>
  </div>

  <ul class="nav">
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
  </ul>
```

3）这个过程的结果是什么，怎么让其输出0，1，2…

```jsx
for (var i = 0; i < 6; i++) {
  setTimeout(() => {
    console.log(i)
  })
}
```

结果输出6个6，改变var为let可以变为0，1，2，3，4，5

还可以用：立即执行函数表达式

```jsx
for (var i = 0; i < 6; i++) {
  (function(i) {
    setTimeout(() => {
      console.log(i);
    }, 0);
  })(i);
}
```

4）这个结果是什么

```jsx
const obj = {
    a: 1,
    b: function(){
        return setTimeout(
            function(){
                console.log(this.a)
            }
        )
    }
}
obj.b()
```

答案，指向的是window上的a

那要怎么让this指向obj呢？

1. 使用箭头函数

```jsx
const obj = {
    a: 1,
    b: function() {
        return setTimeout(() => {
            console.log(this.a); // 这里的 `this` 指向 obj
        });
    }
};
obj.b(); // 输出 1
```

1. 使用bind

```jsx
const obj = {
    a: 1,
    b: function() {
        return setTimeout(function() {
            console.log(this.a);
        }.bind(this)); // 显式绑定 this 到 obj
    }
};
obj.b(); // 输出 1
```

1. 使用变量保存（回答的这个）

```jsx
const obj = {
    a: 1,
    b: function() {
        const self = this; // 保存 this
        return setTimeout(function() {
            console.log(self.a); // 使用保存的 this
        });
    }
};
obj.b(); // 输出 1
```

5）将下面的代码转换为clas的形式

```jsx
function Modal(x,y){
    this.x=x;
    this.y=y;
}
Modal.prototype.z=10;
Modal.prototype.getX=function(){
    console.log(this.x);
}
Modal.prototype.getY=function(){
    console.log(this.y);
}
Modal.n=200;
Modal.setNumber=function(n){
    this.n=n;
};
let m = new Model(10,20);
```

```jsx
class Modal {
  z = 10;
  // 构造函数
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  // 实例方法
  getX() {
    console.log(this.x);
  }

  getY() {
    console.log(this.y);
  }

  // 静态属性
  static n = 200;

  // 静态方法
  static setNumber(n) {
    this.n = n;
  }
}

// 创建实例
let m = new Modal(10, 20);
```

6）对象查找，说下思路

```jsx
find(obj, str)，满足:
var obj = {a:{b:{c:1}}};
find(obj,'a.b.c') //返回1
find(obj,'a.d.c') //返回undefined
```

答案：

```jsx
var obj = { a: { b: { c: 1 } } };

const find = (obj, str) => {
  if (!(obj !== null && typeof obj === "object")) return;
  const arr = str.split(".");
  console.log(arr);
  const result = arr.reduce((pre, cur) => {
    return pre[cur];
  }, obj);
  return result;
};

find(obj, "a.b.c"); //返回1
find(obj, "a.d.c");
```

反问：建议

需要注意项目打包流程上的东西，以及优化相关，webpack，项目部署方面的东西。

部门主要使用技术栈：vue2+webpack，node，axios，部分新项目vue3

# 二面

1. 自我介绍
2. 怎么学习前端的，学习前端契机
3. 讲一下项目里面的难点
4. 手写，实现一下简历中第一个响应式
5. 讲一下HTTP的五层结构
6. tcp和udp的应用场景
7. 说一下TCP的拥塞控制

滴滴一二面梁经

全站热榜

创作者周榜