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

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

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

瀏覽:93日期: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
相關文章:
主站蜘蛛池模板: 小型气象站_便携式自动气象站_校园气象站-竞道气象设备网 | 产业规划_产业园区规划-产业投资选址及规划招商托管一体化服务商-中机院产业园区规划网 | 祝融环境-地源热泵多恒系统高新技术企业,舒适生活环境缔造者! | 公交驾校-北京公交驾校欢迎您!| EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | 润滑油加盟_润滑油厂家_润滑油品牌-深圳市沃丹润滑科技有限公司 琉璃瓦-琉璃瓦厂家-安徽盛阳新型建材科技有限公司 | 济南电缆桥架|山东桥架-济南航丰实业有限公司 | 办公室家具_板式办公家具定制厂家-FMARTS福玛仕办公家具 | 耐酸碱泵-自吸耐酸碱泵型号「品牌厂家」立式耐酸碱泵价格-昆山国宝过滤机有限公司首页 | 三效蒸发器_多效蒸发器价格_四效三效蒸发器厂家-青岛康景辉 | 卓能JOINTLEAN端子连接器厂家-专业提供PCB接线端子|轨道式端子|重载连接器|欧式连接器等电气连接产品和服务 | 广州印刷厂_广州彩印厂-广州艺彩印务有限公司 | 裹包机|裹膜机|缠膜机|绕膜机-上海晏陵智能设备有限公司 | 搪瓷搅拌器,搪玻璃搅拌器,搪玻璃冷凝器_厂家-淄博越宏化工设备 | 网站优化公司_SEO优化_北京关键词百度快速排名-智恒博网络 | 安徽净化板_合肥岩棉板厂家_玻镁板厂家_安徽科艺美洁净科技有限公司 | 专注氟塑料泵_衬氟泵_磁力泵_卧龙泵阀_化工泵专业品牌 - 梭川泵阀 | 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | 柔性测斜仪_滑动测斜仪-广州杰芯科技有限公司 | 知网论文检测系统入口_论文查重免费查重_中国知网论文查询_学术不端检测系统 | 上海办公室装修公司_办公室设计_直营办公装修-羚志悦装 | 河南mpp电力管_mpp电力管生产厂家_mpp电力电缆保护管价格 - 河南晨翀实业 | 南京PVC快速门厂家南京快速卷帘门_南京pvc快速门_世界500强企业国内供应商_南京美高门业 | 泵阀展|阀门展|水泵展|流体机械展 -2025上海国际泵管阀展览会flowtech china | 商标转让-购买商标专业|放心的商标交易网-蜀易标商标网 | 千斤顶,液压千斤顶-力良企业,专业的液压千斤顶制造商,shliliang.com | 机构创新组合设计实验台_液压实验台_气动实训台-戴育教仪厂 | 长沙中央空调维修,中央空调清洗维保,空气能热水工程,价格,公司就找维小保-湖南维小保环保科技有限公司 | 污水处理设备-海普欧环保集团有限公司 | 小程序开发公司_APP开发多少钱_软件开发定制_微信小程序制作_客户销售管理软件-济南小溪畅流网络科技有限公司 | 东莞喷砂机-喷砂机-喷砂机配件-喷砂器材-喷砂加工-东莞市协帆喷砂机械设备有限公司 | 利浦顿蒸汽发生器厂家-电蒸汽发生器/燃气蒸汽发生器_湖北利浦顿热能科技有限公司官网 | 河南中整光饰机械有限公司-抛光机,去毛刺抛光机,精密镜面抛光机,全自动抛光机械设备 | 除尘布袋_液体过滤袋_针刺毡滤料-杭州辉龙过滤技术有限公司 | 【德信自动化】点胶机_全自动点胶机_自动点胶机厂家_塑料热压机_自动螺丝机-深圳市德信自动化设备有限公司 | 泰安办公家具-泰安派格办公用品有限公司 | 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 诺冠气动元件,诺冠电磁阀,海隆防爆阀,norgren气缸-山东锦隆自动化科技有限公司 | 2-羟基泽兰内酯-乙酰蒲公英萜醇-甘草查尔酮A-上海纯优生物科技有限公司 | 新密高铝耐火砖,轻质保温砖价格,浇注料厂家直销-郑州荣盛窑炉耐火材料有限公司 | 知名电动蝶阀,电动球阀,气动蝶阀,气动球阀生产厂家|价格透明-【固菲阀门官网】 |