电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

詳解JavaScript 的執(zhí)行機(jī)制

瀏覽:70日期:2023-10-12 14:50:42

一、關(guān)于javascript

javascript是一門(mén)單線程語(yǔ)言,在最新的HTML5中提出了Web Worker,但javascript是單線程這一核心仍未改變。

為什么js是單線程的語(yǔ)言?因?yàn)樽畛醯膉s是用來(lái)在瀏覽器驗(yàn)證表單操縱DOM元素的。如果js是多線程的話,兩個(gè)線程同時(shí)對(duì)一個(gè)DOM進(jìn)行了相互沖突的操作,那么瀏覽器的解析是無(wú)法執(zhí)行的。

Web Worker 的作用,就是為 JavaScript 創(chuàng)造多線程環(huán)境,允許主線程創(chuàng)建 Worker 線程,將一些任務(wù)分配給后者運(yùn)行。在主線程運(yùn)行的同時(shí),Worker 線程在后臺(tái)運(yùn)行,兩者互不干擾。等到 Worker 線程完成計(jì)算任務(wù),再把結(jié)果返回給主線程。

二、javascript事件循環(huán)

當(dāng)我們調(diào)用一個(gè)方法的時(shí)候,js會(huì)生成一個(gè)與這個(gè)方法對(duì)應(yīng)的執(zhí)行環(huán)境(context),又叫執(zhí)行上下文。這個(gè)執(zhí)行環(huán)境中存在著這個(gè)方法的私有作用域,上層作用域的指向,方法的參數(shù),這個(gè)作用域中定義的變量以及這個(gè)作用域的this對(duì)象。 而當(dāng)一系列方法被依次調(diào)用的時(shí)候,因?yàn)閖s是單線程的,同一時(shí)間只能執(zhí)行一個(gè)方法,于是這些方法被排隊(duì)在一個(gè)單獨(dú)的地方。這個(gè)地方被稱為執(zhí)行棧。

js引擎遇到一個(gè)異步事件后并不會(huì)一直等待其返回結(jié)果,而是會(huì)將這個(gè)事件掛起,繼續(xù)執(zhí)行執(zhí)行棧中的其他任務(wù)。

當(dāng)一個(gè)異步事件返回結(jié)果后,js會(huì)將這個(gè)事件加入與當(dāng)前執(zhí)行棧不同的另一個(gè)隊(duì)列,我們稱之為事件隊(duì)列。被放入事件隊(duì)列不會(huì)立刻執(zhí)行其回調(diào),而是等待當(dāng)前執(zhí)行棧中的所有任務(wù)都執(zhí)行完畢, 主線程處于閑置狀態(tài)時(shí),主線程會(huì)去查找事件隊(duì)列是否有任務(wù)。如果有,那么主線程會(huì)從中取出排在第一位的事件,并把這個(gè)事件對(duì)應(yīng)的回調(diào)放入執(zhí)行棧中,然后執(zhí)行其中的同步代碼。如此反復(fù),這樣就形成了一個(gè)無(wú)限的循環(huán)。

三、setTimeout

setTimeout這個(gè)函數(shù),是經(jīng)過(guò)指定時(shí)間后,把要執(zhí)行的任務(wù)加入到Event Queue中,又因?yàn)槭菃尉€程任務(wù)要一個(gè)一個(gè)執(zhí)行,如果前面的任務(wù)需要的時(shí)間太久,那么只能等著。

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

上述代碼執(zhí)行task()需要的時(shí)間遠(yuǎn)遠(yuǎn)超過(guò)3秒,執(zhí)行過(guò)程如下:

task()進(jìn)入Event Table并注冊(cè),計(jì)時(shí)開(kāi)始。 執(zhí)行sleep函數(shù),很慢,非常慢,計(jì)時(shí)仍在繼續(xù)。 3秒到了,計(jì)時(shí)事件timeout完成,task()進(jìn)入Event Queue,但是sleep還沒(méi)執(zhí)行完,只好等著。 sleep終于執(zhí)行完了,task()終于從Event Queue進(jìn)入了主線程執(zhí)行。

  setTimeout(fn,0)的含義是,指定某個(gè)任務(wù)在主線程最早可得的空閑時(shí)間執(zhí)行,意思就是不用再等多少秒了,只要主線程執(zhí)行棧內(nèi)的同步任務(wù)全部執(zhí)行完成,棧為空就馬上執(zhí)行。

四、setInterval

   對(duì)于執(zhí)行順序來(lái)說(shuō),setInterval會(huì)每隔指定的時(shí)間將注冊(cè)的函數(shù)置入Event Queue,如果前面的任務(wù)耗時(shí)太久,那么同樣需要等待。

唯一需要注意的一點(diǎn)是,對(duì)于setInterval(fn,ms)來(lái)說(shuō),我們已經(jīng)知道不是每過(guò)ms秒會(huì)執(zhí)行一次fn,而是每過(guò)ms秒,會(huì)有fn進(jìn)入Event Queue。

