面試瀏覽器框架八股文十問十答第三期

作者：程序員小白條，個人博客

相信看了本文後，對你的面試是有一定幫助的！關注專欄後就能收到持續更新！

⭐點贊⭐收藏⭐不迷路！⭐

1）對瀏覽器內核的理解

瀏覽器內核是指瀏覽器用來解析網頁內容、渲染頁面以及執行 JavaScript 等任務的核心部分。它是瀏覽器的重要組成部分，直接影響着瀏覽器的性能、兼容性和功能特性。

瀏覽器內核通常包括兩個主要部分：

• 渲染引擎（Layout Engine）：也稱為排版引擎或呈現引擎，負責解析 HTML、CSS 等網頁內容，並將其轉換成可視化的頁面。渲染引擎會根據網頁的結構和樣式信息計算頁面佈局，並將最終的渲染結果呈現給用户。
• JavaScript 引擎：負責解析和執行 JavaScript 代碼，實現網頁的交互功能。JavaScript 引擎會將 JavaScript 代碼解釋成計算機能夠理解和執行的指令，從而實現網頁中的動態效果和交互行為。

2）常見的瀏覽器內核比較

常見的瀏覽器內核主要包括：

• Trident（IE 內核）：由微軟開發，主要用於 Internet Explorer 瀏覽器。在過去，Trident 是市場上最主流的瀏覽器內核之一，但隨着 IE 瀏覽器的逐漸退出，其影響力逐漸減弱。
• Gecko：由 Mozilla 開發，主要用於 Firefox 瀏覽器。Gecko 內核以其優秀的標準兼容性和強大的功能特性而聞名，被廣泛應用於 Firefox 瀏覽器和其他基於 Mozilla 技術的應用程序中。
• WebKit：由蘋果公司開發，最初用於 Safari 瀏覽器。後來，Google 基於 WebKit 開發了自己的渲染引擎 Blink（見下文），併成為了 Chrome 瀏覽器的內核。WebKit 以其高效的渲染性能和優秀的頁面加載速度而受到青睞。
• Blink：由 Google 開發，是基於 WebKit 的分支。Blink 內核繼承了 WebKit 的優秀特性，並且在性能優化和功能更新方面有着持續的改進。目前，Blink 內核被廣泛應用於 Google Chrome 瀏覽器、Opera 瀏覽器等多款主流瀏覽器中。

3）常見瀏覽器所用內核

一些常見的瀏覽器及其所用內核包括：

• Google Chrome：使用 Blink 渲染引擎。
• Mozilla Firefox：使用 Gecko 渲染引擎。
• Safari：在 macOS 和 iOS 上使用 WebKit 渲染引擎。
• Microsoft Edge：原先使用 Trident 內核，後來轉為使用 Chromium 內核，即 Blink 的一個分支。
• Internet Explorer：使用 Trident 渲染引擎。

4）瀏覽器的主要組成部分

瀏覽器是由多個組件組成的複雜軟件系統，其主要組成部分包括：

• 用户界面（User Interface）：包括地址欄、導航按鈕、書籤欄等用户可見的部分，用於與用户交互。
• 瀏覽器引擎（Browser Engine）：用於管理用户界面和渲染引擎之間的通信，對用户輸入進行解釋並將其轉發到渲染引擎。
• 渲染引擎（Rendering Engine）：負責解析 HTML、CSS 等頁面內容，計算頁面佈局，並將最終的渲染結果呈現給用户。
• 網絡（Networking）：用於處理網絡請求和響應，從服務器獲取網頁內容和資源。
• JavaScript 引擎（JavaScript Engine）：用於解析和執行 JavaScript 代碼，實現網頁的動態效果和交互行為。
• 數據存儲（Data Storage）：用於存儲瀏覽器的歷史記錄、Cookie、緩存等數據。
• 插件系統（Plug-in System）：允許用户安裝和使用第三方插件，擴展瀏覽器的功能。

5）瀏覽器的渲染過程

瀏覽器的渲染過程主要包括以下幾個步驟：

1. 解析 HTML：瀏覽器通過網絡獲取 HTML 文件，並開始解析其中的標籤和內容。
2. 構建 DOM 樹：解析 HTML 文件時，瀏覽器會將其中的標籤轉換成 DOM（Document Object Model）節點，並構建成一棵 DOM 樹，用於表示頁面的結構。
3. 解析 CSS：瀏覽器解析 HTML 文件的同時，還會解析其中的 CSS 樣式表，構建 CSSOM（CSS Object Model）樹，用於表示頁面的樣式。
4. 合併 DOM 和 CSSOM：瀏覽器將 DOM 樹和 CSSOM 樹合併成一棵渲染樹（Render Tree），其中只包含需要顯示的節點和其樣式信息。
5. 佈局計算（Layout）：根據渲染樹中每個節點的樣式和位置信息，瀏覽器開始計算頁面佈局，確定每個節點在頁面中的精確位置和大小。
6. 繪製（Painting）：根據佈局計算得到的結果，瀏覽器將渲染樹中的每個節點轉換成實際的像素，並將其繪製在屏幕上，形成最終的渲染結果。
7. 重繪和重排（Repaint & Reflow）：當頁面的樣式發生變化或者用户交互引起頁面結構變化時，瀏覽器需要重新計算頁面佈局（重排）和重新繪製頁面內容（重繪），以更新頁面的顯示。

6）瀏覽器渲染優化

瀏覽器渲染性能的優化是提高用户體驗的關鍵之一，常見的優化方法包括：

• 合理使用 CSS 和 JavaScript：減少不必要的 CSS 樣式和 JavaScript 代碼，優化頁面加載速度和渲染性能。
• 減少重排和重繪：避免頻繁地修改頁面樣式和結構，儘量將修改操作集中在一起執行，以減少瀏覽器重新計算佈局和重新繪製頁面的次數。
• 圖片優化：使用合適的圖片格式和壓縮算法，減小圖片文件的大小，加快圖片的加載速度。
• 資源合併和壓縮：將多個 CSS 文件和 JavaScript 文件合併成一個，壓縮文件大小，減少網絡請求次數，提高頁面加載速度。
• 使用 CDN 加速：將靜態資源部署到 CDN（Content Delivery Network）上，加速資源的下載和加載。
• 懶加載和預加載：延遲加載頁面中的圖片和 JavaScript 腳本，或者提前加載下一頁的內容，以優化頁面的加載速度和用户體驗。

7）渲染過程中遇到 JS 文件如何處理？

當瀏覽器在渲染過程中遇到 JavaScript 文件時，會暫停 HTML 解析，立即下載並執行 JavaScript 代碼。這是因為 JavaScript 可能會修改 DOM 樹和 CSSOM 樹，對頁面的渲染結果產生影響。因此，瀏覽器會優先加載和執行 JavaScript 代碼，以確保頁面的渲染和交互行為的正確性。

8）什麼是文檔的預解析？

文檔的預解析是瀏覽器在解析 HTML 文件時的一個優化過程。在文檔預解析階段，瀏覽器會提前加載和解析一些特定的資源，以加速頁面的加載和渲染過程。預解析的主要工作包括：

• 提前加載資源：瀏覽器會提前加載頁面中的外部 CSS 文件、JavaScript 文件以及圖片等資源，以減少後續頁面加載過程中的網絡延遲。
• 解析 HTML 標籤：瀏覽器會解析 HTML 文件中的一些特定標籤，例如 <link>、<script>、<img> 等，以提前構建 DOM 樹和 CSSOM 樹，加速頁面的渲染過程。

文檔的預解析過程是在瀏覽器內部進行的，不會對頁面的外觀和行為產生實質性的影響，但可以顯著提升頁面的加載速度和用户體驗。

9）CSS 如何阻塞文檔解析？

在 HTML 文檔中，瀏覽器會按照從上至下的順序逐行解析，遇到 <link> 和 <style> 標籤時，會暫停 HTML 解析，立即開始下載和解析對應的 CSS 文件或者內聯 CSS 代碼。這意味着 CSS 文件的加載和解析過程會阻塞文檔的解析和渲染。

具體來説，CSS 文件的加載和解析會阻塞以下過程：

• DOM 樹的構建：瀏覽器會等待 CSS 文件加載完成並解析完畢，才會繼續構建 DOM 樹。
• 渲染樹的構建：CSS 文件中的樣式信息會影響到渲染樹的構建，因此瀏覽器必須等待 CSS 文件解析完成後才能構建渲染樹。
• 頁面的首次渲染：瀏覽器需要等待所有必要的 CSS 文件加載和解析完畢，才能進行頁面的首次渲染，否則會出現 FOUC（Flash of Unstyled Content）現象。

10）如何優化關鍵渲染路徑？

關鍵渲染路徑是指瀏覽器在接收到 HTML 文件時，從開始加載到頁面首次渲染完成的整個過程。優化關鍵渲染路徑可以顯著提升頁面的加載速度和用户體驗，常見的優化方法包括：

• 減少 HTTP 請求次數：合併和壓縮 CSS 文件和 JavaScript 文件，減少頁面的資源請求次數。
• 最小化和延遲加載 CSS 和 JavaScript：將不必要的 CSS 和 JavaScript 文件移除或延遲加載，以減少對關鍵渲染路徑的阻塞。
• 使用內聯 CSS 和 JavaScript：將關鍵的 CSS 和 JavaScript 代碼內聯到 HTML 文件中，以加快頁面的首次渲染速度。
• 使用資源預加載和懶加載：使用 <link rel="preload"> 標籤預加載頁面所需的關鍵資源，或者延遲加載下方的資源，以提升頁面加載速度。
• 優化圖片和多媒體資源：選擇合適的圖片格式和壓縮算法，減小圖片文件大小，或者使用響應式圖片技術，在不同設備上加載適合的圖片資源。
• 使用緩存：利用瀏覽器緩存機制，合理設置緩存策略，減少重複資源的加載和傳輸。
• 減少重排和重繪：避免頻繁地修改頁面樣式和結構，優化 JavaScript 和 CSS 代碼，減少頁面的重排和重繪次數。

通過綜合應用以上優化方法，可以有效地優化關鍵渲染路徑，提升頁面的加載速度和用户體驗。