SS是如何運行的？他到底是怎么工作的，如何從CSS應用到DOM，今天和大家分享下！

為什么學習

CSS到底是怎么工作的？

當設備一個文件的時候，必須符合文件的內容文件的樣式信息，下面我們會處理它的標準文件的樣式信息，是，下面的步驟是加載網頁的需要瀏覽的版本，展示它的版本。瀏覽器并且在處理文件的時候會有不同的方式，但是下面的步驟基本都會出現。

1. 瀏覽器載入HTML文件（比如從網絡上獲取）。
2. 將HTML文件轉換成一個DOM（Document Object Model），DOM是文件在計算機內存中的表現形式，下一節將詳細解釋DOM。
3. 會拉取該播放的資源，包含HTML和CSS相關的樣式。播放JavaScript圖片的播放器，然后在此進行處理，簡單的同時對如何處理這個節JavaScript不會展開敘述。
4. 瀏覽器拉取到CSS之后會進行解析，根據選擇器的不同類型（如element、class、id等）把它們分到不同的“桶”中。瀏覽器根據它找到不同的選擇器，將中間的不同規則（基于選擇器的規則，如元素器、類選擇器、id器等）應用在DOM的節點中，并添加不同依賴的樣式（這個步驟稱為渲染樹）。
5. 之前的結構進行了預測，之后渲染樹應該會出現。
6. 網頁展示在屏幕上（這一步被稱為著色）。

結合下面的圖示更形象：

關于DOM

一個DOM有一個樹形文字結構，標注語言中的每個元素、屬性以及每一段都著結構樹中的節點（Node/DOM或DOM node）。節點由一個節點本身和其他DOM節點的關系定義，有些有父節點，有些節點有兄弟節點（同級）。

對于DOM的理解操作會幫助你設計、調試和維護你的CSS，因為DOM是你的CSS樣式和文件內容的部分。當你瀏覽器F12調試的時候你需要DOM以查看使用了哪些規則。

一個真實的DOM案例

很長且枯燥的案例，這里我們通過一個HTML片段來了解HTML如何轉換成DOM

下面列HTML代碼：當前

在這個 DOM 中，<p>元素的節點是父節點，它的子節點是一個文本節點和三個節點節點<span>的節點節點，SPAN同時也是他們的文本節點的父節點。

上圖就是瀏覽器怎么解析之前的那個HTML片段——它生成上圖的DOM樹形結構，然后按照輸出到瀏覽器：

應用CSS到DOM

讓我們看看添加一些CSS到文件里渲染，同樣的HTML代碼：

下面為CSS代碼：

瀏覽器會解析HTML并創建一個DOM，然后解析CSS。可以看到唯一的選擇器就是span元素選擇器，瀏覽器處理規則會非常快！把同樣的規則用在三個<span>標簽上，然后直接渲染出圖像到屏幕上。

現在的顯示如下：

當瀏覽器遇到無法解析的CSS代碼會發生什么

在的文章中提到了并不會實現所有的瀏覽器，很多人也不會實現最新的瀏覽器的文章，因此我們可以同時使用 CSS 持續不斷地開發之前的領先瀏覽器，你可能會宣布奇怪的選擇器遇到無法解析的 CSS 器或何時會發生瀏覽？

答案就是瀏覽器什么也不會做，繼續解析下一個CSS樣式！

如果這些瀏覽器在解析你所寫的 CSS 規則制定的過程中遇到了無法理解的屬性或值，它會顯示并繼續解析 CSS 聲明。或者當瀏覽器遇到它很新的時候還沒有支持的 CSS 代碼的時候上面的情況同樣會發生（觸發）。

類似的，當遇到無法解析選擇器的時間時，他會直接啟動整個選擇器規則，解析下一個 CSS 選擇器。

下面的案例中，我使用會導致錯誤的英式拼寫來寫“顏色”，所以我的屬性的段落沒有被渲染成藍色，而執行其他的CSS代碼會正常，只有錯誤的部分會被觸發。

