前端高频面试题

CSS部分

CS3 新特性？

①border-radius 圆角边框

②box-shadow:盒子阴影

③background-size 背景图片大小

④transition 过度

⑤transfrom 转换 位移 旋转 缩放

⑥anmiation 动画

⑦linear-gradient线性渐变

⑧box-sizing cs3盒子模型

⑨颜色新增了透明属性！2

盒子模型的理解？

• 盒子模型组成有 4 部分,分别为:内容 内边距 外边距(一般不计入盒子实际宽度) 边框

• 盒子模型有 2 种:标准盒子模型与怪异盒子模型

• 标准盒子模型（W3C标准盒子模型）=content(内容)+border(边框)+padding(内边距) 这里说的是宽高不包含

• 怪异盒子模型（IE怪异盒子模型）=content(内容)(已经包含了 padding 和 border) 宽高包含边框 内编剧哦

• css3 种可以通过设置 box-sizing 属性来完成标准或许怪异盒子模型之间的切换,

• 怪异盒子模型:box-sizing: border-box;标准盒子模型:box-sizing:content-box

flexbox 弹性盒布局模型，及适用场景？

• flexbox 是一种布局模型,让网页布局更简单灵活,基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生;给父元素添加 display: flex，子元素可以自动的挤压或拉伸;组成部分有弹性容器 弹性盒子 主轴和侧抽.

• 应用场景:我们通过 flex 布局可以实现元素水平垂直居中以及左右固定,中间自适应;移动端小程序开发都建议使用 flex 布局.

JS 部分

Promise是什么？

Promise是一个立即执行的构造函数（本质是一个同步任务），当执行resolve和reject 时是一个异步任务。

Promise的应用场景？

因异步任务嵌套导致的回调地狱的问题（当一个函数的返回值，作为另外一个嵌套函数的形参时）。

Promise的三种状态？

pending - 等待中

resolved - 成功 或者 fulfilled

rejected - 失败

Promise的方法函数？

参考文档https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/race

all 等待所有的promise 执行完成。

race （本质有赛跑机制的意思）谁先完成执行谁的回调

any 有任何一个执行完成即可

allSetted 将promise组成的可迭代对象作为输入并且返回一个promise 实例

reject 返回一个失败的或者称之为拒绝的promise 对象 状态rejected

resolve 返回一个成功的 同时改变了promise的状态为resolved

以下是原型对象上的方法 继承来的

catch 捕获异常的

then 成功的链式调用

finally 无论成功或者失败都会执行的

Settimeout Async Await Promise 区别！

Settimeout是一个异步任务，属于异步中的宏任务，当执行的时候，会直接跳过去执行他下面的同步任务，即使它设置的延时是0。当执行完了下面，再去执行他的回调函数。（需要理解宏任务微任务，同步任务，异步任务，事件循环Event Loop）

Async 他会返回一个promise 对象！当他遇到Await的时候就会出现阻塞的情况，简单来说就是执行到这个函数就不会往下执行，直到awati 等待到接口返回的的数据，然后才会去执行回调函数，

Await 他的本质有一个等待的意思！ 也就是说他一定会等待，不然不会继续执行。

需要注意的是这个函数只能接受成功的信息，如果要捕获失败 需要用try ..catch 进行捕获。

什么是闭包？

闭包是内层函数使用外部函数的变量时产生的。

例如：在定时器、事件监听器等异步任务中使用了回调函数，实际上就是在使用闭包。

闭包是用来做什么用的？

延伸变量的作用域范围。

闭包的优点？

①实现数据的私有，外部可以使用但是无法更改

②可以将函数当做值传递到其他地方使用（非函数所在的作用域）

闭包的缺点？

内存泄露。

原因：闭包会让她所在的作用域始终保存在内存中而不会被垃圾回收机制回收，对内存的消耗比较大。

解决：当变量不再使用的时候，把变量的值赋值为null

附加：闭包不一定会导致内存泄露，但内存泄一定会有闭包。闭包也不一定有return返回，当外层函数要使用内层函数的变量的时候才会有return。

变量什么时候不会被销毁？当变量被引用并且有内存的时候。

宏任务微任务？

关于 Javascript 的执行顺序，众所周知是按照顺序自上而下执行。但是在我们面试过程中。总会遇到面试官问：这段代码是如何执行的，输出结果是怎样的，然后再讲下为什么。对于这种问题，难的不是输出什么，而是为什么，输出结果我们可以像做选择题一样输出，但是为什么才是问题的关键，但我们很少能够答道点上。

一、那么宏任务和微任务是什么呢？

首先，我们要先了解下 Js 。js 是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。

js 同步任务和异步任务

ES6 规范中，microtask 称为 jobs，macrotask 称为 task

宏任务是由宿主发起的，而微任务由JavaScript自身发起。

在ES3以及以前的版本中，JavaScript本身没有发起异步请求的能力，也就没有微任务的存在。在ES5之后，JavaScript引入了Promise，这样，不需要浏览器，JavaScript引擎自身也能够发起异步任务了。

宏任务、微任务有哪些？

宏任务：宿主(浏览器)

1. script (可以理解为外层同步代码)

2. setTimeout/setInterval

3. UI rendering/UI事件

4. postMessage，MessageChannel5. setImmediate，I/O（Node.js）

5.异步Ajax请求

6.读取文件的操作

也就是说js 标签里面的本身就是一个宏任务！！

微任务：

1. Promise

2.process.nextTick（Node.js）

3. Object.observe（已废弃；Proxy 对象替代）

4. MutaionObserver

宏任务、微任务是怎么执行的？

执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

这里容易产生一个**错误的**认识：就是微任务先于宏任务执行。实际上是先执行同步任务，异步任务有宏任务和微任务两种，先将宏任务添加到宏任务队列中，将宏任务里面的微任务添加到微任务队列中。所有同步执行完之后执行异步，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行。之后就一直循环...

ES6语法！

数组扁平化？

首先了解什么是数组扁平化。一个多维数组，比如二维三维。或者数组对象多层嵌套。

如何为扁平化，把多维数组或者对象变成一个一位的。

实现方法：多种，例如:循环遍历重新生成一个新的数组。

Set用法？

首先要了解这个是干什么用的?

比如可以实现数组去重？

如何实现的？

arr1 = [1,2,2,3]

const arr = new Set(arr1)

arr = [1,2,3]

还有很多用法，可以添加，删除等，查看一下mdn文档。

Map用法？

字典的用法，例如可以根据key快速查找。

具体用法参考mdn文档。

Vue2 3中！

nextick？是做什么用的？

做异步更新dom结构时使用。

因为vue中dom的更新是异步的，数据更新完成之后，dom还没有更改。

这个时候再使用ref获取dom元素的时候会获取的一个旧的dom。

如果我们要使用新的dom这个时候就需要要的nextick！

例如：人资中的头像，需要根据QRcode生成二维码。

获取到头像的地址后，dom结构没有更新，就需要使用这个方法。

项目优化部分！

重要！

从CSS、JS 、Vue、项目打包上线。这几个方面进行优化。