一名【合格】前端工程师的自检清单 - 答案版(执行机制)

1,644 阅读3分钟

1.为何try里面放returnfinally还会执行,理解其内部机制

关于其内部机制,我翻遍了很多资料都没有找到具体的解释,希望知道的同学,能够补充一下,谢谢了.如果之后我找到了答案,我也会及时更新的.

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

通过以下方式可以实现异步编程

  • setTimeoutsetInterval
  • callback事件回调、事件监听(事件发布/订阅)
  • ES6 PromiseGenerator
  • ES7 async/await

JavaScript 中,任务分为宏任务(macrotask)和微任务(microtask),这两个任务分别维护一个队列,均采用先进先出的策略进行执行。同步执行的任务都在宏任务上执行。

  1. 从宏任务的头部取出一个任务执行;
  2. 执行过程中若遇到微任务则将其添加到微任务的队列中;
  3. 宏任务执行完毕后,微任务的队列中是否存在任务,若存在,则挨个儿出去执行,直到执行完毕;
  4. GUI 渲染;
  5. 回到步骤 1,直到宏任务执行完毕;

这就是一个EventLoop.

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

宏任务:

  • script(整体代码)
  • UI 交互事件
  • postMessageMessageChannel
  • I/O
  • setTimeout
  • setInterval
  • setImmediate
  • requestAnimationFrame

微任务:

  • process.nextTick
  • MutationObserver
  • Promise.thencatchfinally

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执行机制这一块,不像之前原型和原型链以及作用域和闭包偏重于基础原理,这一块虽然也有基础原理,但是更偏重于熟悉原理之后的实际应用,比如异步的处理,定时器的运行顺序等等,所以这一块的理解,更多是要在实际项目中去实践,才能更好的融会贯通.

原文链接:

一名【合格】前端工程师的自检清单

系列链接: