JavaScript运行机制

一.js是一门单线程的语言,js是按照语句出现的顺序执行的

二.Javascript事件循环

因为js是单线程,所有js任务要一个一个顺序执行,任务分为:


             同步任务


              异步任务


流程图:


任务进入执行栈——>同步任务还是异步任务?


同步任务——>主线程——>任务全部执行完毕——>读取任务队列中的结果,进入主线程执行


异步任务——>event table——>注册回调函数——>event queue——>读取任务队列中的结果,进入主线程执行


上面的过程不断重复——就是常说的Event  Loop(事件循环)


let data = [];

$.ajax({

url:www.javascript.com,

data:data,

success:() => { console.log('发送成功!'); } })

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

分析:1.ajax进入Event Table,注册回调函数 success()

2.执行同步任务 console.log('代码执行结束')

3.ajax事件完成,回调函数 进入event queue

4.主线程 从event  queue中读取 回调函数success 并执行


setTimeout

setTimeout(() => { task() },3000)

sleep(10000000)

分析:1.task()进入event  table并注册,计时开始

2.执行同步任务 sleep()

3.3秒到了,但是同步任务未完成,所以event queue中仍需等待

4.执行完,task()从 event queue进入主线程执行,延迟时间大于3秒

setTimeout(fn,0)

指某个任务在主线程最早可得的空闲时间执行,即主线程执行栈中的同步任务完成后,立即执行fn,0毫秒是达不到的,最低是4毫秒



setInterval

会每隔指定的时间将注册的函数置入 event  queue


setInterval(fn, ms):  不是每过ms 会执行一次fn,而是,没过ms,会有fn进入event  queue,一旦fn执行时间超过了延迟时间ms,那就看不出来有时间间隔了



Promise 与 process.nextTick(callback)

process.nextTick(callback)类似 node.js版的“setTimeout”,在事件循环的下一次循环中调用callback回调函数

任务更精细的定义:

宏任务: 包括整体代码script, setTimeout, setInterval

微任务:promise, process.nextTick

事件循环循序:进入整体代码(宏任务)后,开始第一次循环,接着执行所有的微任务,然后再次从宏任务开始,找到其中一个任务队列执行完毕,再执行所有的微任务

setTimeout(function() { console.log('setTimeout'); })

new Promise(function(resolve) { console.log('promise');

}).then(function() { console.log('then'); })

console.log('console')

// promise 

//console

//undefined

//setTimeout

分析:1.这段代码作为宏任务,进入主线程

2.先遇到settimout,那么将其回调函数注册后分发到宏任务event queue

3.接下来promise,立即执行,并将then函数分发到微任务event queue

4.遇到 console.log并执行

5.整体代码script作为第一个宏任务执行结束,看看有哪些微任务?then函数在微任务中,并执行

6.第一轮事件循环结束后,开始第二轮循环,从宏任务event queue开始,发现 了宏任务 setimout对应的回调函数,立即执行

7.结束

console.log('1');

setTimeout(function() {

console.log('2');

process.nextTick(function() { console.log('3'); })

new Promise(function(resolve) {

console.log('4');

resolve();

}).then(function() { console.log('5') }) })

process.nextTick(function() { console.log('6'); })

new Promise(function(resolve) {

console.log('7');

resolve(); }).

then(function() { console.log('8') })

setTimeout(function() { console.log('9');

process.nextTick(function() { console.log('10'); })

new Promise(function(resolve) { console.log('11');

resolve();

}).then(function() { console.log('12') }) })

分析

第一轮事件循环流程分析如下:

整体script作为第一个宏任务进入主线程,遇到console.log,输出1。

遇到setTimeout,其回调函数被分发到宏任务Event Queue中。我们暂且记为setTimeout1。

遇到process.nextTick(),其回调函数被分发到微任务Event Queue中。我们记为process1。

遇到Promise,new Promise直接执行,输出7。then被分发到微任务Event Queue中。我们记为then1。

又遇到了setTimeout,其回调函数被分发到宏任务Event Queue中,我们记为setTimeout2。

宏任务Event Queue微任务Event Queue

setTimeout1process1

setTimeout2then1

上表是第一轮事件循环宏任务结束时各Event Queue的情况,此时已经输出了1和7。

我们发现了process1和then1两个微任务。

执行process1,输出6。

执行then1,输出8。

好了,第一轮事件循环正式结束,这一轮的结果是输出1,7,6,8。那么第二轮时间循环从setTimeout1宏任务开始:

首先输出2。接下来遇到了process.nextTick(),同样将其分发到微任务Event Queue中,记为process2。new Promise立即执行输出4,then也分发到微任务Event Queue中,记为then2。

宏任务Event Queue微任务Event Queue

setTimeout2process2

then2

第二轮事件循环宏任务结束,我们发现有process2和then2两个微任务可以执行。

输出3。

输出5。

第二轮事件循环结束,第二轮输出2,4,3,5。

第三轮事件循环开始,此时只剩setTimeout2了,执行。

直接输出9。

将process.nextTick()分发到微任务Event Queue中。记为process3。

直接执行new Promise,输出11。

将then分发到微任务Event Queue中,记为then3。

宏任务Event Queue微任务Event Queue

process3

then3

第三轮事件循环宏任务执行结束,执行两个微任务process3和then3。

输出10。

输出12。

第三轮事件循环结束,第三轮输出9,11,10,12。

整段代码,共进行了三次事件循环,完整的输出为1,7,6,8,2,4,3,5,9,11,10,12。

(请注意,node环境下的事件监听依赖libuv与前端环境不完全相同,输出顺序可能会有误差)



总结

1.js的异步

js是一门单线程的语言,无论是什么新框架新语法实现的所谓异步,都是用同步的方法去模拟的

2.事件循环event  Loop

事件循环是js实现异步的一种方法,也是js的执行机制

3.js的执行与运行

js在不同的环境下,不如node,浏览器等,执行方式是不同的

运行大多指js解析引擎,是统一的



作者:ssssyoki

链接:https://juejin.im/post/59e85eebf265da430d571f89

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

推荐阅读更多精彩内容