queueMicrotask

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

scope.queueMicrotask(function);

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


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"));
});
}
};

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


macrotask & microtask

https://javascript.info/event-loop

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


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

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

Event loops 秒懂

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

宏任务 task & 微任务 microtask

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

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

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



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


queueMicrotask & EventLoop & macrotask & microtask的更多相关文章

  1. javascript macrotask & microtask

    先看一个 实例 案例 console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); Pr ...

  2. queueMicrotask & microtask

    queueMicrotask & microtask microtask microtask queue Promise Mutation Observer API MutationObser ...

  3. 理解 EventLoop

    链接 链接 node 浏览器 执行顺序有差异 macrotask microtask 一个线程会有 堆 栈 消息队列;  栈函数执行是用的, 堆用了存放定义的对象, 消息队列来处理异步的操作 a() ...

  4. 初识JavaScript EventLoop

    Event Loop指的是计算机系统的一种运行机制.JavaScript采用此机制解决单线程引发相关问题 在浏览器中的web应用会涉及到.JavaScript引擎.WebAPI.Event Loop. ...

  5. Vue nextTick 机制

    背景 我们先来看一段Vue的执行代码: export default { data () { return { msg: 0 } }, mounted () { this.msg = 1 this.m ...

  6. js,timeout,promise执行顺序

    总结 macro-task包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering. micro-task包括 ...

  7. 破阵九解:Node和浏览器之事件循环/任务队列/异步顺序/数据结构

    前言 本文内容比较长,请见谅.如有评议,还请评论区指点,谢谢大家! >> 目录 开门见山:Node和浏览器的异步执行顺序问题 两种环境下的宏任务和微任务(macrotask &&a ...

  8. javascript中的异步 macrotask 和 microtask 简介

    javascript中的异步 macrotask 和 microtask 简介 什么是macrotask?什么是microtask?在理解什么是macrotask?什么是microtask之前,我们先 ...

  9. Javascript中的Microtask和Macrotask——从一道很少有人能答对的题目说起

    首先我们来看一道题目,如下javascript代码,执行后会在控制台打印出什么内容? async function async1() { console.log('async1 start'); aw ...

随机推荐

  1. Centos 7 安装 erlang

    https://www.cnblogs.com/swyy/p/11582309.html https://blog.csdn.net/qq_20492999/article/details/81254 ...

  2. JAXB学习(一):概述

    pre.XML { background-color: rgba(255, 204, 204, 1); padding-left: 25px } JAXB是 Java Architecture for ...

  3. Redis 常见问题总结

    1. 简单介绍一下 Redis 呗! 简单来说 Redis 就是一个使用 C 语言开发的数据库,不过与传统数据库不同的是 Redis 的数据是存在内存中的 ,也就是它是内存数据库,所以读写速度非常快, ...

  4. linux:搭建java web环境

    介绍 运行java web的环境 搭建 准备 Linux:Linux 操作系统 Apache Tomcat:Web 应用服务器 JDK:Java 开发工具包 jdk的安装 1.下载 链接 2.上传服务 ...

  5. 网际互连__OSI七层模型

    概述 OSI(Open System Interconnection,开放系统互连)七层网络模型称为开放式系统互联参考模型 ,是一个逻辑上的定义.一个规范.它把网络从逻辑上分为了7层.每一层都有相关. ...

  6. ARP病毒系列——基础篇

                              概念和关系介绍:(ARP.IP.Mac 三者的关系) ARP,全称Address Resolution Protocol,中文名为地址解析协议,它工 ...

  7. Effective Java读书笔记--对所有对象都通用的方法

    1.覆盖equals请遵守通用规定.不需要覆写equals的场景:a.类的每个实例都是唯一的.b.类不需要提供"逻辑相等"的测试功能.c.超类已经覆盖了equals的方法.d.类是 ...

  8. Jenkins(2)docker容器中安装python3

    前言 使用docker安装jenkins环境,jenkins构建的workspace目录默认是在容器里面构建的,如果我们想执行python3的代码,需进容器内部安装python3的环境. 进jenki ...

  9. Java并发包源码学习系列:基于CAS非阻塞并发队列ConcurrentLinkedQueue源码解析

    目录 非阻塞并发队列ConcurrentLinkedQueue概述 结构组成 基本不变式 head的不变式与可变式 tail的不变式与可变式 offer操作 源码解析 图解offer操作 JDK1.6 ...

  10. .net core Api 部署到Linux

    一.环境介绍 1..net开发环境:asp.net core 3.1 2.Linux环境:CentOS Linux release 7.9.2009 (Core) 3.Swagger: Swashbu ...