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

您的位置:首頁技術文章
文章詳情頁

詳解JavaScript 的執行機制

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

一、關于javascript

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

為什么js是單線程的語言?因為最初的js是用來在瀏覽器驗證表單操縱DOM元素的。如果js是多線程的話,兩個線程同時對一個DOM進行了相互沖突的操作,那么瀏覽器的解析是無法執行的。

Web Worker 的作用,就是為 JavaScript 創造多線程環境,允許主線程創建 Worker 線程,將一些任務分配給后者運行。在主線程運行的同時,Worker 線程在后臺運行,兩者互不干擾。等到 Worker 線程完成計算任務,再把結果返回給主線程。

二、javascript事件循環

當我們調用一個方法的時候,js會生成一個與這個方法對應的執行環境(context),又叫執行上下文。這個執行環境中存在著這個方法的私有作用域,上層作用域的指向,方法的參數,這個作用域中定義的變量以及這個作用域的this對象。 而當一系列方法被依次調用的時候,因為js是單線程的,同一時間只能執行一個方法,于是這些方法被排隊在一個單獨的地方。這個地方被稱為執行棧。

js引擎遇到一個異步事件后并不會一直等待其返回結果,而是會將這個事件掛起,繼續執行執行棧中的其他任務。

當一個異步事件返回結果后,js會將這個事件加入與當前執行棧不同的另一個隊列,我們稱之為事件隊列。被放入事件隊列不會立刻執行其回調,而是等待當前執行棧中的所有任務都執行完畢, 主線程處于閑置狀態時,主線程會去查找事件隊列是否有任務。如果有,那么主線程會從中取出排在第一位的事件,并把這個事件對應的回調放入執行棧中,然后執行其中的同步代碼。如此反復,這樣就形成了一個無限的循環。

三、setTimeout

setTimeout這個函數,是經過指定時間后,把要執行的任務加入到Event Queue中,又因為是單線程任務要一個一個執行,如果前面的任務需要的時間太久,那么只能等著。

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

上述代碼執行task()需要的時間遠遠超過3秒,執行過程如下:

task()進入Event Table并注冊,計時開始。 執行sleep函數,很慢,非常慢,計時仍在繼續。 3秒到了,計時事件timeout完成,task()進入Event Queue,但是sleep還沒執行完,只好等著。 sleep終于執行完了,task()終于從Event Queue進入了主線程執行。

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

四、setInterval

   對于執行順序來說,setInterval會每隔指定的時間將注冊的函數置入Event Queue,如果前面的任務耗時太久,那么同樣需要等待。

唯一需要注意的一點是,對于setInterval(fn,ms)來說,我們已經知道不是每過ms秒會執行一次fn,而是每過ms秒,會有fn進入Event Queue。

五、Promise與process.nextTick(callback)

Promise 是異步編程的一種解決方案,比傳統的解決方案——回調函數和事件——更合理和更強大。所謂Promise,簡單說就是一個容器,里面保存著某個未來才會結束的事件(通常是一個異步操作)的結果。從語法上說,Promise 是一個對象,從它可以獲取異步操作的消息。Promise 提供統一的 API,各種異步操作都可以用同樣的方法進行處理。

process.nextTick(callback)類似node.js版的'setTimeout',在事件循環的下一次循環中調用 callback 回調函數。

六、宏任務和微任務

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

不同類型的任務會進入對應的Event Queue,比如setTimeout和setInterval會進入相同的Event Queue。

事件循環的順序,決定js代碼的執行順序。

進入整體代碼(宏任務)后,開始第一次循環。接著執行所有的微任務。然后再次從宏任務開始,找到其中一個任務隊列執行完畢,再執行所有的微任務。

setTimeout(function() { console.log(’setTimeout’);})new Promise(function(resolve) { console.log(’promise’);}).then(function() { console.log(’then’);})console.log(’console’); 這段代碼作為宏任務,進入主線程。 先遇到setTimeout,那么將其回調函數注冊后分發到宏任務Event Queue。 接下來遇到了Promise,new Promise立即執行,因為new Promise回調函數中的代碼是同步任務,then函數分發到微任務Event Queue。 遇到console.log(),立即執行。 好啦,整體代碼script作為第一個宏任務執行結束,看看有哪些微任務?我們發現了then在微任務Event Queue里面,執行。 第一輪事件循環結束了,我們開始第二輪循環,當然要從宏任務Event Queue開始。我們發現了宏任務Event Queue中setTimeout對應的回調函數,立即執行。 結束。

七、async await

1.async 做一件什么事情?

帶 async 關鍵字的函數,它使得你的函數的返回值必定是 promise 對象。

也就是,如果async關鍵字函數返回的不是promise,會自動用 Promise.resolve() 包裝。如果async關鍵字函數顯式地返回promise,那就以你返回的promise為準。

2.await 在等什么?

await等的是右側「表達式」的結果。也就是說,右側如果是函數,那么函數的return值就是「表達式的結果」。右側如果是一個 ’hello’ 或者什么值,那表達式的結果就是 ’hello’。

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

await右側表達式的結果,就是await要等的東西。等到之后,對于await來說,分2個情況:

不是promise對象 是promise對象

