JavaScript精通到深入

幾天教大家從入門到精通，當然僅靠那一篇文章是不足以帶領大家精通JavaScript的，今天給大家帶來第二講！

BOM和DOM簡介

BOM，Browser Object Model ,瀏覽器對象模型。

BOM主要提供了訪問和操作瀏覽器各組件的方式。

瀏覽器組件：

window(瀏覽器窗口)

location(地址欄)

history(瀏覽歷史)

screen(顯示器屏幕)

navigator(瀏覽器軟件)

document(網頁)

DOM，Document Object Model，文檔對象模型。

DOM主要提供了訪問和操作HTML標記的方式。

HTML標記：

圖片標記

表格標記

表單標記

body、html標記

……

BOM和DOM不是JS的內容。它們是W3C制定的規范。但是，BOM和DOM在瀏覽器中以對象的形式得以實現。

換句話說：BOM和DOM都是由一組對象構成。

W3C是制作互聯網標準的一個國際化的組織，如：XHTML、CSS、JavaScript、AJAX等。

BOM對象結構圖

各對象之間是有層級關系的，那么各對象之間如何訪問呢？

window.document.write(“OK”)

window.document.body.bgColor = “#FF0000”;

window對象是所有其它對象的最頂層對象，因此，可以省略。

document.write(“OK”);

document.body.bgColor = “#FF0000”;

window.alert(“OK”); ——> alert(“OK”);

window.prompt(“請輸入一個分數”)； ——> prompt(“請輸入一個分數”);

Window對象屬性

name：指瀏覽器窗口的名字或框架的名字。這個名字是給<a>標記的target屬性來用的。

設置窗口的名字：window.name = “newWin”

獲取窗口的名字：document.write(name);

top：代表最頂層窗口。如：window.top

parent：代表父級窗口，主要用于框架。

self：代表當前窗口，主要用于框架中。

innerWidth：指瀏覽器窗口的內寬(不含菜單欄、工具欄、地址欄、狀態欄)，該屬性Firefox支持。

在IE下，使用 document.documentElement.clientWidth 來代替 window.innerWidth

innerHeight：指瀏覽器窗品的內高(不含菜單欄、工具欄、地址欄、狀態欄)，該屬性Firefox支持。

在IE下，使用 document.documentElement.clientHeight 來代替 window.innerHeight

document.documentElement就是<html>標記對象

document.body 就是 <body>標記對象

window對象方法

alert()：彈出一個警告對話框。

prompt()：彈出一個輸入對話框。

confirm()：彈出一個確認對話框。如果單擊“確定按鈕”返回true，如果單擊“取消”返回false。

close()：關閉窗口

print()：打印窗口

open()方法

功能：打開一個新的瀏覽器窗口。

語法：var winObj = window.open([url][,name][,options]);

說明：參數可有可無。如果沒有指定參數，則打開一個選項卡式的窗口(大小是最大大化)。

參數：

url：準備在新窗口中顯示哪個文件。url可以為空字符串，表示顯示一個空的頁面。

name：新窗口的名字，該名字給<a>標記的target屬性來用。

options：窗口的規格。

width：新窗口的寬度

height：新窗口的高度

left：新窗口距離屏幕左邊的距離

top：新窗口距離屏幕上邊的距離

menubar：是否顯示菜單欄，取值：yes、no

toolbar：是否顯示工具欄。

location：是否顯示地址欄。

status：是否顯示狀態欄。

scrollbars：是否顯示滾動條，不能省略s字母。

返回值：返回一個window對象的變量，可以通過該名稱跟蹤該窗口。winObj具備window對象的所有屬性和方法。

onload事件：當網頁加載完成，指<body>標記的所有內容全部加載完成，才觸發該事件(條件)。通過onload事件屬性，去調用JS的函數。onload屬性只有<body>標記才有。

onclick事件：當單擊時，去調用JS代碼。所有HTML標記都具有該事件屬性。

延時器方法——setTimeout()

setTimeout()

功能：設置一個延時器，換句話說：時間一到，就執行JS代碼一次。

語法：var timer = window.setTimeout(code,millisec)

參數：

code：是任何合法的JS代碼，一般情況下是JS函數。該函數要放在引號中。

舉例：window.setTimeout(“close()” , 2000)

舉例：window.setTimeout(init, 2000); //傳函數地址，因此不需要加括號。如果加括號，是將函數的執行結果傳到方法中。

millisec：毫秒值。1秒=1000毫秒

返回值：返回一個延時器的id變量，這個id變量給clearTimeout()用來清除。

clearTimeout()

功能：清除延時器id變量

語法：window.clearTimeout(timer)

參數：timer就是由setTimeout()設置的延時器的id變量。

實例：計數器

定時器方法

setInterval()

功能：設置一個定時器。定時器，重復不斷的執行JS代碼(周期性)。

語法： var timer = window.setInterval(code , millisec)

參數：

code：是任何合法的JS代碼，一般情況下是JS函數。該函數要放在引號中。

舉例：window.setInterval(“init()” , 2000)

舉例：window.setInterval(init, 2000); //傳函數地址，因此不需要加括號。如果加括號，是將函數的執行結果傳到方法中。

millisec：毫秒值。1秒=1000毫秒

返回值：返回一個定時器的id變量，這個id變量給clearInterval()用來清除。

clearInterval()

功能：清除定時器id變量

語法：window.clearInterval(timer)

參數：timer就是由setInterval()設置的定時器的id變量。

實例：圖片自動切換

screen屏幕對象

Width：屏幕的寬度，只讀屬性。

Height：屏幕的高度，只讀屬性。

availWidth：屏幕的有效寬度，不含任務欄。只讀屬性。

availHeight：屏幕的有效高度，不含任務欄。只讀屬性。

navigator對象

appName：瀏覽器軟件名稱，主要用來判斷客戶使用的是什么核心的瀏覽器。

如果是IE瀏覽器的話，返回值為：Microsoft Internet Explorer

如果是Firefox瀏覽器的話，返回值為：Netscape

appVersion：瀏覽器軟件的核心版本號。

systemLanguage：系統語言

userLanguage：用戶語言

platform：平臺

Location地址欄對象

href：獲取地址欄中完整的地址。可以實現JS的網頁跳轉。location.href = “http://www.sina.com.cn”;

host：主機名

hostname：主機名

pathname：文件路徑及文件名

search：查詢字符串。

protocol：協議，如：http://、ftp://

hash：錨點名稱。如：#top

reload([true])：刷新網頁。true參數表示強制刷新

注意：所有的屬性，重新賦值后，網頁將自動刷新。

<meta http-equiv = “refresh” content = “5;url=http://www.sina.com.cn” />

history對象

length：歷史記錄的個數

go(n)：同時可以實現“前進”和“后退。”

i.history.go(0) 刷新網頁

ii.history.go(-1) 后退

iii.history.go(1) 前進一步

iv.history.go(3) 前進三步

forward()：相當于瀏覽器的“前進”按鈕

back()：相當于瀏覽器的“后退”按鈕

下面我們來講DOM

DOM的官方定義

DOM ， Document Object Model ，文檔對象模型。我們可以把網頁中的所有“東西”看成是“對象”。

DOM是W3C制定的網頁標準或規則，而這個標準，在瀏覽器中，以“對象”的形式得以實現。

DOM的官方定義：DOM可以使腳本，動態的訪問或操作，網頁的內容、網頁外觀、網頁結構。

DOM的分類

核心DOM：提供了同時操作HTML文檔和XML文檔的公共的屬性和方法。

HTML DOM：針對HTML文檔提供的專用的屬性方法。

XML DOM：針對XML文檔提供的專用的屬性和方法。(就業班講)

CSS DOM：提供了操作CSS的屬性和方法。

Event DOM：事件對象模型。如：onclick、 onload等。

HTML節點樹

節點關系

根節點，一個HTML文檔只有一個根，它就是HTML節點。

子節點：某一個節點的下級節點。

父節點：某一個節點的上級節點。

兄弟節點：兩個子節點同屬于一個父節點。

DOM中節點類型

document文檔節點，代表整個網頁，不代表任何HTML標記。但它是html節點的父節點。

element元素節點，指任何HTML標記。每一個HTML標記就稱一個“元素節點”。它可以有文本節點和屬性節點。

attribute屬性節點。指HTML標記的屬性。

text節點。是節點樹的最底節點。

核心DOM中的公共的屬性和方法

提示：核心DOM中查找節點(標記)，都是從根節點開始的(html節點)。

1、節點訪問

nodeName：節點名稱。

nodeValue：節點的值。只有文本節點才有值，元素節點沒有值。nodeValue的值只能是“純文本”，不能含有任何的HTML標記或CSS屬性。

firstChild：第1個子節點。

lastChild：最后1個子節點。

childNodes：子節點列表，是一個數組。

parentNode：父節點。

查找<html>標記的方法

document.firstChild

document.documentElement

查找<body>標記的方法

document.firstChild.lastChild

document.body

為什么，document.body.firstChild找不到<table>節點？

核心DOM的屬性和方法，主要是針對HTML4.0開發的。

在Firefox下，會把空格或換行，當成文本節點。

HTML4.0是有沒有DTD類型定義的。

2、對節點的屬性操作

setAttribute(name,value)：給某個節點添加一個屬性。

getAttribute(name)：獲取某個節點屬性的值。

removeAttribute(name)：刪除某個節點的屬性。

3、節點的創建

document.createElement(tagName)：創建一個指定的HTML標記，一個節點

tagName：是指不帶尖括號的HTML標記名稱。

舉例：var imgObj = document.createElement(“img”)

parentNode.appendChild(childNode)：將創建的節點，追加到某個父節點下。

parentNode代表父節點，父節點必須存在。

childNode代表子節點。

舉例：document.body.appendChild(imgObj)

parentNode.removeChild(childNode)：刪除某個父節點下的子節點。

parentNode代表父節點。

childNode代表要刪除的子節點。

舉例：document.body.removeChild(imgObj)

綜合實例：隨機顯示小星星

<script type="text/javascript">

//實例：隨機顯示小星星

(1)網頁背景色為黑色

(2)創建圖片節點，追加到<body>父節點

(3)圖片隨機大小

(4)圖片隨機定位坐標(x,y)

(5)定時器

(6)網頁加載完成，開始星星

(7)星星顯示的范圍，跟窗口的寬高一樣。(0,window.innerWidth)

(8)點擊星星，星星消失

//網頁加載完成

window.onload = function(){

//更改網頁背景色

document.body.bgColor = "#000";

//定時器：1秒鐘，顯示一個星星

window.setInterval("star()",1000);

}

//動畫主函數

function star()

{

//創建圖片節點

var imgObj = document.createElement("img");

//添加src屬性

imgObj.setAttribute("src","images/xingxing.gif");

//添加width屬性。getRandom()隨機數函數

var width = getRandom(15,85);

imgObj.setAttribute("width",width);

//添加style屬性(行內樣式)。

var x = getRandom(0,window.innerWidth);

var y = getRandom(0,window.innerHeight);

imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");

//添加onclick事件屬性

//this代表當前對象，this是一個對象。

//this是系統關鍵字。this只能在函數內使用。

imgObj.setAttribute("onclick","removeImg(this)");

//將圖片節點，掛載到<body>父節點下

document.body.appendChild(imgObj);

}

//函數：求隨機數函數

function getRandom(min,max)

{

//隨機數

var random = Math.random()*(max-min)+min;

//向下取整

random = Math.floor(random);

//返回結果

return random;

}

//函數：刪除節點

function removeImg(obj)

{

document.body.removeChild(obj);

}

</script>

</head>

<body>

</body>

HTML DOM簡介和新特性

1、簡介

核心DOM中，提供的屬性和方法，已經可以操作網頁了。為什么還要有HTMLDOM呢？

如果在核心DOM中，網頁中節點層級很深時，訪問這個節點時將十分麻煩。

那么，HTMLDOM中就提供了通過id直接找節點的方法，而不用再HTML根節點開始。

2、HTMLDOM的新特性

每一個HTML標記，都對應一個元素對象。如：<img>對應一個圖片對象

每一個HTML標記的屬性，與對應的元素對象的屬性，一一對應。

HTML DOM訪問HTML元素的方法(最常用)

1、getElementById()

功能：查找網頁中指定id的元素對象。

語法：var obj = document.getElementById(id)

參數：id是指網頁中標記的id屬性的值。

返回值：返回一個元素對象。

舉例：var imgObj = document.getElementById(“img01”)

2、getElementsByTagName(tagName)

功能：查找指定的HTML標記，返回一個數組。

語法：var arrObj = parentNode.getElementsByTagName(tagName)

參數：tagName是要查找的標記名稱，不帶尖括號。

返回值：返回一個數組。如果只有一個節點，也返回一個數組。

舉例：var arrObj = ulObj.getElementsByTagName(“li”)

元素對象的屬性

tagName：標簽名稱，與核心DOM中nodeName一樣。

className：CSS類的樣式。

id：同HTML標記id屬性一樣。

title：同HTML標記的title屬性一樣。

style：同HTML標記的style屬性一樣。

innerHTML：包含HTML標記中的所有的內容，包括HTML標記等。

以上元素對象屬性的應用，詳細看文件。

offsetWidth：元素對象的可見寬度，不帶px單位。

offsetHeight：元素對象的可見高度，不帶px單位。

scrollWidth：元素對象的總寬度，包括滾動條中的內容，不帶px單位。

scrollHeight：元素對象的總高度，包括滾動條中的內容，不帶px單位。

scrollTop：指內容向上滾動上去了多少距離(有滾動條時才有效)，默認值為0

scrollLeft：指內容向左滾動過去了多少距離(有滾動條時才有效)。

onscroll：當拖動滾動條時，調用JS函數。

綜合案例：書訊快遞

oochow Instruments 發布 Delay Lab 是一款適用于 Korg drumlogue 鼓機的全新免費用戶延遲插件。據開發者稱，drumlogue 已具備延時功能，但無法產生明顯的合唱或鑲邊效果。因此，Boochow Instruments 決定開發一款專為合唱和鑲邊效果而設計的插件。

Boochow Instruments 是一款立體聲延時器，提供正、負和交叉反饋選項。此外，它還配備了一個 LFO，用于調節延遲時間。此外，它還內置了濾波器，可對延遲特性進行微調。

開發者稱，它可用于制作各種基于延遲的效果，包括節奏延遲、鑲邊和合唱效果。

Boochow Instruments Delay Lab 現提供免費下載。它只能在 Korg drumlogue 上運行，采用第二代 SDK 邏輯引擎。

Boochow Instruments 官網：https://synthanatomy.com/2023/10/boochow-instruments-delay-lab-free-delay-plugin-for-korg-drumlogue.html

youtobe視頻鏈接：https://youtu.be/tXW_degI5GM

Boochow Instruments 發布 Delay Lab 適用于Korg drumlogue 免費鼓機延遲插件

https://www.audioapp.cn/bbs/thread-221990-1-1.html

(出處: 音頻應用)

前言

作為一個前端工程師，瀏覽器是我們密不可分的朋友，想要深耕前端，就必須和瀏覽器“交心”。

為什么你覺得偶爾看瀏覽器的工作原理，但總是忘呢?，因為你沒有形成一個完整的知識網絡，你的記憶是碎片化的。正如人的神經網絡，只有當你的記憶相互依賴，相互鏈接，才能形成長期穩定的記憶。

所以本文我將用一條知識線將瀏覽器工作原理的知識串聯起來，因為本文的目的是為了幫助大家建立瀏覽器基礎的思維樹，所以很多細節點不做過多闡述，先有了樹，后面你在上面伸展枝葉就會發現清晰明了很多。歡迎點贊支持或評論指正。

一、了解進程、線程

進程：計算機正在運行的一個程序的實例。每個進程都有自己的內存空間、系統資源（如文件描述符、I/O 等），以及一個或多個線程（執行指令的基本單位）；

線程：線程是進程中的執行單元，是操作系統調度的最小單位。在一個進程中可以有多個線程，它們共享進程的資源，但擁有各自的執行流。線程是進程的一部分，同一個進程中的多個線程可以并發執行，共享進程的地址空間和系統資源。

通俗的說，比如瀏覽器是一座工廠，進程就是工廠里的不同車間，線程是車間里的流水線，它是是工廠中的實際運作單位。

你需要了解：

進程具有獨立性，所有進程互相隔離，獨立運行。一個進程崩潰不會影響其他進程。進程與進程之間的通信，是通過進程間通信（Inter-Process Communication，簡稱IPC）來進行數據交換和協作的。
一個進程包含多個線程，每個線程并行執行不同的任務。其中一個線程崩潰了，那么整個進程也就崩潰了。線程之間可以相互通信。

并行和并發

關于并行和并發的概念一定要清晰，因為很多問題的根源或者性能優化方案都是依靠并行或并發的。

并發是指多個任務在同一時間段內交替執行，從外部看似乎是同時執行的
并行是指多個任務在同一時刻同時執行

關于進程通信（IPC）

進程間通信方式有以下七種：

管道（Pipe）： 管道是一種半雙工的通信方式，它在父進程和子進程之間創建一個共享的文件描述符，通過文件描述符進行通信。管道可以分為匿名管道和命名管道。
消息隊列（Message Queue）： 消息隊列是一種進程間通信的機制，進程通過發送消息到隊列，其他進程可以從隊列中接收消息。消息隊列提供了一種異步的通信方式。
共享內存（Shared Memory）： 共享內存允許多個進程訪問同一塊物理內存區域，進程可以直接讀寫共享內存中的數據。共享內存是一種高效的 IPC 方式，但需要額外的同步機制來確保數據的一致性。
信號量（Semaphore）： 信號量是一種用于進程同步的機制，它可以用來控制對共享資源的訪問。信號量可以用于解決臨界區問題，確保多個進程按照一定順序訪問共享資源。
套接字（Socket）： 套接字是一種網絡編程中常用的通信方式，它可以在同一臺主機上的不同進程間進行通信，也可以在網絡上的不同主機上的進程間進行通信。
文件映射（File Mapping）： 文件映射允許多個進程共享同一文件的內存映射區域，可以通過對這個內存區域的讀寫來進行進程間通信。
信號（Signal）： 信號是一種軟件中斷，用于通知進程發生了某個事件。進程可以通過注冊信號處理函數來捕獲和處理信號。

根據交換信息量的多少和效率的高低，分為低級通信和高級通信。以上共享內存、管道、消息隊列、套接字屬于高級通信。

這里簡單說下Chrome的 IPC 通信機制。它的渲染器進程通信由 Mojo 實現（以前是使用Chromium IPC），Mojo 是源于 Chrome 的 IPC 跨平臺框架，它誕生于 chromium ，用來實現 chromium 進程內/進程間的通信。目前，它也被用于 ChromeOS。

想了解 Mojo的，可以看下 Mojo 設計者寫的文檔：Mojo介紹

線程安全

上面我提到了，線程會共享進程的地址空間和系統資源。所以這些擁有共享數據的多條線程處理并發式任務時，由于多個線程操作同一資源，操作時間并未錯開，而使得內存中的操作重復，從而數據錯亂，造成線程安全問題。具體線程安全的原因可以總結為以下5點：

搶占式執行：多線程的調度是隨機的，萬惡之源；
多線程修改同一個變量：這個很好理解，就是多個線程同時修改一個變量，就會出現問題，這里就不舉例了；
操作是原子的：簡單來說就是每個線程的指令都是獨立的，所以修改同一變量時才會出問題，對此問題，我們可以把相同操作的所有指令封裝到一起；
指令重排序：編譯器可能會改變兩個操作的先后順序，處理器也可能不會按照目標代碼的順序執行。內核這樣的操作其實是對內存訪問有序操作的一種優化，可以在不影響單線程程序正確的情況下提升程序的性能，但是同時就會可能影響代碼執行的正確性，導致線程安全問題；
內存可見性問題：當多個線程訪問同一個變量時，一個線程修改了這個變量的值，其他線程應該能夠立即看得到修改后的值，但是在多線程環境下，一個線程對共享變量的操作對其他線程是不可見的，所以無法立即同步數據。

總結來講，就是線程并發或者內核優化機制導致的線程安全問題。那怎么解決線程安全問題呢？一般有以下幾種思路：

鎖機制、互斥量、信號量： 這些都是同步控制的機制，通過對關鍵區域的加鎖，確保在同一時刻只有一個線程能夠訪問共享資源。加鎖是非常常見的解決線程安全的手段；
線程安全的數據結構： 使用線程安全的數據結構可以減少對共享數據的直接訪問，從而減小同步的壓力。
Web Workers： 在一些需要并行計算的場景下，使用 Web Workers 可以將任務分發到獨立的線程中執行，減少對主線程的競爭。
事件驅動： 使用事件驅動的編程模型，通過發布和訂閱事件來進行通信，可以降低對共享狀態的依賴。
Atomic操作： 使用原子操作，確保某些操作在執行時是不可中斷的，避免了在多線程環境下的競爭問題。

二、瀏覽器有哪些進程？

現在的瀏覽器基本都是采用多進程架構設計，即一個標簽頁（也就是一個網頁）會啟用多個進程，一般至少有如下四個進程：

瀏覽器進程：整個瀏覽器的主進程，負責協調、控制其他進程；
渲染進程（也可以叫內核進程）：負責渲染頁面內容的進程；
網絡進程：負責處理網絡請求，每個標簽頁都共享同一個網絡進程，以減少資源占用。
GPU進程：負責處理瀏覽器中與圖形相關的任務，，例如加速頁面繪制、處理 CSS 動畫、執行 WebGL 操作等。GPU 進程與渲染進程分離，以提高性能。

除此以外，還可能開辟插件進程，如果頁面使用了插件（例如 Flash、Java 等），則會有對應的插件進程。

渲染進程（也叫內核進程，因為瀏覽器內核、js引擎就是在渲染進程中工作的）和網絡進程是我們前端程序員最需要關注的兩個進程，下面我們就分別說說這兩個進程究竟干了些什么？

三、渲染進程有哪些線程？

五大類線程

渲染進程共有以下5類線程：

注意是5類線程，不是5個線程，例如GUI渲染線程就有渲染主線程、布局線程、合成器線程、柵格線程等；

GUI渲染線程：負責渲染網頁，具體見下一章，當頁面觸發重繪、回流時該線程也會執行；

注意：GUI渲染線程和JS引擎線程是互斥的（因為GUI 渲染線程和 JavaScript 引擎線程都需要訪問和操作 DOM，所以做了線程安全的處理），當JS引擎執行時GUI線程會被掛起，GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行。這也就是為什么js文件會阻塞頁面加載，一般最好放在html底部引入的原因。

JS引擎線程：該線程是使用js引擎處理Javascript腳本程序，解析Javascript腳本，運行代碼；
事件觸發線程：負責處理用戶輸入和觸發相應的事件（例如，點擊按鈕時，事件觸發線程會負責處理這個點擊事件）。它管理一個事件隊列，當對應的事件被觸發時，事件觸發線程會把該事件添加到事件隊列的隊尾，等待JS引擎的處理；
定時器觸發線程：負責處理通過 setTimeout 和 setInterval 等方法設置的定時器，觸發相應的回調函數。
異步HTTP請求線程：XMLHttpRequest連接后，瀏覽器會新開一個線程請求，檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件，將回調函數放入事件隊列中，等待JS引擎空閑后執行；

為什么事件觸發、定時器觸發、異步異步HTTP請求都會有各自的線程處理呢？因為JS引擎是單線程的，這些異步任務會阻塞js的執行。所以要單獨開啟幾個線程和主線程并行執行。
這些處理異步操作的線程會把所有異步任務推到一個任務隊列里，等待 JS 引擎空閑時，再把他們添加到可執行棧中，開始執行（這里就又延伸到 Event Loop 的機制了）

渲染進程中的異步HTTP請求線程和網絡進程有何區別？

看到這里有同學就要問了，渲染進程中的異步HTTP請求線程負責處理異步 HTTP 請求，那瀏覽器的另一個進程-網絡進程是干嘛呢？兩個有什么區別？

渲染進程中的異步 HTTP 請求線程是專門用來處理 JavaScript 層面的異步網絡請求的，例如使用XMLHttpRequest 對象或 Fetch API。而網絡進程就比較全面了，它負責處理所有的網絡操作，包括頁面導航、處理主頁面的請求、子頁面的請求、資源加載等。

另外他們兩個是協同工作的，例如 JS 發起的異步網絡請求，要經歷：DNS 解析：-> 建立連接 -> 發送請求 -> 接收響應

當HTTP 異步請求線程處理 JS 代碼發起的請求時，DNS 解析和建立連接通常在網絡進程中執行，HTTP 異步請求線程則負責發送請求和接收響應。

四、事件循環機制Event Loop

上面我們說了事件循環機制基于 JS 線程是單線程的。雖然渲染進程有很多線程，但是JavaScript執行是在一個單一的線程中進行的。

以下是事件循環的過程：

主線程的任務是不斷地執行執行棧中的代碼。
當執行棧為空時，會檢查任務隊列中是否有待執行的任務。
如果有，將任務隊列中的回調函數添加到執行棧，繼續執行。

從上面渲染引擎的幾大線程角度來說，JS事件循環機制可以這么理解：

當 JS 引擎從上至下按順序執行代碼時，遇到異步任務，會交由其他幾個負責異步任務的線程去執行（事件觸發線程、定時器線程、異步Http請求線程）并將異步回調推到任務隊列里。

想要快速理解事件循環機制？了解以下這幾點就明白了，不明白你提刀來砍我

任務隊列有兩組，一個是宏任務隊列，一個是微任務隊列，定時器線程會把定時器回調推到宏任務隊列，其他異步任務都會被推到微任務隊列；
執行時是執行一個宏任務，然后執行這個宏任務里產生的所有微任務，然后再執行一個宏任務，再執行這個宏任務里產生的所有微任務，一直循環下去；
其實你可以這么理解，把定時器的回調內容不要當作異步代碼，只是被延遲執行的同步代碼。上一點就可以理解成執行完所有同步任務，執行所有產生的異步任務，然后再執行所有同步任務，再執行產生的所有異步任務；
最后超簡單的理解，你可以這么想，忽略宏任務里的setImmediate（node.js的函數，瀏覽器中不存在）、I/O 操作等，在瀏覽器中，宏任務其實只需要關注定時器、延時器。所以可以這么想：JS 從上向下執行，同步代碼執行完后，執行除了定時器以外的所有異步任務，然后執行一個定時器，再執行所有除了定時器以外的所有異步任務，一直往復下去...

五、網絡進程有哪些線程

網絡進程里我們需要知道以下線程：

DNS 解析線程（DNS Thread）： 負責進行 DNS 解析，將域名解析為 IP 地址。
SSL 線程（SSL Thread）： 處理 SSL/TLS 相關的加密和安全通信。
網絡請求線程（Network Thread）： 負責處理主要的網絡請求和響應，包括接收和發送數據。
IPC 線程（Inter-Process Communication Thread）： 負責進程間通信。

網絡進程的主要工作包括：

發起和處理網絡請求，包括 HTTP 請求、WebSocket 等。
執行 DNS 解析，將域名解析為 IP 地址。
建立和管理網絡連接。
處理安全通信，包括 SSL/TLS 加密。
處理緩存，包括 HTTP 緩存的讀取和寫入。
處理文件的讀取和寫入。
與其他進程（如瀏覽器進程）進行通信。

六、詳解渲染進程｜瀏覽器引擎工作原理

本章主要講解瀏覽器的兩個引擎：渲染引擎、js引擎的工作原理。包括渲染引擎的渲染過程、js引擎的工作原理、js引擎的垃圾回收機制、內存泄漏問題定位等

書接下回，點個關注敬請期待（更新后會在此處貼上鏈接）

七、詳解網絡進程｜Http協議

本章主要講解與網絡進程息息相關的網絡通信協議相關的知識，例如TCP/IP協議、TCP建立連接的過程、https加密機制、http首部字段等知識

書接下回，點個關注敬請期待（更新后會在此處貼上鏈接）

八、網頁加載超詳細全流程

從 URL 輸入到頁面展現到底發生了什么？這是一個老生常談的問題。我將會從網絡通信協議、進程協作、瀏覽器引擎工作流程等全方位講解這個過程。幫你真正理解網頁的加載過程，而不是浮于表面。

書接下回，點個關注敬請期待（更新后會在此處貼上鏈接）

說在最后

因為篇幅問題，本文先列出來整體的思維網絡，后面詳細的一些講解單獨抽離，作為系列文章以后更新，感興趣的可以點個關注，不要錯過～

先看后贊，養成習慣
收藏吃灰，不如學會
點個關注，不要迷路

作者：前端阿彬
鏈接：https://juejin.cn/post/7341983885726187559

在線咨詢

上一篇：深入了解EL表達式
下一篇：打造絲般順滑的 H5 翻頁庫

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript精通到深入

前言

一、了解進程、線程

并行和并發

關于進程通信（IPC）

線程安全

二、瀏覽器有哪些進程？

三、渲染進程有哪些線程？

五大類線程

渲染進程中的異步HTTP請求線程和網絡進程有何區別？

四、事件循環機制Event Loop

五、網絡進程有哪些線程

六、詳解渲染進程｜瀏覽器引擎工作原理

七、詳解網絡進程｜Http協議

八、網頁加載超詳細全流程

說在最后

您的項目需求

一、了解進程、線程

二、瀏覽器有哪些進程？

三、渲染進程有哪些線程？

渲染進程中的異步HTTP請求線程和網絡進程有何區別？

四、事件循環機制Event Loop

五、網絡進程有哪些線程

六、詳解渲染進程｜瀏覽器引擎工作原理

七、詳解網絡進程｜Http協議

八、網頁加載超詳細全流程