改變你對事件循環(huán)錯誤的認(rèn)知!
當(dāng)前位置:點(diǎn)晴教程→知識管理交流
→『 技術(shù)文檔交流 』
瀏覽器的進(jìn)程模型何為進(jìn)程?
何為線程?
瀏覽器有哪些進(jìn)程和線程?瀏覽器是一個多進(jìn)程多線程的應(yīng)用程序 瀏覽器右上角三個點(diǎn)那里的 每打開一個標(biāo)簽頁就會開啟一個渲染線程,嘗試多打開一個標(biāo)簽頁,任務(wù)管理器會多一個線程。
渲染主線程是如何工作的?渲染主線程是瀏覽器中最繁忙的的線程,需要它處理的任務(wù)包括但不限于:
為何只能有一個渲染主線程?比如正在執(zhí)行一個js函數(shù)去修改頁面,定時器的任務(wù)也到達(dá)了時間,那么應(yīng)該執(zhí)行哪個?同時執(zhí)行的話,修改了同一個地方如何選擇。 一個渲染進(jìn)程只能有一個渲染主進(jìn)程,使用消息隊(duì)列來調(diào)度任務(wù)
若干解釋何為異步?代碼執(zhí)行過程中,會遇到一些無法立即執(zhí)行的任務(wù),比如:
面試題:如何理解 JS 的異步?Js 是一門單線程的語言,這是因?yàn)樗\(yùn)行在瀏覽器的渲染主線程中,而渲染主線程只有一個。 js 為何會阻礙渲染?渲染主線程只有一個,js 的執(zhí)行與渲染都在主線程中,兩者無法同時執(zhí)行。react 的fiber 就是為了解決此問題 任務(wù)有優(yōu)先級嗎?任務(wù)沒有優(yōu)先級,消息隊(duì)列有優(yōu)先級,消息隊(duì)列會有多種,隨著瀏覽器的復(fù)雜度急劇提升,W3C 將不再使用宏隊(duì)列的說法 根據(jù) W3C 的最新解釋:
在目前 chrome 的實(shí)現(xiàn)中,至少包含了下面隊(duì)列, 微隊(duì)列 > 交互隊(duì)列 > 延時隊(duì)列
幾道題加深理解setTimeout(()=>{ console.log(1) // 交給計(jì)時線程,等待添加到延時隊(duì)列 },0) console.log(2) // 執(zhí)行完后執(zhí)行延時隊(duì)列中的任務(wù) 結(jié)果:輸入 2,1 function delay(duration){ var start = Date.now(); while (Date.now() - start < duration){} } setTimeout(()=>{ console.log(1) // 交給計(jì)時線程,等待添加到延時隊(duì)列 },0) delay(1000) // 阻塞主線程一秒
console.log(2) // 輸出 2,由于阻塞一秒后,計(jì)時線程已經(jīng)把任務(wù)計(jì)時完成加到延時隊(duì)列了,所以輸出 2 后立即輸出 1 結(jié)果:等待一秒后,同時輸出 2,1 setTimeout(()=>{ console.log(1) // 交給計(jì)時線程,等待添加到延時隊(duì)列 },0) Promise.resolve().then(()=>{ console.log(2) // 立即添加到微隊(duì)列,微隊(duì)列優(yōu)先級高于延時隊(duì)列 }) console.log(3) // 全局任務(wù) 結(jié)果:輸出 3,2,1 // 只是定義,還未執(zhí)行哈 function a(){ console.log(1) Promise.resolve().then(()=>{ console.log(2) }) } setTimeout(()=>{ console.log(3) Promise.resolve().then(a) },0) Promise.resolve().then(()=>{ console.log(4) // 立即添加到微隊(duì)列,微隊(duì)列優(yōu)先級高于延時隊(duì)列 }) console.log(5) // 全局 結(jié)果:5,4,3,1,2 總結(jié)什么是事件循環(huán)?
JS 中的計(jì)時器能做到精確計(jì)時嗎?不行,因?yàn)?/p>
結(jié)語:單線程是異步產(chǎn)生的原因,事件循環(huán)是異步的實(shí)現(xiàn)方式 該文章在 2023/8/28 9:28:08 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |