首頁(yè)技術(shù)文章正文

JavaScript同步和異步執(zhí)行機(jī)制有哪些區(qū)別？

更新時(shí)間:2022年06月09日16時(shí)33分來(lái)源:傳智教育瀏覽次數(shù):

JavaScript 語(yǔ)言的一大特點(diǎn)就是單線程，也就是說(shuō)，同一個(gè)時(shí)間只能做一件事。這是因?yàn)?Javascript 這門腳本語(yǔ)言誕生的使命所致——JavaScript 是為處理頁(yè)面中用戶的交互，以及操作 DOM 而誕生的。比如我們對(duì)某個(gè) DOM 元素進(jìn)行添加和刪除操作，不能同時(shí)進(jìn)行。應(yīng)該先進(jìn)行添加，之后再刪除。

單線程就意味著，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。這樣所導(dǎo)致的問題是：如果 JS 執(zhí)行的時(shí)間過(guò)長(zhǎng)，這樣就會(huì)造成頁(yè)面的渲染不連貫，導(dǎo)致頁(yè)面渲染加載阻塞的感覺。

為了解決這個(gè)問題，利用多核 CPU 的計(jì)算能力，HTML5 提出 Web Worker 標(biāo)準(zhǔn)，允許JavaScript 腳本創(chuàng)建多個(gè)線程。于是，JS 中出現(xiàn)了同步和異步。

同步

前一個(gè)任務(wù)結(jié)束后再執(zhí)行后一個(gè)任務(wù)，程序的執(zhí)行順序與任務(wù)的排列順序是一致的、同步的。比如做飯的同步做法：我們要燒水煮飯，等水開了（10分鐘之后），再去切菜，炒菜。

異步

你在做一件事情時(shí)，因?yàn)檫@件事情會(huì)花費(fèi)很長(zhǎng)時(shí)間，在做這件事的同時(shí)，你還可以去處理其他事情。比如做飯的異步做法，我們?cè)跓耐瑫r(shí)，利用這10分鐘，去切菜，炒菜。他們的本質(zhì)區(qū)別：這條流水線上各個(gè)流程的執(zhí)行順序不同。

同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧。JS 的異步是通過(guò)回調(diào)函數(shù)實(shí)現(xiàn)的。一般而言，異步任務(wù)有普通事件（如 click、resize 等）、資源加載（如 load、error 等）

定時(shí)器（包括 setInterval、setTimeout 等）三種類型，異步任務(wù)相關(guān)添加到任務(wù)隊(duì)列中（任務(wù)隊(duì)列也稱為消息隊(duì)列）。