深度帖:瀏覽器的事件循環與JS異步

一、瀏覽器進程?

早期的瀏覽器是單進程的,所有功能雜糅在一個進程中;現在的瀏覽器是多進程的,包含瀏覽器進程、網絡進程、渲染進程等等,每個進程負責的工作不同。

  • 瀏覽器進程:負責界面顯示(地址欄、書簽、歷史記錄)、窗口管理、標簽頁的創建和銷毀、用戶交互。
  • 網絡進程:負責加載網絡資源,HTTP請求等。
  • 渲染進程:負責執行HMTL、CSS、JS代碼。每一個頁面都會有一個或多個獨立的渲染進程。

#瀏覽器對象模型(Browser Object Module, BOM)交互主要依賴瀏覽器進程。文檔對象模型(Document Object Module ,DOM)主要依賴渲染進程。

還有一些其他的輔助進程,如GPU進程等。

在瀏覽器"自定義及控制"??"更多工具"??"任務管理器"查看瀏覽器進程情況:

二、渲染進程的渲染主線程和消息隊列

渲染主線程

前端工程師編寫的HTML格式文件代碼由渲染進程負責解析最終繪制在頁面上。

在這個過程中,渲染主線程是最繁忙的線程,其需要處理任務包括:

  • 解析HTML
  • 解析CSS
  • 計算樣式
  • 布局
  • 處理圖層
  • 每秒渲染頁面60次(60幀)
  • 執行全局JS代碼
  • 執行封裝成任務的事件處理和計時器回調函數等

渲染主線程的任務多、任務頻繁,其依賴消息隊列(message queue,或事件隊列)機制,先進先出原則調度任務。

任務源來自:1??渲染主線程正在執行的任務產生的新任務,如JS代碼運行產生的各種?2??其他線程向消息隊列遞交的新任務,如網絡請求、用戶交互等。

消息隊列的演變:宏/微任務隊列??多任務隊列

本章節關于事件循環中隊列和隊列優先級的內容。

瀏覽器的任務沒有優先級,但消息隊列有優先級。

傳統將消息隊列簡單分為宏任務隊列和微任務隊列。

但瀏覽器逐漸復雜,在最新W3C標準下,瀏覽器不再有宏隊列的說法,每個任務都有一個任務類型,在一次事件循環中,由瀏覽器自行決定哪一個隊列的任務(瀏覽器真實的使用環境是復雜多變的)。但瀏覽器必須包含一個微隊列,微隊列的任務一定具有最高優先級,必須優先調度。

在目前Chrome的實現中,與前端開發最相關的隊列,至少包含了以下幾個:

  • 延時隊列:用于存放計時器到時后的回調函數「中」。(setTimeOut、setInternel)
  • 交互隊列:用于存放用戶操作后產生的時間處理函數「高」。(addEventListener)
  • 微隊列:用于存放需要最快執行的任務,優先級「最高」。(Promise.then)

面經總結

Q:為什么JavaScript是異步的?

A:從渲染主線程、同步的劣勢和異步操作過程等角度回答。

  1. JS的運行環境JS是單線程的語言,這是因為它運行在瀏覽器渲染進程中的渲染主線程,渲染主線程只有一個。渲染主線程是瀏覽器線程里最繁忙的一個,承擔了許多工作,解析HTML、解析CSS、計算樣式、布局、處理圖層、每秒渲染頁面60次(60幀)、執行全局JS代碼、封裝成任務的事件處理和計時器回調函數(選幾個回答)等都在其中執行。
  2. 如果使用同步的方式,極有可能會造成渲染主線程的阻塞,從而導致消息隊列中的很多其他任務無法執行。這樣一方面會導致主線程阻塞等待白白消耗時間,另一方面導致頁面無法及時更新,給用戶造成頁面卡死現象。
  3. 所以瀏覽器采用異步的方式,具體做法是當某些任務發生時,比如計時器、網絡請求、事件監聽,主線程將任務分發交給其他線程去處理,自身立即結束該任務的執行,轉而執行后續代碼,當被轉發任務的線程完成時,將事先傳遞的回調函數包裝成任務加入到消息隊列的末尾排隊,等待主線程調度執行。在這種異步的模式下,瀏覽器用不阻塞,從而最大限度保證了單線程的流程運行。

Q:如何理解JavaScript中的事件循環?

A:事件循環也叫消息循環,是渲染主線程的工作方式。它幫助渲染主線程從不同優先級的隊列中循環調度任務執行。傳統將消息隊列簡單分為宏任務隊列和微任務隊列。但瀏覽器逐漸復雜,在最新W3C標準下,瀏覽器不再有宏隊列的說法,每個任務都有一個任務類型,在一次事件循環中,由瀏覽器自行決定哪一個隊列的任務(瀏覽器真實的使用環境是復雜多變的)。但瀏覽器必須包含一個微隊列,微隊列的任務一定具有最高優先級,必須優先調度。

練習題,閱讀代碼,寫出控制臺輸出字母順序:

1.

2.?

3.?

    答案:

    第一題:2 1

    第二題:3 2 1

    第三題:5 4 3 1 2

    本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
    如若轉載,請注明出處:http://www.pswp.cn/news/913748.shtml
    繁體地址,請注明出處:http://hk.pswp.cn/news/913748.shtml
    英文地址,請注明出處:http://en.pswp.cn/news/913748.shtml

    如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

    相關文章

    Linux網絡:UDP socket創建流程與簡單通信

    本文介紹 UDP 服務端與客戶端 的創建流程&#xff0c;和相關的函數接口 核心流程 創建 socket → socket()填寫服務器地址信息 → sockaddr_in 結構體綁定地址和端口 → bind()接收并響應客戶端數據 → recvfrom() / sendto()socket() #include<sys/so…

    windows內核研究(系統調用 1)

    WindowsAPI函數的調用過程什么是WindowsApi&#xff1f;Windows API&#xff08;Application Programming Interface&#xff0c;應用程序編程接口&#xff09;是微軟為Windows操作系統提供的一套系統級編程接口&#xff0c;允許開發者與操作系統內核、硬件、系統服務等進行交互…

    【前端】異步任務風控驗證與輪詢機制技術方案(通用筆記版)

    一、背景場景 在某類生成任務中&#xff0c;例如用戶點擊“執行任務”按鈕后觸發一個較耗時的后端操作&#xff08;如生成報告、渲染圖像、轉碼視頻等&#xff09;&#xff0c;由于其調用了模型、渲染服務或需要較長處理時間&#xff0c;為了防止接口被頻繁惡意調用&#xff0c…

    Vim 編輯器常用操作詳解(新手快速上手指南)

    &#x1f4bb; Vim 編輯器常用操作詳解&#xff08;新手快速上手指南&#xff09;作者&#xff1a;Lixin 日期&#xff1a;2025-07-09 學習內容&#xff1a;Vim 編輯器基礎 常用快捷鍵 Xshell/Xftp連接 Linux基本操作 學習目標&#xff1a;掌握 Vim 的三種常用模式切換與基本…

    OpenGL 生成深度圖與點云

    文章目錄 一、簡介二、實現代碼三、實現效果一、簡介 這里基于OpenGL實現對一個Mesh對象深度圖的獲取,思路其實很簡單,直接通過glReadPixels函數獲取整個OpenGL中的深度緩沖數據即可;那么反過來我們如果有了這個深度圖之后,也可以基于每個像素點的深度值,反算出圖像中的深…

    25春云曦期末考復現

    Web 瘋狂星期四 <?php$tg1u$_GET[tg1u];if(!preg_match("/0|1|[3-9]|\~|\|\|\#|\\$|\%|\^|\&|\*|\&#xff08;|\&#xff09;|\-|\|\|\{|\[|\]|\}|\:|\|\"|\,|\<|\.|\>|\/|\?|\\\\|localeconv|pos|current|print|var|dump|getallheaders|get|define…

    從Prompt到預訓練:掌握大模型核心技術的階梯式進化

    本文較長&#xff0c;建議點贊收藏&#xff0c;以免遺失。更多AI大模型應用開發學習視頻及資料&#xff0c;盡在聚客AI學院。 在探討大模型&#xff08;LLM&#xff09;的四階段技術時&#xff0c;我們可以從Prompt Engineering&#xff08;提示工程&#xff09;、AI Agent&…

    手機文件夾隱藏工具,一鍵保護隱私

    軟件介紹 今天為大家推薦一款手機文件夾隱藏工具——Amarok&#xff0c;它能幫助用戶快速隱藏手機中的私密文件夾&#xff0c;保護個人隱私。 核心功能 Amarok主打文件夾隱藏功能&#xff0c;操作簡單便捷。需要注意的是&#xff0c;雖然軟件支持應用隱藏功能&#xff0…

    day10-Redis面試篇

    經過前幾天的學習&#xff0c;大家已經掌握了微服務相關技術的實際應用&#xff0c;能夠應對企業開發的要求了。不過大家都知道在IT領域往往都是面試造火箭&#xff0c;實際工作擰螺絲。為了更好的應對面試&#xff0c;讓大家能拿到更高的offer&#xff0c;我們接下來就講講“造…

    Axure版本Element組件庫-免費版

    Axure版本的Element組件庫基于Element UI/Plus設計規范開發&#xff0c;涵蓋了從基礎元素到復雜交互的全品類組件&#xff0c;能高效支撐各類Web原型設計&#xff0c;尤其適合后臺管理系統、企業級應用等場景。以下從核心類別展開詳細介紹&#xff1a; 鏈接地址 添加圖片注釋&a…

    記一次JVM問題排查

    今天遇到了1次OOM&#xff0c;導入萬條數據的Excel于是讓運維進行排查。正式環境顯示內存還有很多 于是我說讓運維加上參數 -XX:HeapDumpOnOutOfMemoryError&#xff0c;出現OOM的時候dump到文件中&#xff0c;將堆內存設置為4G&#xff0c;在Idea上進行測試于是讓運維在生產環…

    快手Kwai Keye-VL多模態大模型模型架構、訓練策略、數據情況

    快速看一下Kwai Keye-VL的技術報告&#xff0c; 模型架構 Keye-VL和經典的MLLM架構類似&#xff0c;由ViTMLPLLM組成。視覺側有兩點可以看看&#xff1a; 1、具有原生分辨率的視覺編碼器 提到&#xff0c;MLLMs使用預訓練的固定分辨率ViT作為視覺編碼器。然而&#xff0c;這…

    前端-CSS-day2

    目錄 1、后代選擇器 2、子代選擇器 3、并集選擇器 4、交集選擇器 5、偽類選擇器 6、超鏈接偽類 7、CSS特性-繼承性 8、CSS特性-層疊性 9、CSS特性-優先級 10、優先級-疊加計算 11、Emmet寫法 12、背景圖 13、背景圖平鋪方式 14、背景圖位置 15、背景圖縮放 16、…

    米思齊2.0 3.0 mixly arduino 編程軟件下載安裝及詳情使用指南 導入庫文件方法 支持8266 esp32

    一、米思齊軟件下載及安裝 1、 米思齊軟件下載 https://item.taobao.com/item.htm?id883253312209 2、軟件版本簡單說明&#xff1a; a、 Windows版本&#xff08;建議win10及以上系統使用&#xff09;&#xff1a; 一鍵更新完整版 2.8GB-3GB&#xff1a;下載后解壓即可使…

    結構體指針:使用結構體指針訪問和修改結構體成員。

    知識點結構體指針Employee *p; 保存結構體的地址&#xff1b;p->member 用箭頭運算符訪問或修改成員。數組與指針Employee *emps malloc(N * sizeof *emps); 動態創建結構體數組&#xff1b;p < emps N 與 p 配合遍歷。scanf 與數組退化p->name 是 char name[50] 的…

    支持零樣本和少樣本的文本到語音48k star的配音工具:GPT-SoVITS-WebUI

    支持零樣本和少樣本的文本到語音48k star的配音工具&#xff1a;GPT-SoVITS-WebUI 官網&#xff1a;RVC-Boss/GPT-SoVITS: 1 min voice data can also be used to train a good TTS model! (few shot voice cloning) 用戶手冊&#xff1a;GPT-SoVITS指南 功能 零樣本文本到語…

    基于odoo17的設計模式詳解---備忘模式

    大家好&#xff0c;我是你的Odoo技術伙伴。在開發復雜的業務流程時&#xff0c;我們有時會遇到這樣的需求&#xff1a;在對一個對象進行一系列復雜操作之前&#xff0c;保存其當前狀態&#xff0c;以便在操作失敗或用戶希望撤銷時&#xff0c;能夠一鍵恢復到操作之前的樣子。或…

    基于Web門戶架構的監獄內網改版實踐:值班排班系統設計與信創適配探討

    面向監獄內網改版場景的門戶平臺技術架構與智能排班實踐關鍵詞&#xff1a;監獄內網改版、監獄內部網站改版、值班排班系統、信創適配、智能門戶架構一、場景背景與問題分析 在信創國產化、等級保護合規、政務集約化趨勢持續推進的背景下&#xff0c;傳統監獄內部網站普遍面臨如…

    二分查找篇——在排序數組中查找元素的第一個和最后一個位置【LeetCode】

    34. 在排序數組中查找元素的第一個和最后一個位置 一、算法邏輯&#xff08;逐步通順講解每一步思路&#xff09; 該算法用于在一個升序排列的數組 nums 中查找某個目標值 target 的第一個出現的位置和最后一個出現的位置。 ? 1?? 定義 lower_bound 函數 def lower_boun…

    【深度學習新浪潮】AI在材料力學領域的研究進展一覽

    一、材料力學的研究范疇 材料力學是固體力學的核心分支,聚焦于材料在載荷作用下的變形、失效規律及性能優化,其核心任務是揭示材料的強度、剛度和穩定性機制。具體研究內容包括: 基本力學行為:分析桿、梁、軸等結構在拉伸、壓縮、彎曲、扭轉等載荷下的應力分布與應變響應。…