2018-01-20

浅谈,JavaScript 运行机制和Event Loop

JavaScript是一个非常灵活的语言且是单线程所谓是单线程就好比你去一个银行,银行只开设了一个窗口,然而一个窗口就好比一个线程,取钱的人就好比JS代码。也就是说

javascript是按照语句出现的顺序执行的

其实这样说是很严谨,例如:

setTimeout(

function(){

console.log('定时器开始啦')

});

new Promise(

function(resolve){

console.log('马上执行for循环啦');

for(var i = 0; i < 100; i++)

{

i == 99 && resolve(); }

}).then(

function(){

console.log('执行then函数啦')

});

console.log('代码执行结束');

你觉得会是一行一行的执行吗?为什么会出现我们不一样的结果呢,一行一行的执行对我们执行效果很不好那么怎么解决呢?这就涉及到JS 中的

同步任务

异步任务

何为同步呢?简单的理解就是你向一个女孩子表白,你打电话给她,说喜欢她。这个过程你一直不挂电话,啥事也不干就等她回答,对于你来说就是同步。比如页面骨架和页面元素的渲染就是同步,而异步呢,我进常用AJAX请求。下面一张图让我们来体会一下:

那么这张图说明了什么呢?我们看看

同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入Event Table并注册函数。

当指定的事情完成时,Event Table会将这个函数移入Event Queue。

主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。

上述过程会不断重复,也就是常说的Event Loop(事件循环)。

我们不禁要问了,那怎么知道主线程执行栈为空啊?js引擎存在monitoring process进程,会持续不断的检查主线程执行栈是否为空,一旦为空,就会去Event Queue那里检查是否有等待被调用的函数。

那我们来看一下代码吧,加深理解。

var data={}

$.ajax(

{

url:xxxxxx,

data:data,

success:() => {

console.log('发送成功!');

}

})

console.log('代码执行结束');

有人这么平淡无奇的AJAX有啥奇怪,不妨我来看看这段代码的含义,

ajax进入Event Table,注册回调函数success。

执行console.log('代码执行结束')。

ajax事件完成,回调函数success进入Event Queue。

主线程从Event Queue读取回调函数success并执行。

有的同学就觉得我明白了,下面我再来一段代码看看,

console.log('main1');

process.nextTick(function() {

console.log('process.nextTick1');

});

setTimeout(function() {

console.log('setTimeout');

process.nextTick(function() {

console.log('process.nextTick2');

});

}, 0);

new Promise(function(resolve, reject) {

console.log('promise');

resolve();

}).then(function() {

console.log('promise then');

});

console.log('main2');

不妨我们来分析下:

开始执行全局SCRIPT宏任务,输出 main1,process.nextTick 放入tickTaskQueen,setTimeout放入 macroTaskQueen, new Promise 执行 输出 promise,then 方法 放入 MicroTaskQueen , 接着 最后一行代码 console.log 输出 main2

当前的 宏任务执行完毕,开始清空微任务,先清空tickTaskQueen ,执行 console.log('process.nextTick1'); 输出'process.nextTick1;再清空MicroTaskQueen执行 console.log('promise then'); 输出promise then;微任务全部清空。

开始下次 eventLoop; 执行 setTimeout; 第一行 console.log('setTimeout'); 输出setTimeout; process.nextTick 将任务放入了tickTaskQueen;当前宏任务执行完毕;开始清空MicroTaskQueen,清空tickTaskQueen ,执行 console.log('process.nextTick2');输出process.nextTick2;

顺便附上图:

这幅图很好说明时间循环的机制吧,好了这次就到这里,欢迎大家提意见。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容

  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,708评论 0 5
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,703评论 1 56
  • 一.js是一门单线程的语言,js是按照语句出现的顺序执行的 二.Javascript事件循环 因为js是单线程,所...
    lmmy123阅读 331评论 0 0
  • 静下心学了一波事件循环机制,好开心,我学会了,首先还是得感谢作者写的笔记特别详细 链接: http://www.c...
    Dianaou阅读 521评论 0 0
  • 转载自https://segmentfault.com/a/1190000008595101 『前端碎碎念』系列会...
    Lemon不怕酸啊阅读 2,362评论 0 1