滴滴一二面梁经
# 一面
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的拥塞控制
类似资料：