瀏覽器瀏覽中多，代表著你使用最新的 CSS 優化過程中的一個無法解析的規則也不會報錯。當你瀏覽多個 CSS 樣式的時候，會加載樣式表中指定的元素最后的 CSS 代碼進行渲染多個樣式表，上級請同一個指定的樣式表，正因為這樣，你來解決一些瀏覽器等瀏覽器也不能為新特性的問題（比如指定兩個 CSS 樣式）個width）。

這個特點在你想的一個很新的 CSS 特性，但不是所有的瀏覽器都支持使用的時候（瀏覽器）非常有用，更有意義，一些老的瀏覽器不接受calc()（計算一下，CSS3 新增，作為元素動態寬度、長度等，注意指定這里的動態是計算的一個值）。就這樣；新式的瀏覽器指定并把一個行解析成圖片，覆蓋第一行的豐富內容。

后面的課程我們會討論更多關于瀏覽器的連接問題。

最后

恭喜你完成本模塊，下面的文章你用你的新知識來完成覆蓋樣式的案例，在這個過程中測試一些 CSS 樣式。

介

理解JavaScript運行原理，我們需要理解以下兩方面內容。

• JavaScript引擎。
• JavaScript運行時環境。

什么是JavaScript引擎

JavaScript引擎是一個計算機程序，它的主要作用是JavaScript運行時將源碼編譯為機器碼。

每個主流Web瀏覽器都有自己的JavaScript引擎，它通常由web瀏覽器供應商開發。

• Google Chrome V8。
• Mozilla Firefox Spider Monkey。
• Safari Javascript Core Webkit。
• Edge (Internet Explorer)

以前的JavaScript引擎主要在web瀏覽器使用，不過隨著nodejs的出現就打破了這種局限。

V8引擎

V8包含了解析器（parser），解釋器（Ignition），優化編譯器（TurboFan ）。

解析器（parser）：用于生成抽象語法樹。

解釋器（Ignition）：將源碼轉換為字節碼。

優化編譯器（TurboFan ）：進行一些優化編譯優化處理，比如內聯緩存。

下面是V8引擎的大體工作流程。

1. 首先解析器先生成一個抽象語法樹。
2. 然后解釋器根據語法樹生成V8格式的字節碼。
3. 優化編譯器再將字節碼編譯成機器碼。

運行時環境

瀏覽器運行環境中，瀏覽器提供了Web API，如：HTTP請求，計時器，事件等。

服務器運行環境中，nodejs提供了API。

下面是JavaScript在瀏覽器中運行時的架構，它包含一個內存堆、一個內存棧、一個事件循環、一個回調隊列。

• 內存棧（stack），一個連續的內存區域，為每個執行的函數分配本地上下文。
• 內存堆（ heap）， 一個更大的內存區域，存儲動態分配的所有內容。
• 調用棧（call stack）， 一種數據結構，記錄了我們在程序中的位置。
• 回調隊列（callback queue），存儲異步任務的回調函數。
• 事件循環（event loop），持續檢查調用棧是否為空，如果為空，將回調隊列中頭部回調函數移動到調用棧執行。

運行時的調用棧

下面代碼展示了JavaScript執行的調用棧變化。

function add(x, y) {
    return x + y;
}

function print(x, y) {
    console.log('x+y=',add(x, y))
}

print(1, 3)

異步任務

JavaScript先執行了print函數，然后調用Web API setTimeout()，Web API存儲了setTimeout() 的回調函數，3秒后將回調函數添加到回調隊列，事件循環發現調用棧為空，于是將隊列里的回調函數移至調用棧執行。

function add(x, y) {
    return x + y;
}

function print(x, y) {
    setTimeout(function (){
        console.log('x+y=',add(x, y))
    }, 3000)
}

print(1, 3)

小結

JavaScript運行主要依靠JavaScript引擎和運行環境，引擎將js源碼翻譯成計算機所理解的機器碼，運行環境提供了一些與計算機底層通訊的API和運行實現。

