queueMicrotask & EventLoop & macrotask & microtask All In One

queueMicrotask & EventLoop & macrotask & microtask All In One

queueMicrotask

scope.queueMicrotask(function);

self.queueMicrotask(() => {
  // function contents here
})


MyElement.prototype.loadData = function (url) {
  if (this._cache[url]) {
    queueMicrotask(() => {
      this._setData(this._cache[url]);
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(url).then(res => res.arrayBuffer()).then(data => {
      this._cache[url] = data;
      this._setData(data);
      this.dispatchEvent(new Event("load"));
    });
  }
};

deno.js

https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask

https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing

宏任务 task & 微任务 microtask

macrotask & microtask

https://javascript.info/event-loop

https://javascript.info/microtask-queue

https://zh.javascript.info/event-loop

https://zh.javascript.info/microtask-queue

浅析JS堆、栈、执行栈 和 EventLoop

https://mp.weixin.qq.com/s/Vydvo1PVGgr9zGbYsubX5w

Event loops 秒懂

https://github.com/wangmeijian/blog/blob/master/docs/Event loops秒懂.md

critical-rendering-path / 关键渲染路径

前端性能优化

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=zh-cn

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---