滴滴一二面梁经

# 滴滴

# 一面

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

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

```html


```

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

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

```html


    
    
  

  
      
• Link 4
  
      
• Link 5
  
  

```

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的拥塞控制