前端面试（2）

51.构造渲染树的流程

• 从 DOM 树的根节点开始遍历每个可见节点。
• 对于每个可见的节点，找到 CSSOM 树中对应的规则，并应用它们。
• 根据每个可见节点以及其对应的样式，组合生成渲染树。

52.什么是不可见节点

一些不会渲染输出的节点，比如 script、meta、link 等。

一些通过 css 进行隐藏的节点。比如 display : none。注意，使用 visibility 和 opacity 隐藏的节点，还是会显示在渲染树上的（因为还占据文档空间），只有 display : none 的节点才不会显示在渲染树上。

53.什么是promise，用来做什么

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

promise是用来解决两个问题的：

• 回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象
• promise可以支持多个并发的请求，获取并发请求中的数据
• 这个promise可以解决异步的问题，本身不能说promise是异步的

54.promise.all

用于将多个 Promise 实例，包装成一个新的 Promise 实例。该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完并且执行结果都是成功的时候才执行回调。

1. Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用Promise.resolve方法将参数转为 Promise 实例再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

2. p的状态怎么决定？

   2.1.只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数 组，传递给p的回调函数。
   ​ 2.2.只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数

注意： 如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法，若被rejected的 Promise 实例没有自己的catch方法，就会调用Promise.all()的catch方法。

55.事件轮询

js是单线程的，执行较长的js时候,页面会卡死，无法响应，但是所有的操作都会被记住到另外的队列。比如：点击了一个元素，不会立刻的执行，但是等到js加载完毕后就会执行刚才点击的操作，能够知道有一个队列记录了所有有待执行的操作，这个队列分为微观和宏观。微观会比宏观执行得更快。

event loop它最主要是分三部分：主线程、宏队列（macrotask）、微队列（microtask） js的任务队列分为同步任务和异步任务，所有的同步任务都是在主线程里执行的，异步任务可能会在macrotask或者microtask里面。

事件循环就是多线程的一种工作方式，Chrome里面是使用了共享的task_runner对象给自己和其它线程post task过来存起来，用一个死循环不断地取出task执行，或者进入休眠等待被唤醒。Mac的Chrome渲染线程和浏览器线程还借助了Mac的sdk Cococa的NSRunLoop来做为UI事件的消息源。Chrome的多进程通信（不同进程的IO线程的本地socket通信）借助了libevent的事件循环，并加入了到了主消息循环里面。

56.JavaScript为什么是单线程的，不能实现多线程吗

JavaScript单线程是指浏览器在解释和执行javascript代码时只有一个线程，即JS引擎线程，浏览器自身还会提供其他线程来支持这些异步方法，浏览器的渲染线程大概有一下几种：

JS引擎线程 事件触发线程 定时触发器线程 异步http请求线程 GUI渲染线程 …

event loop就是解决这个问题的

57.promise的常用静态方法

promise.all

所有可迭代的Promise都通过则认为是成功，如果有一个拒绝，则认为失败。

** 图片批量上传 **

promise.race

每次执行，无论成功还是失败，其输出的信息中的时间一定是延时时间最短的那个。

** 请求可以在200ms内完成，则不显示loading，如果要超过200ms，则至少显示200ms的loading。 **

promise.any

只要有一个成功就可以了，除非所有的Promise都拒绝，否则就认为成功。

** 通过不同路径请求同一个资源的需求上 **

promise.resolve

返回给定值解析后的promise对象，

• 如果这个值是一个 promise ，那么将返回这个 promise

• 参数不是具有then()方法的对象，或根本就不是对象，Promise.resolve()会返回一个新的 Promise 对象，状态为resolved

• 没有参数时，直接返回一个resolved状态的 Promise 对象

58.promise的实例方法

then()

catch()

finally()

59.ES6

let,const

模板字符串

箭头函数

函数的参数默认值

…运算符

对象和数组的解构

对象超类

for…of 和for … in

class

60.判断空对象的几种方式

1. 将json对象转化为json字符串，再判断该字符串是否为"{}"
2. for in 循环判断
3. jquery的isEmptyObject方法
4. Object.getOwnPropertyNames()方法
5. 使用ES6的Object.keys()方法

61.Proxy和defineProperty的区别。

Proxy是ES6推出的一个类，给对象架设一层拦截器，但凡要访问或者修改这个对象上的值或者属性，都必须先经过这层拦截器, Proxy也叫代理器, 它代理了对对象的操作。

Object.definePrototype是对对象上的属性进行新增或者修改, 有2种写法，数据描述符或者访问器描述符, IE8不支持(敲黑板, 面试官再问起来为什么Vue不支持IE8,就这么告诉他)

Object.defineProperty和Proxy的区别

• Object.defineProperty对对象自身做修改, 而Proxy只是在Object基础上加一层拦截，不修改原对象(其实并不是这样，对于不支持嵌套对象，如果你想监听嵌套的，那么这个地方就不对了。后面会说到)
• 监听不了数组的变化
• 监听手段比较单一，只能监听set和get, Proxy有10几种监听
• 必须得把所有的属性全部添加defineProperty, Proxy对整个对象都会进行拦截

Proxy的优势如下:

• Proxy可以直接监听对象而非属性；
• Proxy可以直接监听数组的变化；
• Proxy有多达13种拦截方法,不限于apply、own