JS内部事件机制之单线程原理


Posted in Javascript onJuly 02, 2018

任务队列

主线程:正在执行的代码,会生成函数调用栈。

  • 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内部事件机制之单线程原理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
JS将网址url转化为JSON格式的方法
Jul 02 #Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 #Javascript
JS限制输入框输入的实现代码
Jul 02 #Javascript
webpack手动配置React开发环境的步骤
Jul 02 #Javascript
Angularjs中的$apply及优化使用详解
Jul 02 #Javascript
angularjs 的数据绑定实现原理
Jul 02 #Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 #Javascript
You might like
Sony CFR 320 修复改造
2020/03/14 无线电
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
公务员个人自我评价分享
2013/11/06 职场文书
社区活动总结报告
2014/05/05 职场文书
教师群众路线心得体会
2014/11/04 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android