原文地址:https://www.xingkongbj.com/blog/js/event-loop.html

http://www.haorooms.com/post/js_xiancheng

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

任务队列

  • 主线程:正在执行的代码,会生成函数调用栈。
  • macro-task(宏任务,新名:task)包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
  • micro-task(微任务,新名:jobs)包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性,队列中只能有一个)

任务分类

  • 同步任务,语句只按语句先后顺序执行,前面未执行完,不会执行后面语句。
  • 异步任务,语句不在语句先后顺序上执行,执行到该代码时,加入到相应任务队列,延后执行。

单线程

主线程从 script (整体代码)开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局),然后执行所有的 jobs。当所有可执行的 jobs 执行完毕之后。循环再次从 task 开始,找到其中一个任务队列执行完毕,然后再执行所有的 jobs,这样一直循环下去。

注意事项

  • setTimeout 最小间隔不能低于 4 毫秒,否则会自动增加。
  • DOM 的渲染每 16 毫秒执行一次,因为显示器是 60 Hz,16ms 刷新一次。
  • process.nextTick 任务会在 jobs 里单独维护一个队列,并且在其他 jobs 任务之前执行。
  • 冒泡事件会直接在子元素事件执行完成后,插入在主线程中。如果主线程不为空,那么会优先于 jobs 执行。

经典示例

示例详解:https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

通过鼠标点击

<div class="outer">
<div class="inner"></div>
</div> // Let's get hold of those elements
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner'); // Let's listen for attribute changes on the
// outer element
new MutationObserver(function() {
console.log('mutate');
}).observe(outer, {
attributes: true
}); // Here's a click listener…
function onClick() {
console.log('click'); setTimeout(function() {
console.log('timeout');
}, 0); Promise.resolve().then(function() {
console.log('promise');
}); outer.setAttribute('data-random', Math.random());
} // …which we'll attach to both elements
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick); // 输出结果
click
mutate
click
mutate
promise
promise
timeout
timeout

进阶--通过js执行

<div class="outer">
<div class="inner"></div>
</div> // Let's get hold of those elements
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner'); // Let's listen for attribute changes on the
// outer element
new MutationObserver(function() {
console.log('mutate');
}).observe(outer, {
attributes: true
}); // Here's a click listener…
function onClick() {
console.log('click'); setTimeout(function() {
console.log('timeout');
}, 0); Promise.resolve().then(function() {
console.log('promise');
}); outer.setAttribute('data-random', Math.random());
} // …which we'll attach to both elements
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);
inner.click(); // 输出结果
click
click
mutate
promise
promise
timeout
timeout

由于点击事件是 js 执行的,inner 的 onClick 函数执行完成时,inner.click() 语句的作用域还没有退栈,主线程调用栈不是空的,导致 jobs 队列任务不会执行,mutate 和 promise 语句都未能在事件循环中执行到。从而执行了 outer 的 onClick 函数。outer 的 onClick 函数执行完成后,inner.click() 语句才退栈,继而执行 jobs 的任务。

只有一个 mutate 是由于 jobs 队列中,只能有一个 MutationObserver 任务,第二次创建时,前一个 MutationObserver 任务没有执行,顾不再创建。

js内部事件机制--单线程原理的更多相关文章

  1. 关于js内部运行机制的一本好书

    读<单页Web应用一书>,第二章讲了js内部运行机制,感觉棒极了.之前读<你不知道的js>,看的云里雾里,似懂非懂.没想到单页Web一书将此内容讲的如此通俗易懂,好多困惑已久的 ...

  2. js的事件机制二

    js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签 单双击-----用户会进行点击动作的HTML元素 鼠标事件 ...

  3. js的事件机制

    js的事件机制 解释:当我们的行为动作满足了一定的条件后,会触发某事务的执行. 内容: 1.单双击事件 单击:onclick 当鼠标单击时候会触发 双击:ondbclick 当鼠标双击时候会触发 2. ...

  4. 一张图看懂 JS 的事件机制

    一.为什么 JavaScript 单线程 假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了避免复杂性, JS ...

  5. 我也来说说js的事件机制

    原文链接:http://www.w3cfuns.com/notes/17398/8062de2558ef495ce6cb7679f940ae5c.html 学js,不懂事件机制,基本可以说学了js,就 ...

  6. JS之事件机制

    一.绑定事件的3种方式 1.内联绑定事件 2.on+事件名,绑定事件程序 3.通过addEventListener/removeEventListener绑定事件 不支持ie9之前的浏览器,ie9之前 ...

  7. node.js 的事件机制

    昨天到今天, 又看了一边node 的事件模块,  觉得很神奇~  分享一下  - -> 首先, 补充下对node 的理解: nodeJs 是一个单进程单线程应用程序, 但是通过事件和回调支持并发 ...

  8. 初步理解JS的事件机制

    一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...

  9. jQuery的内部运行机制和原理

    jQuery的优点: jQuery是一个非常优秀的JavaScript库,与Prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从Web开发实用的角度出发,抛除了其它Lib中 ...

随机推荐

  1. C#中的Sealed和J#中的Final比较(转载)

    Sealed与Final修饰符其实并不是一个语言平台的产物,他们有着各自所属的语言环境,但这两个关键字都是.Net平台中不可或缺的,那么二者用法几何,随本文一探究竟. 一.Sealed sealed ...

  2. C语言输入语句scanf与fgets linux下

    1.测试使用scanf的一个例子: #include "stdio.h" #include "string.h" int main() { char name[ ...

  3. 关于Flume以及Kafka理解

  4. SQL Server ->> Computed Column(计算列)

    Computed Column(计算列)是自SQL Server 2005开始就有的特性.计算列的定义是一个表达式.表达式可以是非计算列,常量,函数间的组合.但是不可以是子查询. 计算列数据固化 默认 ...

  5. Redis设计与实现读后感

    看了一下时间,现在是2018年8月22日14:28,看完最后一页内容之后,我简短的停留了一下,任思绪翻飞. redis设计与实现大概看了有12天左右,12天前,我的心里很乱,整个人都处于一种焦虑不安的 ...

  6. html5shiv.js和respond.js引入不起作用解决

    当项目需求需要兼容ie7,8这些奇葩浏览器时,考虑到h5的便捷性及响应式,我们往往引入html5shiv.js和respond.js来让ie7,8兼容h5及一些响应式变化,引入时就需要用到条件注释,原 ...

  7. JsonPath教程

    1. 介绍 类似于XPath在xml文档中的定位,JsonPath表达式通常是用来路径检索或设置Json的.其表达式可以接受“dot–notation”和“bracket–notation”格式,例如 ...

  8. ZT 初始化 const 成员和引用类型成员(C++)

    初始化 const 成员和引用类型成员(C++) 初始化 const 成员和引用类型成员的问题,在 C++ 教材中讲述初始化列表的章节应该都有讲过,但是因为平时用得少,所以可能有不少人没注意到.待到用 ...

  9. 全新Chrome Devtool Performance使用指南

    运行时性能表现(runtime performance)指的是当你的页面在浏览器运行时的性能表现,而不是在下载页面的时候的表现.这篇指南将会告诉你怎么用Chrome DevToos Performan ...

  10. SAP R/3系统的R和3分别代表什么含义,负载均衡的实现原理

    1972年,SAP诞生,推出了RF系统(实时财务会计系统), 后来命名为R1. R指Real time.3既指第三代系统,又代表3层架构. 三层架构分别为下图的Presentation server ...