者：Lydia Hallie
譯者：前端小智
來源：dev

JavaScript 很酷，但是 JS 引擎是如何才能理解我們編寫的代碼呢?作為 JS 開發人員，我們通常不需要自己處理編譯器。然而，了解 JS 引擎的基礎知識并了解它如何處理JS代碼，并將其轉換成機器能夠理解的東西，絕對是個有益無害的事情。

注意:本文主要基于 Node.js 和基于 Chrome 的瀏覽器使用的 V8 引擎。

HTML解析器遇到帶有源代碼的script標簽。來自此源的代碼從網絡，緩存或已安裝的服務工作程序中加載。響應是將請求的腳本作為字節流，由字節流解碼器負責。字節流解碼器在下載字節流時對其進行解碼。

字節流解碼器從已解碼的字節流中創建令牌。例如，0066解碼為f, 0075到u,006e到n, 0063到c, 0074到t, 0069到i, 006f到o, 006e到n，后面跟一個空格。就像JS中的function，這是 JS 中的一個保留關鍵字，它會創建一個標記，并將其發送給解析器。對于字節流的其余部分也是如此。

該引擎使用兩個解析器:預解析器(pre-parser)和解析器(parser)。預解析器只提前檢查標記，以查看是否有語法錯誤。這可以減少發現代碼中的錯誤所需的時間，否則解析器稍后就會發現這些錯誤。

如果沒有錯誤，解析器將根據從字節流解碼器接收到的標記創建節點。使用這些節點，它創建了一個抽象語法樹，即AST。

接下來，輪到解釋器(interpreter)了。遍歷AST并根據AST包含的信息生成字節碼的解釋器。一旦字節碼完全生成，AST就會被刪除，從而清除內存空間。最后，生成的機器碼就可以在電腦上運行了。

雖然字節碼很快，但它可以更快。當這個字節碼運行時，將生成信息。它可以檢測某些行為是否經常發生，以及所使用數據的類型。也許已經調用一個函數幾十次了:現在是時候優化它了，這樣它會運行得更快!

字節碼與生成的類型反饋一起發送到優化編譯器(ptimizing compiler)。優化的編譯器接收字節碼和類型反饋，并根據這些信息生成高度優化的機器碼。

JS 是一種動態類型語言，這意味著數據類型可以不斷變化。如果 JS引擎每次都要檢查某個值的數據類型，那么速度會非常慢。

相反，JS 引擎使用一種稱為內聯緩存(inline caching)的技術。它將代碼緩存在內存中，希望將來它會以相同的行為返回相同的值.假設某個函數被調用100次，并且到目前為止總是返回相同的值。它將假設在第101次調用它時也會返回這個值。

假設我們有以下函數sum，（到目前為止）每次都使用數值作為參數來調用它：

ffunction sum(a, b){
  return a + b
}
sum(1, 2

執行結果為 3。下次調用它時，它將假定我們再次使用兩個相同數字對其進行調用。

如果假投，那么就不需要動態查找，只需要使用存儲在特定內存槽中的結果，該槽已經有一個引用。否則，如果假設不正確，它將反優化代碼并恢復到原始字節碼，而不是優化后的機器碼。

例如，下一次調用它時，我們傳遞的是字符串而不是數字。因為 JS 是動態類型的，所以這樣做不會有任何錯誤。

function sum(a, b){
  return a + b
}
sum('1', 2)

這意味著數字2將被強制轉換成字符串，而函數將返回字符串'12'。它返回執行解釋的字節碼并更新類型反饋。

我希望這篇文章對你有用!當然，在這篇文章中還沒有涉及到引擎的更多部分(JS堆，調用堆棧，等等)，后續會繼續分享。如果你對 JS 的內部機制感興趣，強烈建議自己可以做一些研究，V8 是開源的，并且有一些很棒的文檔說明它是如何工作的。

https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf