# 滴滴# 一面1. 自我介绍2. url在输入浏览器的过程中经历了什么3. 你理解的闭包,闭包的应用场景和会引起什么4. 日常使用的优化办法5. webpack优化办法6. 强缓存和协商缓存7. 讲一下项目中低代码部分实现逻辑8. 讲讲浏览器的渲染过程9. 讲讲在浏览器渲染过程中JS是在什么时候执行的10. 代码题输出:1) 最后I’am here文字的大小,你怎么判断的```html <style type=&quot;text/css&quot;> #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=&quot;a&quot; class=&quot;a&quot;> <div id=&quot;b&quot; class=&quot;b&quot;> <p id=&quot;c&quot; class=&quot;c&quot;>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=&quot;header&quot;> <ul class=&quot;nav&quot;> <li><a href=&quot;#&quot;>Link 1</a></li> <li><a href=&quot;#&quot;>Link 2</a></li> <li><a href=&quot;#&quot;>Link 3</a></li> </ul> </div> <ul class=&quot;nav&quot;> <li><a href=&quot;#&quot;>Link 4</a></li> <li><a href=&quot;#&quot;>Link 5</a></li> </ul>```3)这个过程的结果是什么,怎么让其输出0,1,2…```jsxfor (var i = 0; i < 6; i++) { setTimeout(() => { console.log(i) })} ```结果输出6个6,改变var为let可以变为0,1,2,3,4,5还可以用:立即执行函数表达式```jsxfor (var i = 0; i < 6; i++) { (function(i) { setTimeout(() => { console.log(i); }, 0); })(i);}```4)这个结果是什么```jsxconst obj = { a: 1, b: function(){ return setTimeout( function(){ console.log(this.a) } ) }}obj.b()```答案,指向的是window上的a那要怎么让this指向obj呢?1. 使用箭头函数```jsxconst obj = { a: 1, b: function() { return setTimeout(() => { console.log(this.a); // 这里的 `this` 指向 obj }); }};obj.b(); // 输出 1```1. 使用bind```jsxconst obj = { a: 1, b: function() { return setTimeout(function() { console.log(this.a); }.bind(this)); // 显式绑定 this 到 obj }};obj.b(); // 输出 1```1. 使用变量保存(回答的这个)```jsxconst obj = { a: 1, b: function() { const self = this; // 保存 this return setTimeout(function() { console.log(self.a); // 使用保存的 this }); }};obj.b(); // 输出 1```5)将下面的代码转换为clas的形式```jsxfunction 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);``````jsxclass 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)对象查找,说下思路```jsxfind(obj, str),满足:var obj = {a:{b:{c:1}}};find(obj,'a.b.c') //返回1find(obj,'a.d.c') //返回undefined ```答案:```jsxvar obj = { a: { b: { c: 1 } } };const find = (obj, str) => { if (!(obj !== null &amp;&amp; typeof obj === &quot;object&quot;)) return; const arr = str.split(&quot;.&quot;); console.log(arr); const result = arr.reduce((pre, cur) => { return pre[cur]; }, obj); return result;};find(obj, &quot;a.b.c&quot;); //返回1find(obj, &quot;a.d.c&quot;);```反问:建议需要注意项目打包流程上的东西,以及优化相关,webpack,项目部署方面的东西。部门主要使用技术栈:vue2+webpack,node,axios,部分新项目vue3# 二面1. 自我介绍2. 怎么学习前端的,学习前端契机3. 讲一下项目里面的难点4. 手写,实现一下简历中第一个响应式5. 讲一下HTTP的五层结构6. tcp和udp的应用场景7. 说一下TCP的拥塞控制