五、Promise與process.nextTick(callback)

Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。所謂Promise,簡(jiǎn)單說(shuō)就是一個(gè)容器,里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果。從語(yǔ)法上說(shuō),Promise 是一個(gè)對(duì)象,從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API,各種異步操作都可以用同樣的方法進(jìn)行處理。

process.nextTick(callback)類似node.js版的'setTimeout',在事件循環(huán)的下一次循環(huán)中調(diào)用 callback 回調(diào)函數(shù)。

六、宏任務(wù)和微任務(wù)

macro-task(宏任務(wù)):包括整體代碼script,setTimeout,setInterval micro-task(微任務(wù)):Promise.then,process.nextTick

不同類型的任務(wù)會(huì)進(jìn)入對(duì)應(yīng)的Event Queue,比如setTimeout和setInterval會(huì)進(jìn)入相同的Event Queue。

事件循環(huán)的順序,決定js代碼的執(zhí)行順序。

進(jìn)入整體代碼(宏任務(wù))后,開(kāi)始第一次循環(huán)。接著執(zhí)行所有的微任務(wù)。然后再次從宏任務(wù)開(kāi)始,找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢,再執(zhí)行所有的微任務(wù)。

setTimeout(function() { console.log(’setTimeout’);})new Promise(function(resolve) { console.log(’promise’);}).then(function() { console.log(’then’);})console.log(’console’); 這段代碼作為宏任務(wù),進(jìn)入主線程。 先遇到setTimeout,那么將其回調(diào)函數(shù)注冊(cè)后分發(fā)到宏任務(wù)Event Queue。 接下來(lái)遇到了Promise,new Promise立即執(zhí)行,因?yàn)閚ew Promise回調(diào)函數(shù)中的代碼是同步任務(wù),then函數(shù)分發(fā)到微任務(wù)Event Queue。 遇到console.log(),立即執(zhí)行。 好啦,整體代碼script作為第一個(gè)宏任務(wù)執(zhí)行結(jié)束,看看有哪些微任務(wù)?我們發(fā)現(xiàn)了then在微任務(wù)Event Queue里面,執(zhí)行。 第一輪事件循環(huán)結(jié)束了,我們開(kāi)始第二輪循環(huán),當(dāng)然要從宏任務(wù)Event Queue開(kāi)始。我們發(fā)現(xiàn)了宏任務(wù)Event Queue中setTimeout對(duì)應(yīng)的回調(diào)函數(shù),立即執(zhí)行。 結(jié)束。

七、async await

1.async 做一件什么事情?

帶 async 關(guān)鍵字的函數(shù),它使得你的函數(shù)的返回值必定是 promise 對(duì)象。

也就是,如果async關(guān)鍵字函數(shù)返回的不是promise,會(huì)自動(dòng)用 Promise.resolve() 包裝。如果async關(guān)鍵字函數(shù)顯式地返回promise,那就以你返回的promise為準(zhǔn)。

2.await 在等什么?

await等的是右側(cè)「表達(dá)式」的結(jié)果。也就是說(shuō),右側(cè)如果是函數(shù),那么函數(shù)的return值就是「表達(dá)式的結(jié)果」。右側(cè)如果是一個(gè) ’hello’ 或者什么值,那表達(dá)式的結(jié)果就是 ’hello’。

3.await 等到之后,做了一件什么事情?

await右側(cè)表達(dá)式的結(jié)果,就是await要等的東西。等到之后,對(duì)于await來(lái)說(shuō),分2個(gè)情況:

不是promise對(duì)象 是promise對(duì)象

如果不是 promise , await會(huì)阻塞后面的代碼,先執(zhí)行async外面的同步代碼,同步代碼執(zhí)行完,再回到async內(nèi)部,把這個(gè)非promise的東西,作為 await表達(dá)式的結(jié)果。

如果它等到的是一個(gè) promise 對(duì)象,await 也會(huì)暫停async后面的代碼,先執(zhí)行async外面的同步代碼,等著 Promise 對(duì)象 fulfilled,然后把 resolve 的參數(shù)作為 await 表達(dá)式的運(yùn)算結(jié)果。

4.示例

async function async1() { console.log(’async1 start’); await async2(); console.log(’async1 end’);}async function async2() { console.log(’async2’);}console.log(’script start’);setTimeout(function () { console.log(’setTimeout’);}, 0);async1();new Promise(function (resolve) { console.log(’promise1’); resolve();}).then(function () { console.log(’promise2’);});console.log(’script end’); 這段代碼作為宏任務(wù),進(jìn)入主線程。 先打印出script start。接著執(zhí)行函數(shù)async1。 打印出async1 start,執(zhí)行到await,執(zhí)行函數(shù)async2,打印出async2。 此時(shí)await會(huì)阻塞async1后面的代碼,會(huì)先執(zhí)行async1外面的同步代碼。 setTimeout放入事件循環(huán)的宏任務(wù)。接著執(zhí)行到Promise,打印出promise1,promise.then放入事件循環(huán)的微任務(wù)。接著打印script end。 現(xiàn)在async1外面的同步代碼執(zhí)行完畢,回到async1內(nèi)部打印出async1 end。 整體代碼執(zhí)行完畢,執(zhí)行微任務(wù)promise.then,打印出promise2。 最后執(zhí)行宏任務(wù)setTimeout,打印setTimeout。

