瀏覽器相關原理(面試題)詳細總結二

1. 瀏覽器渲染過程是怎樣的？按照渲染的時間順序，流水線可分為如下幾個子階段：、`樣式計算佈局階段分層柵格化顯示`。 1. 渲染進程將 HTML 內容轉換為能夠讀懂DOM 樹結構。 2. 渲染引擎將 CSS 樣式表轉化為瀏覽器可以理解的styleSheets，計算出 DOM 節點的樣式。 ...

1. 瀏覽器渲染過程是怎樣的？

按照渲染的時間順序，流水線可分為如下幾個子階段：構建 DOM 樹、樣式計算、佈局階段、分層、柵格化和顯示。

渲染進程將 HTML 內容轉換為能夠讀懂DOM 樹結構。
渲染引擎將 CSS 樣式表轉化為瀏覽器可以理解的styleSheets，計算出 DOM 節點的樣式。
創建佈局樹，並計算元素的佈局信息。
對佈局樹進行分層，並生成分層樹。
為每個圖層生成繪製列表，並將其提交到合成線程。合成線程將圖層分圖塊，並柵格化將圖塊轉換成點陣圖。
合成線程發送繪製圖塊命令給瀏覽器進程。瀏覽器進程根據指令生成頁面，並顯示到顯示器上。

瀏覽器從網路或硬碟中獲得HTML位元組數據後會經過一個流程將位元組解析為DOM樹,先將HTML的原始位元組數據轉換為文件指定編碼的字元,然後瀏覽器會根據HTML規範來將字元串轉換成各種令牌標簽，如html、body等。最終解析成一個樹狀的對象模型，就是dom樹；

獲取css，獲取style標簽內的css、或者內嵌的css,或者當HTML代碼遇見標簽時，瀏覽器會發送請求獲得該標簽中標記的CSS，當渲染引擎接收到 CSS 文本時，會執行一個轉換操作，將 CSS 文本轉換為瀏覽器可以理解的styleSheets

創建佈局樹，遍歷 DOM 樹中的所有可見節點，並把這些節點加到佈局中；而不可見的節點會被佈局樹忽略掉，如 head 標簽下麵的全部內容，再比如 body.p.span 這個元素，因為它的屬性包含 dispaly:none，所以這個元素也沒有被包進佈局樹。最後計算 DOM 元素的佈局信息，使其都保存在佈局樹中。佈局完成過程中，如果有js操作或者其他操作，對元素的顏色，背景等作出改變就會引起重繪，如果有對元素的大小、定位等有改變則會引起迴流。

因為頁面中有很多複雜的效果，如一些複雜的 3D 變換、頁面滾動，或者使用 z-indexing 做 z 軸排序等，為了更加方便地實現這些效果，渲染引擎還需要為特定的節點生成專用的圖層，並生成一棵對應的圖層樹。

渲染引擎實現圖層的繪製，把一個圖層的繪製拆分成很多小的繪製指令然後再把這些指令按照順序組成一個待繪製列表，當圖層的繪製列表準備好之後，主線程會把該繪製列表提交給合成線程，合成線程會將圖層劃分為圖塊，然後按照視口附近的圖塊來優先生成點陣圖(實際生成點陣圖的操作是由柵格化來執行的。所謂柵格化，是指將圖塊轉換為點陣圖)

一旦所有圖塊都被光柵化，合成線程就會生成一個繪製圖塊的命令，然後將該命令提交給瀏覽器進程,瀏覽器最後進行顯示。

2.如何理解迴流和重繪？

迴流：當我們對 DOM 的修改引發了 DOM 幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時，瀏覽器需要重新計算元素的幾何屬性（其他元素的幾何屬性和位置也會因此受到影響），然後再將計算的結果繪製出來。這個過程就是迴流（也叫重排）。

重繪：當我們對 DOM 的修改導致了樣式的變化、卻並未影響其幾何屬性（比如修改了顏色或背景色）時，瀏覽器不需重新計算元素的幾何屬性、直接為該元素繪製新的樣式（跳過了上圖所示的迴流環節）。這個過程叫做重繪。由此我們可以看出，重繪不一定導致迴流，迴流一定會導致重繪。

常見的會導致迴流的元素：

常見的幾何屬性有 width、height、padding、margin、left、top、border 等等。
最容易被忽略的操作：獲取一些需要通過即時計算得到的屬性,當你要用到像這樣的屬性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 時，瀏覽器為了獲取這些值，也會進行迴流。
當我們調用了 getComputedStyle 方法，或者 IE 里的 currentStyle 時，也會觸發迴流。原理是一樣的，都為求一個“即時性”和“準確性”。

避免方式：

避免逐條改變樣式，使用類名去合併樣式
將 DOM “離線”,使用DocumentFragment
提升為合成層,如使用will-change

#divId {
  will-change: transform;
}

優點

合成層的點陣圖，會交由 GPU 合成，比 CPU 處理要快
當需要 repaint 時，只需要 repaint 本身，不會影響到其他的層
對於 transform 和 opacity 效果，不會觸發 layout 和 paint

註意：

部分瀏覽器緩存了一個 flush 隊列，把我們觸發的迴流與重繪任務都塞進去，待到隊列里的任務多起來、或者達到了一定的時間間隔，或者“不得已”的時候，再將這些任務一口氣出隊。但是當我們訪問一些即使屬性時，瀏覽器會為了獲得此時此刻的、最準確的屬性值，而提前將 flush 隊列的任務出隊。

3.渲染引擎什麼情況下才會為特定的節點創建新的圖層？

層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對於面向（電腦屏幕的）視窗或者網頁的用戶的z軸上延伸，HTML元素依據其自身屬性按照優先順序順序占用層疊上下文的空間。

擁有層疊上下文屬性的元素會被提升為單獨的一層。

擁有層疊上下文屬性：

根元素 (HTML),
z-index 值不為 "auto"的絕對/相對定位元素，
position,固定（fixed） / 沾滯（sticky）定位（沾滯定位適配所有移動設備上的瀏覽器，但老的桌面瀏覽器不支持）
z-index值不為 "auto"的 flex 子項 (flex item)，即：父元素 display: flex|inline-flex，
z-index值不為"auto"的grid子項，即：父元素display：grid
opacity 屬性值小於 1 的元素（參考 the specification for opacity），
transform 屬性值不為 "none"的元素，
mix-blend-mode 屬性值不為 "normal"的元素，
filter值不為"none"的元素，
perspective值不為"none"的元素，
clip-path值不為"none"的元素
mask / mask-image / mask-border不為"none"的元素
isolation 屬性被設置為 "isolate"的元素
在 will-change 中指定了任意CSS屬性（參考這篇文章）
-webkit-overflow-scrolling 屬性被設置 "touch"的元素
contain屬性值為"layout"，"paint"，或者綜合值比如"strict"，"content"

需要剪裁（clip）的地方也會被創建為圖層。

這裡的剪裁指的是，假如我們把 div 的大小限定為 200 * 200 像素，而 div 裡面的文字內容比較多，文字所顯示的區域肯定會超出 200 * 200 的面積，這時候就產生了剪裁，渲染引擎會把裁剪文字內容的一部分用於顯示在 div 區域。出現這種裁剪情況的時候，渲染引擎會為文字部分單獨創建一個層，如果出現滾動條，滾動條也會被提升為單獨的層。

4.JavaScript 是如何支持塊級作用域的？

塊級作用域就是通過詞法環境的棧結構來實現的，而變數提升是通過變數環境來實現，通過這兩者的結合，JavaScript 引擎也就同時支持了變數提升和塊級作用域了。

詞法環境跟函數上下文，都是通過棧結構實現的。函數內部通過 var 聲明的變數，在編譯階段全都被存放到變數環境(函數上下文)中，而通過let和const申明的變數會被追加到詞法環境中，當這個塊執行結束之後，追加到詞法作用域的內容又會銷毀掉。

舉個例子：

function foo() {
    var test = 1
    let myname= 'LuckyWinty'
    {
        console.log(myname) 
        let myname= 'winty'
    }
    console.log(test,'---',myname) 
}
foo()
//思考一下會輸出什麼？

執行到第一個console.log前的執行上下文是這樣的：

GitHub

從圖中看，第一個console.log理論上應該輸出 undefined。但是語法規定了一個"暫時性死區(TDZ,當進入它的作用域，它不能被訪問（獲取或設置）直到執行到達聲明)"，也就是說雖然通過let聲明的變數已經在詞法環境中了，但是在沒有賦值之前，訪問該變數JavaScript引擎就會拋出一個錯誤。

因此，第一個console.log會拋錯，[Uncaught ReferenceError: Cannot access 'myname' before initialization]。拋錯則函數會中斷執行，為了能讓我們的代碼繼續分析，我們先加個 try-catch ,然後繼續分析：

function foo() {
    var test = 1
    let myname= 'LuckyWinty'
    try{
        {
            console.log(myname) 
            let myname= 'winty'
        }
    }catch(ex){
        console.error(ex)
    }
    console.log(test,'---',myname) 
}
foo()
//思考一下會輸出什麼？

執行到第二個console.log前的執行上下文是這樣的：

GitHub

此時，{}塊作用域中的內容已執行完畢，被銷毀掉了。第二個console.log會輸出1 "---" "LuckyWinty"。

5. JavaScript 中的數據是如何存儲在記憶體中的？

在 JavaScript 中，原始類型的賦值會完整複製變數值，而引用類型的賦值是複製引用地址。

在 JavaScript 的執行過程中，主要有三種類型記憶體空間，分別是代碼空間、棧空間、堆空間。
其中的代碼空間主要是存儲可執行代碼的，原始類型(Number、String、Null、Undefined、Boolean、Symbol、BigInt)的數據值都是直接保存在“棧”中的，引用類型(Object)的值是存放在“堆”中的。因此在棧空間中(執行上下文)，原始類型存儲的是變數的值，而引用類型存儲的是其在"堆空間"中的地址，當 JavaScript 需要訪問該數據的時候，是通過棧中的引用地址來訪問的，相當於多了一道轉手流程。

在編譯過程中，如果 JavaScript 引擎判斷到一個閉包，也會在堆空間創建換一個“closure(fn)”的對象（這是一個內部對象，JavaScript 是無法訪問的），用來保存閉包中的變數。所以閉包中的變數是存儲在“堆空間”中的。

JavaScript 引擎需要用棧來維護程式執行期間上下文的狀態，如果棧空間大了話，所有的數據都存放在棧空間裡面，那麼會影響到上下文切換的效率，進而又影響到整個程式的執行效率。通常情況下，棧空間都不會設置太大，主要用來存放一些原始類型的小數據。而引用類型的數據占用的空間都比較大，所以這一類數據會被存放到堆中，堆空間很大，能存放很多大的數據，不過缺點是分配記憶體和回收記憶體都會占用一定的時間。因此需要“棧”和“堆”兩種空間。