前端面试三

一.闭包是什么？应用场景，优缺点，解决方案？

1内部函数可以访问外部函数的变量就叫做闭包,简单理解就是 ,一个作用域可以访问到另外一个函数内部的局部变量。

2. 闭包的应用场景

     1.函数防抖 

     2.函数节流

     3.变量持久化（闭包中的变量不会被回收）

3.优点: 1、形成私有空间，避免全局变量的污染 ,持久化内存,保存了数据安全

4. 缺点: 1.常驻内存,会增大内存使用量,影响性能 ，闭包会导致内存泄露

5.解决方法: 1、尽快避免函数的嵌套，以及变量的引用 2、执行完的变量，可以赋值null，让垃圾回收机制进行回收释放内存（当不在引用的变量,垃圾回收机制就会回收） 3、及时清除定时器

二.什么是深拷贝，什么是浅拷贝？

浅拷贝：如果属性是基本类型，拷贝的就是值，如果属性是引用类型，拷贝的就是地址 。所以拷贝的是基本数据类型的话，源对象不会受到影响，如果属性是引用类型，源对象会受到影响。

深拷贝:深拷贝就是完完全全拷贝一份新的对象，它会在内存的堆区域重新开辟空间，修改拷贝对象就不会影响到源对象

实现深拷贝的方式：1.通过递归函数来实现深拷贝  2.JSON.parse(JSON.stringify(待拷贝对象))  缺点:没法拷贝内部函数

实现浅拷贝的方式：1.展开运算符   2.Object.assign （第一个参数是拷贝的目标对象，后面的参数是拷贝的来源对象）

三. 判断数据类型有几种方法?

typeof与instanceof都是判断数据类型的方法，区别如下：

typeof会返回一个变量的基本类型，instanceof 返回的是一个布尔值

 instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型

而 typeof也存在弊端，它虽然可以判断基础数据类型（ null除外），但是引用数据类型中，除了函数类型以外，其他的也无法判断

六.什么是原型？什么是原型链？如何理解

原型:原型分为隐式原型和显式原型，每个对象都有一个隐式原型，它指向自己的构造函数的显式原型。

原型链：

1. 当访问一个对象的某个属性时，会先在这个对象本身属性上查找

2. 如果没有找到，则会去它的上__proto__查找，即构造函数的prototype

3. 如果还没有找到就会再在构造函数原型的__proto__中上查找

4. 直到构造函数原型的__proto__指向为null就停止

5. 这样一层一层向上查找就会形成一个链式结构，我们称为原型链

七. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1. 输入url地址后，首先进行DNS解析，将相应的域名解析为IP地址。

2. 根据IP地址去寻找相应的服务器。

3. 与服务器进行TCP的三次握手，建立连接。

4. 客户端发送请求，找到相应的资源库。

5. 客户端拿到数据，进行相应的渲染。 

八.  什么是TCP三次握手和四次挥手 ？

三次握手：

在网络数据传输中，传输层协议TCP(传输控制协议)是建立连接的可靠传输，TCP建立连接的 过程，我们称为三次握手。

1. 第一次 客户端向服务器发送SYN同步报文段，请求建立连接

2. 第二次 服务器确认收到客户端的连接请求，并向客户端发送SYN同步报文，表示要向客户端建立连接

3. 第三次 客户端收到服务器端的确认请求后，处于建立连接状态，向服务器发送确认报文 发起连接请求的一定是客户端

四次挥手：

在网络数据传输中，传输层协议断开连接的过程我们称为四次挥手

1. 第一次 客户端像服务端发送FIN结束报文段，准备关闭连接

2. 第二次 服务端确认客户端的FIN，表示自己已经收到对方关闭连接的请求 中间这段时间，客户端停止向服务端发送数据，但是服务端可以向客户端发送数据，要将自己 未处理完任务处理完

3. 第三次 服务端向客户端发送FIN结束报文段，准备关闭连接

