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

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

淺談javascript事件環微任務和宏任務隊列原理

瀏覽:92日期:2023-10-14 09:47:08

JS 事件環

JS 程序的運行是離不開事件環機制的,這個機制保證在發生某些事情的時候我們有機會執行一個我們事先預定好的函數,事情發生的時候 JS 會將相應的函數入棧執行然后出棧,但是關于事件環我們還有一些未知的東西,例如,setTimeout 我們習慣稱他為定時器,但是可能很多人沒有意識到,這個東西和我們常用的一些事件沒什么不同,只不過我們通常所說的事件大多需要用戶觸發,而 setTimeout 不用用戶自己觸發,而是指定時間之后觸發;那么問題來了,如果我們將時間設置為 0 會發生什么?會立即執行么?

setTimeout、DOM或者 HTTP請求這部分其實并不在 v8 引擎中,這些屬于 web API,javascript 是一個單線程的語言,也就意味著一次只能做一件事情,這個事實從未改變

執行原理

JS 中所有的方法都會被推入棧中執行,執行完成被彈出,在遇到異步代碼的時候,例如 setTimeout MutationObserver Promise 異步的部分會由其他掌管 webAPI 的地方執行,等異步有結果之后,回調函數會進入相應的隊列,Promise MutationObserver 回調進入微任務隊列,setTimeout setInterval requestAnimationFrame 進入宏任務隊列。等待主線程的執行棧空了,微任務隊列立刻被推入棧中執行,執行完畢開始執行宏任務隊列

淺談javascript事件環微任務和宏任務隊列原理

一個經典的例子

html

<div class='outer'> <div class='inner'></div></div>

js

// Let’s get hold of those elementsvar outer = document.querySelector(’.outer’);var inner = document.querySelector(’.inner’);// Let’s listen for attribute changes on the// outer elementnew 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 elementsinner.addEventListener(’click’, onClick);outer.addEventListener(’click’, onClick);

以上代碼在,手動點擊 inner 元素的時候會有如下輸出

clickpromisemutateclickpromisemutatetimeouttimeout

截止 2020年8月份 chrome edge opera firefox 的結果是統一的,但是在此之前的版本可能會有不同的輸出。

一個奇怪的現象

上述代碼我們不使用手動觸發點擊,而是使用 inner.click() 觸發點擊,其結果會有很大的不同

clickclickpromisemutatepromisetimeouttimeout

造成以上巨大差異的原因是,手動點擊,不是通過函數進入執行棧的方式觸發點擊事件的回調,所以inner 的回調執行完了主線程中的執行棧就是空的可以直接執行隊列中任務,然后事件冒泡導致的回調函數才被推入棧運行;而 click 方法的點擊則是通過將 click 推入棧中執行來達到的,inner 的點擊回調執行完了之后 click 方法并沒有被彈出棧,而是直接執行冒泡的下一個回調,由于下一個回調有一個重復的 屬性設置 這是不會重復觸發 MutationObserver的所以 mutate 的輸出只會有一個。等所有的冒泡回調被執行完畢 click 函數才會被彈出棧。

最后注意,瀏覽器會盡量預先執行較為敏感的操作。

以上就是淺談javascript事件環微任務和宏任務隊列原理的詳細內容,更多關于JavaScript 事件環的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 济宁工业提升门|济宁电动防火门|济宁快速堆积门-济宁市统一电动门有限公司 | 色谱柱-淋洗液罐-巴罗克试剂槽-巴氏吸管-5ml样品瓶-SBS液氮冻存管-上海希言科学仪器有限公司 | 政府园区专业委托招商平台_助力企业选址项目快速落地_东方龙商务集团 | 商标转让-购买商标专业|放心的商标交易网-蜀易标商标网 | 山东限矩型液力偶合器_液力耦合器易熔塞厂家-淄博市汇川源机械厂 | 短信群发平台_群发短信软件_短信营销-讯鸽科技 | 99文库_实习生实用的范文资料文库站 | 首页-瓜尔胶系列-化工单体系列-油田压裂助剂-瓜尔胶厂家-山东广浦生物科技有限公司 | 耐驰泵阀管件制造-耐驰泵阀科技(天津)有限公司 | 代写标书-专业代做标书-商业计划书代写「深圳卓越创兴公司」 | 净水器代理,净水器招商,净水器加盟-FineSky德国法兹全屋净水 | 宁波普瑞思邻苯二甲酸盐检测仪,ROHS2.0检测设备,ROHS2.0测试仪厂家 | 隔离变压器-伺服变压器--输入输出电抗器-深圳市德而沃电气有限公司 | 全自动面膜机_面膜折叠机价格_面膜灌装机定制_高速折棉机厂家-深圳市益豪科技有限公司 | 称重传感器,测力传感器,拉压力传感器,压力变送器,扭矩传感器,南京凯基特电气有限公司 | 济南ISO9000认证咨询代理公司,ISO9001认证,CMA实验室认证,ISO/TS16949认证,服务体系认证,资产管理体系认证,SC食品生产许可证- 济南创远企业管理咨询有限公司 郑州电线电缆厂家-防火|低压|低烟无卤电缆-河南明星电缆 | 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 安徽净化板_合肥岩棉板厂家_玻镁板厂家_安徽科艺美洁净科技有限公司 | 无压烧结银_有压烧结银_导电银胶_导电油墨_导电胶-善仁(浙江)新材料 | 臭氧老化试验箱,高低温试验箱,恒温恒湿试验箱,防水试验设备-苏州亚诺天下仪器有限公司 | 天命文免费算命堂_自助算命_自由算命系统_长文周易 | 钢木实验台-全钢实验台-化验室通风柜-实验室装修厂家-杭州博扬实验设备 | 岩棉板|岩棉复合板|聚氨酯夹芯板|岩棉夹芯板|彩钢夹芯板-江苏恒海钢结构 | 酒糟烘干机-豆渣烘干机-薯渣烘干机-糟渣烘干设备厂家-焦作市真节能环保设备科技有限公司 | 鑫达滑石-辽宁鑫达滑石集团 | 压砖机、液压制砖机、静压砖机、环保砖机生产厂家—杜甫机械 | 陕西高职单招-陕西高职分类考试网| 防水接头-电缆防水接头-金属-电缆密封接头-不锈钢电缆接头 | 江西自考网| 「银杏树」银杏树行情价格_银杏树种植_山东程锦园林 | elisa试剂盒-PCR试剂盒「上海谷研实业有限公司」 | 无负压供水设备,消防稳压供水设备-淄博创辉供水设备有限公司 | 金属软管_不锈钢金属软管_巩义市润达管道设备制造有限公司 | 企业管理培训,企业培训公开课,企业内训课程,企业培训师 - 名课堂企业管理培训网 | 药品仓库用除湿机-变电站用防爆空调-油漆房用防爆空调-杭州特奥环保科技有限公司 | 鼓风干燥箱_真空烘箱_高温干燥箱_恒温培养箱-上海笃特科学仪器 | 软文世界-软文推广-软文营销-新闻稿发布-一站式软文自助发稿平台 | 外贸网站建设-外贸网站设计制作开发公司-外贸独立站建设【企术】 | 皮带机-带式输送机价格-固定式胶带机生产厂家-河南坤威机械 | 智能气瓶柜(大型气瓶储存柜)百科 | 数显水浴恒温振荡器-分液漏斗萃取振荡器-常州市凯航仪器有限公司 |