所以這段代碼的執(zhí)行順序?yàn)椋簊cript start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout

以上就是詳解JavaScript 的執(zhí)行機(jī)制的詳細(xì)內(nèi)容,更多關(guān)于JavaScript 執(zhí)行機(jī)制的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 成都亚克力制品,PVC板,双色板雕刻加工,亚克力门牌,亚克力标牌,水晶字雕刻制作-零贰捌广告 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 | 数控专用机床,专用机床,自动线,组合机床,动力头,自动化加工生产线,江苏海鑫机床有限公司 | 恒温振荡混匀器-微孔板振荡器厂家-多管涡旋混匀器厂家-合肥艾本森(www.17world.net) | 聚氨酯保温钢管_聚氨酯直埋保温管道_聚氨酯发泡保温管厂家-沧州万荣防腐保温管道有限公司 | 奥运星-汽车性能网评-提供个性化汽车资讯 | 碎石机设备-欧版反击破-欧版颚式破碎机(站)厂家_山东奥凯诺机械 高低温试验箱-模拟高低温试验箱订制-北京普桑达仪器科技有限公司【官网】 | 气密性检测仪_气密性检测设备_防水测试仪_密封测试仪-岳信仪器 | 动物麻醉机-数显脑立体定位仪-北京易则佳科技有限公司 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 磁力抛光机_磁力研磨机_磁力去毛刺机-冠古设备厂家|维修|租赁【官网】 | 上海公司注册-代理记账-招投标审计-上海昆仑扇财税咨询有限公司 上海冠顶工业设备有限公司-隧道炉,烘箱,UV固化机,涂装设备,高温炉,工业机器人生产厂家 | 吸污车_吸粪车_抽粪车_电动三轮吸粪车_真空吸污车_高压清洗吸污车-远大汽车制造有限公司 | 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 过跨车_过跨电瓶车_过跨转运车_横移电动平车_厂区转运车_无轨转运车 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 超高频感应加热设备_高频感应电源厂家_CCD视觉检测设备_振动盘视觉检测设备_深圳雨滴科技-深圳市雨滴科技有限公司 | 上海新光明泵业制造有限公司-电动隔膜泵,气动隔膜泵,卧式|立式离心泵厂家 | 知名电动蝶阀,电动球阀,气动蝶阀,气动球阀生产厂家|价格透明-【固菲阀门官网】 | 耐高温电缆厂家-远洋高温电缆 | 臭氧发生器_臭氧消毒机 - 【同林品牌 实力厂家】| 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 | 水稻烘干机,小麦烘干机,大豆烘干机,玉米烘干机,粮食烘干机_巩义市锦华粮食烘干机械制造有限公司 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | 政府园区专业委托招商平台_助力企业选址项目快速落地_东方龙商务集团 | 皮带机_移动皮带机_大倾角皮带机_皮带机厂家 - 新乡市国盛机械设备有限公司 | 江苏齐宝进出口贸易有限公司 | 沙盘模型公司_沙盘模型制作公司_建筑模型公司_工业机械模型制作厂家 | 高楼航空障碍灯厂家哪家好_航空障碍灯厂家_广州北斗星障碍灯有限公司 | 十二星座查询(性格特点分析、星座运势解读) - 玄米星座网 | 油缸定制-液压油缸厂家-无锡大鸿液压气动成套有限公司 | 刺绳_刀片刺网_刺丝滚笼_不锈钢刺绳生产厂家_安平县浩荣金属丝网制品有限公司-安平县浩荣金属丝网制品有限公司 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 电伴热系统施工_仪表电伴热保温箱厂家_沃安电伴热管缆工业技术(济南)有限公司 | 汽车整车综合环境舱_军标砂尘_盐雾试验室试验箱-无锡苏南试验设备有限公司 | 警方提醒:赣州约炮论坛真的安全吗?2025年新手必看的网络交友防坑指南 | 置顶式搅拌器-优莱博化学防爆冰箱-磁驱搅拌器-天津市布鲁克科技有限公司 | 知网论文检测系统入口_论文查重免费查重_中国知网论文查询_学术不端检测系统 | 化工ERP软件_化工新材料ERP系统_化工新材料MES软件_MES系统-广东顺景软件科技有限公司 | 整合营销推广|营销网络推广公司|石家庄网站优化推广公司|智营销 好物生环保网、环保论坛 - 环保人的学习交流平台 | 不锈钢螺丝 - 六角螺丝厂家 - 不锈钢紧固件 - 万千紧固件--紧固件一站式采购 | 时代北利离心机,实验室离心机,医用离心机,低速离心机DT5-2,美国SKC采样泵-上海京工实业有限公司 工业电炉,台车式电炉_厂家-淄博申华工业电炉有限公司 |