一名【合格】前端工程师的自检清单（执行机制篇）

##执行机制

 

###1.为何try里面放return，finally还会执行，理解其内部机制

 

参考资料：https://segmentfault.com/a/1190000019224768?utm_source=tag-newest

 

###2.JavaScript如何实现异步编程，可以详细描述EventLoop机制

 

####JavaScript如何实现异步编程

 

（见作用域和闭包篇：7.如何处理循环的异步操作）

 

ES 6以前：

 

* 回调函数

* 事件监听(事件发布/订阅)

* Promise对象

 

ES 6：

 

* Generator函数(协程coroutine)

 

ES 7:

 

* async和await

 

####详细描述EventLoop机制

 

Event Loop 是什么

 

JavaScript的事件分两种，宏任务(macro-task)和微任务(micro-task)

 

宏任务：包括整体代码script，setTimeout，setInterval

微任务：Promise.then(非new Promise)，process.nextTick(node中)

 

事件的执行顺序，是先执行宏任务，然后执行微任务，这个是基础，任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，

异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，

回调函数中可能还会包含不同的任务，因此会循环执行上述操作。

 

案例：

 

console.log('1');

setTimeout(function() {

console.log('2');

process.nextTick(function() {

console.log('3');

})

new Promise(function(resolve) {

console.log('4');

resolve();

}).then(function() {

console.log('5')

})

})

输出：1 -> 2 -> 4 -> 3 -> 5

 

宏任务同步代码console.log('1'),不多说

setTimeout，加入宏任务Event Queue，没有发现微任务，第一轮事件循环走完

第二轮事件循环开始，先执行宏任务，从宏任务Event Queue中独取出setTimeout的回调函数

同步代码console.log('2'),发现process.nextTick，加入微任务Event Queue

new Promise，同步执行console.log('4'),发现then，加入微任务Event Queue

宏任务执行完毕，接下来执行微任务，先执行process.nextTick，然后执行Promise.then

微任务执行完毕，第二轮事件循环走完，没有发现宏任务，事件循环结束

 

###3.宏任务和微任务分别有哪些

 

参考资料：https://www.jianshu.com/p/443e8ece33a6

 

宏任务：

 

I/O 

setTimeout  

setInterval 

setImmediate

requestAnimationFrame

 

微任务：

 

process.nextTick    

MutationObserver    

Promise.then catch finally

 

###4.可以快速分析一个复杂的异步嵌套逻辑，并掌握分析方法

 

参考上述2和3

 

###5.使用Promise实现串行

 

案例：

 

下面

 

/**

* 创建promise

* @param {Number} value

*/

function makePromise (value) {

return new Promise((resolve) => {

setTimeout(() => {

resolve(value);

}, Math.random() * 1000)

})

}

/**

* 打印结果

* @param {Number} value

*/

function print (value) {

return value

}

 

let promises = [1, 3, 4, 5, 6].map((item, index) => {

return makePromise(item)

});

 

// 并行执行

Promise.all(promises)

.then(() => {

console.log('done')

})

.catch(() => {

console.log('error')

})

 

// 串行执行 promises是数组

let parallelPromises = promises.reduce(

(total, currentValue) => total.then(() => currentValue.then(print)),Promise.resolve()

)

 

parallelPromises

.then(() => {

// console.log('done')

})

.catch(() => {

console.log('done')

})

 

// 顺带复习一下reduce方法

 

reduce((total, currentValue, currentIndex, arr) => {}, initialValue)

let arr1 = [1, 2, 3, 4, 5]

let res = arr1.reduce((total, currentValue, currentIndex, arr) => {

return total + currentValue

});

 

###6.Node与浏览器EventLoop的差异

 

参考资料：https://www.jianshu.com/p/1122b93e42ce

 

###7.如何在保证页面运行流畅的情况下处理海量数据

 

暂无答案