1.为何try里面放return,finally还会执行,理解其内部机制
关于其内部机制,我翻遍了很多资料都没有找到具体的解释,希望知道的同学,能够补充一下,谢谢了.如果之后我找到了答案,我也会及时更新的.
2.JavaScript如何实现异步编程,可以详细描述EventLoop机制
通过以下方式可以实现异步编程
setTimeout、setIntervalcallback事件回调、事件监听(事件发布/订阅)- ES6
Promise和Generator - ES7
async/await
在 JavaScript 中,任务分为宏任务(macrotask)和微任务(microtask),这两个任务分别维护一个队列,均采用先进先出的策略进行执行。同步执行的任务都在宏任务上执行。
- 从宏任务的头部取出一个任务执行;
- 执行过程中若遇到微任务则将其添加到微任务的队列中;
- 宏任务执行完毕后,微任务的队列中是否存在任务,若存在,则挨个儿出去执行,直到执行完毕;
- GUI 渲染;
- 回到步骤 1,直到宏任务执行完毕;
这就是一个EventLoop.
3.宏任务和微任务分别有哪些
宏任务:
script(整体代码)UI 交互事件postMessage、MessageChannelI/OsetTimeoutsetIntervalsetImmediaterequestAnimationFrame
微任务:
process.nextTickMutationObserverPromise.then、catch、finally
4.可以快速分析一个复杂的异步嵌套逻辑,并掌握分析方法
参考题2和题3的原理,总结自己的方法
5.使用Promise实现串行
在MDN上有一个十分优雅并且简单易懂的实现,在这里,也可以顺便复习一下Array.prototype.reduce(),具体实现代码如下:
/**
* Runs promises from array of functions that can return promises
* in chained manner
*
* @param {array} arr - promise arr
* @return {Object} promise object
*/
function runPromiseInSequence(arr, input) {
return arr.reduce(
(promiseChain, currentFunction) => promiseChain.then(currentFunction),
Promise.resolve(input)
);
}
// promise function 1
function p1(a) {
return new Promise((resolve, reject) => {
resolve(a * 5);
});
}
// promise function 2
function p2(a) {
return new Promise((resolve, reject) => {
resolve(a * 2);
});
}
// function 3 - will be wrapped in a resolved promise by .then()
function f3(a) {
return a * 3;
}
// promise function 4
function p4(a) {
return new Promise((resolve, reject) => {
resolve(a * 4);
});
}
const promiseArr = [p1, p2, f3, p4];
runPromiseInSequence(promiseArr, 10).then(console.log); // 1200
6.Node与浏览器EventLoop的差异
关于Node与浏览器EventLoop的差异,具体情况需要篇幅太多,我在简书上发现了一个比较不错的讲解,就直接搬运过来了:
对比浏览器eventLoop与node中的eventLoop
7.如何在保证页面运行流畅的情况下处理海量数据
在思考这个答案的时候,正好想起了之前在这里看过的一篇文章,觉得写得很棒,就直接拿出来分享了,里面的实现思路以及原理都讲解的很清楚,值得一读:
结语
其实JavaScript执行机制这一块,不像之前原型和原型链以及作用域和闭包偏重于基础原理,这一块虽然也有基础原理,但是更偏重于熟悉原理之后的实际应用,比如异步的处理,定时器的运行顺序等等,所以这一块的理解,更多是要在实际项目中去实践,才能更好的融会贯通.
原文链接:
系列链接: