js任务管理

任务管理

javascript 语言最大的特点就是使用单线程，也就是同一个时间只能处理同一个任务。

为了协调事件、用户交互、脚本、UI 渲染、和网络处理等行为，防止主线程的不阻塞，（事件循环）Event Loop的方案应用而生。

javaScript 处理任务就是在等待任务 、执行任务、休眠等待新任务中不断循环中，也称这种机制为事件循环。

主线程中的任务执行完后，才执行任务队列中的任务

有新任务到来时会将其放入队列，采取先进先执行的策略执行队列中的任务

比如多个 setTimeout 同时到时间了，就要依次执行
任务包括 script(整体代码)、 setTimeout、setInterval、DOM渲染、DOM事件、Promise、XMLHTTPREQUEST等

原理分析
下面通过一个例子来详细分析宏任务与微任务

console.log("后盾人");
setTimeout(function() {
  console.log("定时器");
}, 0);
Promise.resolve()
  .then(function() {
    console.log("promise1");
  })
  .then(function() {
    console.log("promise2");
  });
console.log("houdunren.com");

#输出结果为
**加粗样式**后盾人
houdunren.com
promise1
promise2
定时器

1.先执最前面的宏任务 script，然后输出
script start

2.然后执行到setTimeout 异步宏任务，并将其放入宏任务队列，等待执行

3.之后执行到 Promise.then 微任务，并将其放入微任务队列，等待执行

4.然后执行到主代码输出

5.主线程所有任务处理完成

6.通过事件循环遍历微任务队列，将刚才放入的Promise.then微任务读取到主线程执行，然后输出

promise1

7.之后又执行 promse.then 产生新的微任务，并放入微任务队列

8.主线程任务执行完毕

9.现次事件循环遍历微任务队列，读取到promise2微任务放入主线程执行，然后输出

10.主线程任务执行完毕

11.此时微任务队列已经无任务，然后从宏任务队列中读取到 setTimeout任务并加入主线程，然后输出

setTimeout

脚本加载

引擎在执行任务时不会进行DOM渲染，所以如果把script 定义在前面，要先执行完任务后再渲染DOM，建议将script 放在 BODY 结束标签前。

定时器

定时器会放入异步任务队列，也需要等待同步任务执行完成后执行

微任务

任务的执行顺序是同步任务、微任务、宏任务所以下面执行结果是 1、2、3、4

任务分解

一个比较耗时的任务可能造成游览器卡死现象，所以可以将任务拆分为多小小异步小任务执行。

console.time("runtime");
function hd(num) {
  let count = 0;
  for (let i = 0; i <= num; i++) {
    count += i;
  }
  console.log(count);
  console.timeEnd("runtime");
}
let num=987654321;
hd(num);
console.log("houdunren.com"); //需要等待上面执行完才会执行

现在把任务分解成小块放入任务队列，游览器就不会出现卡死的现象了，也不会影响后续代码的执行

console.time("runtime");
let count = 0;
let num = 987654321;
function hd() {
  for (let i = 0; i < 100000000; i++) {
    if (num <= 0) break;
    count += num--;
  }
  if (num > 0) {
    console.log(num);
    setTimeout(hd);
  } else {
    console.log(num);
    console.log(count);
  }
}
hd();
console.log("houdunren.com"); //立刻显示出来

交给微任务处理是更好的选择

async function hd(num) {
  let res = await Promise.resolve().then(_ => {
    let count = 0;
    for (let i = 0; i < num; i++) {
      count += num--;
    }
    return count;
  });
  console.log(res);
}
hd(987654321);
console.log("后盾人");