自检:前端知识清单——执行机制

前言

题目来自ConardLi的blog
写的是自己的题解,水平有限,所以仅供参考
代码会整合在github,觉得有帮助就给个star吧~

正文

一、Javascript基础

执行机制

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

因JavaScript依靠着语句的Completion Record类型,在语句的复杂嵌套结构中,实现各种控制。

  • try就属于控制型语句,并且属于对内部有影响的语句
  • finally属于控制型语句,并且属于对内部有影响的语句
  • return也属于控制型语句,但是他属于对外部有影响的语句

因为finally中的内容必须保证执行,所以try/catch执行完毕,即使得到的结果是非normal型的完成记录,也必须要执行finally

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

异步编程

ES6之前:
  • 回调函数
  • setTimeout
  • setInterval
  • Promise
  • 事件监听
ES6:
  • generator
ES6+:
  • async await

EventLoop机制:

  • JavaScript事件队列每16ms循环一次,先执行同步队列,再执行宏任务(第一次是执行script里的内容),后执行微任务

掘金:这一次,彻底弄懂JavaScript的执行机制

js引擎存在monitoring process进程,会持续不断的检查主线程执行栈是否为空,一旦为空,就会去Event Queue那里检查是否有等待被调用的函数。

  • setTimeout&&setInterval

不是每过ms秒会执行一次fn,而是每过ms秒,会有fn进入Event Queue

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

宏任务:

  • setTimeout
  • setInterval
  • setTmmediate
  • promise中的executor

微任务:

  • Promise
  • messageChannel
  • mutationObersve
  • process.nextTick

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

题目一:

async function async1() {
    console.log("async1 start");
    await  async2();
    console.log("async1 end");
}

async  function async2() {
    console.log( 'async2');
}

console.log("script start");

setTimeout(function () {
    console.log("settimeout");
},0);

async1();

new Promise(function (resolve) {
    console.log("promise1");
    resolve();
}).then(function () {
    console.log("promise2");
});

console.log('script end');

同步队列->微任务->宏任务

输出顺序:
script start
async1 start
async2
promise1
script end

async1 end
promise2

settimeout

async await的代码到底做了些什么,我们可以来写一下



5、使用Promise实现串行

.then调用

6、Node与浏览器EventLoop的差异

暂时不会

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

分页,worker

8、冒泡和捕获的机制

你有没有想过,在单击按钮的同时,你也单击了按钮的容器元素,甚至也单击了整个页面。

事件冒泡
IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。

事件捕获
Netscape Communicator 团队提出的另一种事件流叫做事件捕获(event capturing)。其思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达预订目标之前捕获它。


9、script defer与async


  • 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。


  • 有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。


  • 有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

在现实当中, 延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行, 因此最好只包含一个延迟脚本。
——泽卡斯(Zakas. Nicholas C.). JavaScript高级程序设计(第3版) (图灵程序设计丛书) (Kindle 位置 639-641). 人民邮电出版社. Kindle 版本.

你可能感兴趣的:(自检:前端知识清单——执行机制)