如果不是 promise , await會阻塞后面的代碼,先執行async外面的同步代碼,同步代碼執行完,再回到async內部,把這個非promise的東西,作為 await表達式的結果。

如果它等到的是一個 promise 對象,await 也會暫停async后面的代碼,先執行async外面的同步代碼,等著 Promise 對象 fulfilled,然后把 resolve 的參數作為 await 表達式的運算結果。

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’); 這段代碼作為宏任務,進入主線程。 先打印出script start。接著執行函數async1。 打印出async1 start,執行到await,執行函數async2,打印出async2。 此時await會阻塞async1后面的代碼,會先執行async1外面的同步代碼。 setTimeout放入事件循環的宏任務。接著執行到Promise,打印出promise1,promise.then放入事件循環的微任務。接著打印script end。 現在async1外面的同步代碼執行完畢,回到async1內部打印出async1 end。 整體代碼執行完畢,執行微任務promise.then,打印出promise2。 最后執行宏任務setTimeout,打印setTimeout。

所以這段代碼的執行順序為:script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout

以上就是詳解JavaScript 的執行機制的詳細內容,更多關于JavaScript 執行機制的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 东莞市天进机械有限公司-钉箱机-粘箱机-糊箱机-打钉机认准东莞天进机械-厂家直供更放心! | 细沙回收机-尾矿干排脱水筛设备-泥石分离机-建筑垃圾分拣机厂家-青州冠诚重工机械有限公司 | 口臭的治疗方法,口臭怎么办,怎么除口臭,口臭的原因-口臭治疗网 | SOUNDWELL 编码器|电位器|旋转编码器|可调电位器|编码开关厂家-广东升威电子制品有限公司 | 浩方智通 - 防关联浏览器 - 跨境电商浏览器 - 云雀浏览器 | 土壤墒情监测站_土壤墒情监测仪_土壤墒情监测系统_管式土壤墒情站-山东风途物联网 | 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | 不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰]-不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰] | 禹城彩钢厂_钢结构板房_彩钢复合板-禹城泰瑞彩钢复合板加工厂 | 拉力测试机|材料拉伸试验机|电子拉力机价格|万能试验机厂家|苏州皖仪实验仪器有限公司 | 酒糟烘干机-豆渣烘干机-薯渣烘干机-糟渣烘干设备厂家-焦作市真节能环保设备科技有限公司 | 深圳离婚律师咨询「在线免费」华荣深圳婚姻律师事务所专办离婚纠纷案件 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 大型多片锯,圆木多片锯,方木多片锯,板材多片锯-祥富机械有限公司 | 电脑知识|软件|系统|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网 | 青海电动密集架_智能密集架_密集架价格-盛隆柜业青海档案密集架厂家 | 365文案网_全网创意文案句子素材站| 网站seo优化_seo云优化_搜索引擎seo_启新网络服务中心 | 桑茶-七彩贝壳桑叶茶 长寿茶 | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 | 武汉高温老化房,恒温恒湿试验箱,冷热冲击试验箱-武汉安德信检测设备有限公司 | 压缩空气冷冻式干燥机_吸附式干燥机_吸干机_沪盛冷干机 | 清水-铝合金-建筑模板厂家-木模板价格-铝模板生产「五棵松」品牌 | 硅胶管挤出机厂家_硅胶挤出机生产线_硅胶条挤出机_臣泽智能装备 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 专业的压球机生产线及解决方案厂家-河南腾达机械厂 | TYPE-C厂家|TYPE-C接口|TYPE-C防水母座|TYPE-C贴片-深圳步步精 | 耐高温风管_耐高温软管_食品级软管_吸尘管_钢丝软管_卫生级软管_塑料波纹管-东莞市鑫翔宇软管有限公司 | 水厂自动化|污水处理中控系统|水利信息化|智慧水务|智慧农业-山东德艾自动化科技有限公司 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 | 回收二手冲床_金丰旧冲床回收_协易冲床回收 - 大鑫机械设备 | 百度网站优化,关键词排名,SEO优化-搜索引擎营销推广 | 深圳善跑体育产业集团有限公司_塑胶跑道_人造草坪_运动木地板 | 吹田功率计-长创耐压测试仪-深圳市新朗普电子科技有限公司 | 无轨电动平车_轨道平车_蓄电池电动平车★尽在新乡百特智能转运设备有限公司 | 脑钠肽-白介素4|白介素8试剂盒-研域(上海)化学试剂有限公司 | 无机纤维喷涂棉-喷涂棉施工工程-山东华泉建筑工程有限公司▲ | 泰安办公家具-泰安派格办公用品有限公司 | 湖州织里童装_女童男童中大童装_款式多尺码全_织里儿童网【官网】-嘉兴嘉乐网络科技有限公司 | 环氧乙烷灭菌器_压力蒸汽灭菌器_低温等离子过氧化氢灭菌器 _低温蒸汽甲醛灭菌器_清洗工作站_医用干燥柜_灭菌耗材-环氧乙烷灭菌器_脉动真空压力蒸汽灭菌器_低温等离子灭菌设备_河南省三强医疗器械有限责任公司 | 底部填充胶_电子封装胶_芯片封装胶_芯片底部填充胶厂家-东莞汉思新材料 | 破碎机锤头_合金耐磨锤头_郑州宇耐机械工程技术有限公司 |