4. 第四次 客户端确认服务端的FIN，进入TIME_WAIT状态，此时客户端进程已经退出，但是连接还在 发起连接请求的可以是客户端也可以是服务器端

九.怎么实现响应式布局?

1. 使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果

2. 百分比布局,比如当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

3. vw/vh布局,与百分比布局很相似，但更好用。

4. 使用rem,rem单位是相对于字体大小的html元素,也称为根元素,利用rem和媒体查询，在分辨率发生变换时，给它不同的font-size。

5. 页面布局常用的方法有浮动/定位/flex/栅格系统布局

十. px,em,rem的区别？

不同点:

1. px是固定单位

2. em是相对单位,相对于当前文字的大小,如果没有就去找父元素(相对于父元素)

3. rem也是相对单位,相对于HTML的字体的大小

4. vh和vw 主要用于页面视口大小布局，在页面布局上更加方便简单

十一.  C3新增了那些新特性？

1、盒子模型 box-sizing

2、圆角 border-radius

3、盒子阴影 box-shadow

4、文字阴影 text-shadow

5、2D转换 transform：平移translate（x,y) 缩放scale(x,y) 斜切skew(x,y) 旋转 rotate(x,y) 

6、过渡 transition

7、3D转换 透视距perspective 3D空间效果transform-style

8、自定义动画@keyframes animation

9、弹性布局 flex布局

10、背景 background-size 

13、渐变 linear-gradient

14、边框图片 border-image  

十二.平时有问题是如何解决的？平时是怎么学习的？

1.通常先定位问题，后端问题找后端，交互逻辑不清晰找产品。是我前端问题，就浏览器调试、debug，查官方文档，百度搜类似问题，找到继续尝试，不对再换一篇博文，通常这样就能解决8,9成问题。少部分可能的确是组件缺陷，需求不合理，那通常开会换个方式处理就行了。如果已经浪费很多时间，但也非得处理，那就看看公司有没有大佬，或者官方群里问，或一些博主建的群里问。

2. 学东西个人感觉分几个阶段吧。阶段一，是对新技术做基础了解，看官方文档是最好的了。阶段二，是某技术在场景中的应用，这时公司有项目正好用上就项目里去实践，没有，就自己找现成的案例视频看，是最快的。比如b站，慕课网，网易前端，百度前端，腾讯课堂，还有最近几年很火的开课吧，拉钩教育等。阶段三，是对基础有了解，也有一定的项目应用经验，此时需要拔高、进阶。这时，我通常会自己总结一部分，再专门搜些网上好的总结，收藏起来，或者平时看到公众号里好的总结推文，也会看看并收藏

十三. async await 是什么？它有哪些作用？

async await 是es7里面的新语法,它的作用就是 async 用于声明一个函数是异步的,而 await 用于等待一个异步方法执行完成。它可以很好的替代promise 中的then

async函数返回一个Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

十四.v-for 循环为什么一定要绑定key ?

页面上的标签都对应具体的虚拟dom对象, 在循环中 ,如果没有唯一key , 页面上删除一条标签, 由于并不知道删除的是那一条, 所以要把全部虚拟dom重新渲染, 这样会很浪费性能,如果知道key的话就知道什么标签被删除了,就可以有条件地进行渲染。

十五.什么是递归，递归有哪些优点或缺点？

递归:如果一个函数在内部可以调用其本身,那么这个函数就是递归函数.简单理解:函数内部自己调用自己, 这个函数就是递归函数

优点：结构清晰、可读性强

缺点：效率低、调用栈可能会溢出，其实每一次函数调用会在内存栈中分配空间，而每个进程的栈的容量是有限的，当调用的层次太多时，就会超出栈的容量，从而导致栈溢出.

十六.css中选择器的优先级是什么？

!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

十七.谈谈你对flex布局的理解

1.在开发场景中，通常会遇到各种各样不同尺寸和分辨率的设备，为了能在所有这些设备上正常的布局我们的应用界面，就需要响应式的界面设计方式来满足这种复杂的布局需求,

2.flex 弹性盒模型的优势在于开发人员只需要声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。