首页文章资源工具教程 栏目

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

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://fly63.com/article/detial/7261

上一页:  6年架构师针对web前端小白，作出的职业规划建议下一页:  Vue前端鉴权方案,前后端分离

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 已经实现的今天，用其他语言来写网页其实并不是没有可能

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