JS微任务 宏任务,Promise、setTimeout、setImmediate运行顺序实测

更新日期: 2019-12-19阅读: 2.3k标签: 任务

结论如下

  1. 虽然理论上应当先运行Promise,再运行setTimeout。但是由于历史版本或使用polyfill,使得Promise未必优先运行。
  2. setImmediate未必比setTimeout早运行
  3. 在最新浏览器中Promise会早于事件冒泡运行,在设计框架时应考虑这一情况

以下是实测情况

脚本加载时运行,运行顺序如下:

浏览器运行顺序
chrome18onload,nextScript,setTimeout
chrome33onload,nextScript,setTimeout,Promise
chrome35onload,nextScript,setTimeout,Promise
chrome36Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome39Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome41Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome43Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome63Promise,onload,nextScript,setTimeout
ie6complete,nextScript,setTimeout
ie7complete,nextScript,setTimeout
ie8nextScript,complete,setTimeout
ie9complete,nextScript,onload,setTimeout
ie10onload,nextScript,complete,setTimeout,setTimeout,setImmediate
ie11onload,nextScript,setTimeout,setTimeout,setImmediate
edge18onload,Promise,nextScript,setTimeout,setTimeout,setImmediate
firefox3.6onload,nextScript,setTimeout
firefox4onafterscriptexecute,onload,setTimeout,nextScript
firefox7onafterscriptexecute,onload,setTimeout,nextScript
firefox10onafterscriptexecute,onload,nextScript,setTimeout
firefox31onload,nextScript,setTimeout,Promise
firefox55onload,Promise,nextScript,setTimeout,setTimeout,setImmediate
firefox57onload,Promise,nextScript,setTimeout,setTimeout,setImmediate
firefox71Promise,onload,nextScript,setTimeout

 点击事件时运行,运行顺序如下:

浏览器运行顺序
chrome18btn.onclick,body.onclick,document.onclick,setTimeout
chrome33btn.onclick,body.onclick,document.onclick,Promise,setTimeout
chrome35btn.onclick,body.onclick,document.onclick,Promise,setTimeout
chrome36btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome39btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome41btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome43btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome63btn.onclick,Promise,body.onclick,document.onclick,setTimeout
ie6btn.onclick,body.onclick,document.onclick,setTimeout
ie7btn.onclick,body.onclick,document.onclick,setTimeout
ie8btn.onclick,body.onclick,document.onclick,setTimeout
ie9btn.onclick,body.onclick,document.onclick,setTimeout
ie10btn.onclick,body.onclick,document.onclick,setImmediate,setTimeout,setTimeout
ie11btn.onclick,body.onclick,document.onclick,setImmediate,setTimeout,setTimeout
edge18btn.onclick,Promise,body.onclick,document.onclick,setImmediate,setTimeout,setTimeout
firefox3.6btn.onclick,body.onclick,document.onclick,setTimeout
firefox4btn.onclick,body.onclick,document.onclick,setTimeout
firefox7btn.onclick,body.onclick,document.onclick,setTimeout
firefox10btn.onclick,body.onclick,document.onclick,setTimeout
firefox31btn.onclick,body.onclick,document.onclick,Promise,setTimeout
firefox55btn.onclick,body.onclick,document.onclick,Promise,setTimeout
firefox57btn.onclick,body.onclick,document.onclick,Promise,setTimeout
firefox71btn.onclick,Promise,body.onclick,document.onclick,setTimeout

链接: https://www.fly63.com/article/detial/7261

PHP实现执行定时任务的几种思路详解

PHP定时任务是一个非常有意思的东西,虽然说实话,用系统的php.exe去直接执行php文件的效率更高,但是对于很多普通站长而言,虚拟主机是无法做到直接php执行原生程序的。本文仅提供一些解决的思路

使用 queueMicrotask 来执行微任务

写这篇文章的原因是因为,这几天在看 core-js 的源码,然后发现了 queueMicrotask 的实现。由于之前做的项目,对于微任务的执行需求,一般是使用 asap 这个库来完成的,如果没有使用这个库的话

js中特殊的宏任务

目前只有IE10+和NodeJS支持该API。立即触发回调函数,使其进入宏任务队列(macro task queue),比setTimout(fn, 0)的执行顺序要快,性能也更高。因为setTimeout(fn,0)实质上会有4ms的延迟。

Node.js实现定时任务

在本文中,我们将研究如何在 Node 程序中创建和使用 Cron 作业。为此我们将创建一个简单的程序,该应用程序会自动从服务器中删除自动生成的 error.log 文件。 Cron 作业的另一个优点是

关于宏任务、微任务和事件循环

为什么会是这样的输出顺序呢?这就要提到事件循环、宏任务和微任务的概念了。众所周知,JavaScript是一个单线程的语言,单线程意味着代码会自上而下依次执行,如果有一个耗时的操作,那么页面就会卡死,基于此,便有了异步的概念

搞懂JS的事件循环(Event Loop)和宏任务/微任务

首先大家都知道JS是一门单线程的语言,所有的任务都是在一个线程上完成的。而我们知道,有一些像I/O,网络请求等等的操作可能会特别耗时,如果程序使用同步模式等到任务返回再继续执行,就会使得整个任务的执行特别缓慢

如何在 JavaScript 中使用宏

在语言当中,宏常见用途有实现 DSL 。通过宏,开发者可以自定义一些语言的格式,比如实现 JSX 语法。在 WASM 已经实现的今天,用其他语言来写网页其实并不是没有可能

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!