瀏覽器面試題及詳細答案 88道（12-22）

《前后端面試題》專欄集合了前后端各個知識模塊的面試題，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。

前后端面試題-專欄總目錄

在這里插入圖片描述

文章目錄

一、本文面試題目錄
- - 12. 為什么利用多個域名存儲網站資源更有效？
  - 13. 如何理解網頁標準及標準制定機構的重要性？
  - 14. cookies、sessionStorage 和 localStorage 的區別是什么？
  - 15. 渲染過程中遇到 CSS 文件會如何處理？
  - 16. 你對瀏覽器內核的理解是什么？
  - 17. 常見瀏覽器內核的優缺點分別是什么？
  - 18. 渲染過程中遇到 JS 文件會如何處理？
  - 19. 什么是文檔的預解析？
  - 20. 渲染頁面時常見哪些不良現象？
  - 21. 如何優化關鍵渲染路徑？
  - 22. 什么是重繪和回流？如何減少回流？

一、本文面試題目錄

12. 為什么利用多個域名存儲網站資源更有效？

原理說明：
- 突破瀏覽器并發連接限制：多數瀏覽器對同一域名的并發請求數有限制（如Chrome默認6個），使用多個域名可讓瀏覽器同時加載更多資源，減少等待時間。
- 分流緩存壓力：不同域名的資源可分別緩存，避免單一域名下緩存空間不足或資源混淆。
- CDN優化：不同域名可對應不同CDN節點，根據資源類型（如圖片、腳本）選擇更優的CDN服務，提升加載速度。
- 規避Cookie影響：靜態資源（如圖片、CSS）若放在帶Cookie的域名下，請求會攜帶不必要的Cookie，增加數據傳輸量；獨立域名可避免此問題。
示例場景：
一個電商網站將主域名設為www.example.com（存放HTML和核心腳本），圖片存于img.example.com，CSS和JS存于static.example.com，這樣瀏覽器可同時從3個域名加載資源，大幅提升頁面加載效率。

13. 如何理解網頁標準及標準制定機構的重要性？

原理說明：
- 網頁標準：是一系列規范（如HTML、CSS、JavaScript語法及行為）的集合，確保網頁在不同瀏覽器、設備上表現一致，提升兼容性和可維護性。
- 標準制定機構的作用：
  - W3C（World Wide Web Consortium）：制定HTML、CSS等核心標準，推動Web技術規范化。
  - ECMA International：制定JavaScript（ECMAScript）標準，確保腳本語言的一致性和演進。
  - IETF（Internet Engineering Task Force）：制定HTTP等網絡傳輸標準，保障數據交互的穩定性。
- 重要性：
  - 降低開發者學習和維護成本，無需為不同瀏覽器編寫差異化代碼。
  - 促進Web技術的統一演進，推動創新（如PWA、WebGL等新技術基于標準發展）。
  - 保障用戶體驗一致性，無論使用Chrome、Firefox還是Safari，網頁功能和表現基本一致。
示例：
HTML5標準由W3C制定后，<video>標簽可在所有現代瀏覽器中直接播放視頻，無需依賴插件（如Flash），體現了標準對技術統一和用戶體驗的提升。

14. cookies、sessionStorage 和 localStorage 的區別是什么？

特性	cookies	sessionStorage	localStorage
存儲大小	約4KB	約5-10MB	約5-10MB
有效期	可設置過期時間（持久化）或會話級（關閉瀏覽器失效）	會話級（關閉標簽頁/瀏覽器失效）	持久化（除非手動刪除）
作用域	同域名（包括子域名，可配置）	僅當前標簽頁（同域名不同標簽頁不共享）	同域名下所有標簽頁共享
與服務器交互	每次HTTP請求自動攜帶	不與服務器交互	不與服務器交互
API易用性	需要手動封裝（`document.cookie`）	簡潔API（`setItem`/`getItem`）	同sessionStorage
典型用途	身份認證、記住登錄狀態	臨時表單數據、頁面狀態保存	長期數據存儲（如用戶偏好設置）

示例代碼：

// cookies
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";// sessionStorage
sessionStorage.setItem("tempData", "hello");
console.log(sessionStorage.getItem("tempData")); // "hello"// localStorage
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // "dark"

15. 渲染過程中遇到 CSS 文件會如何處理？

原理說明：
- CSS文件會阻塞渲染樹構建，但不會阻塞HTML解析（瀏覽器會并行下載CSS和解析HTML）。
- 瀏覽器解析HTML生成DOM樹，同時解析CSS生成CSSOM（CSS對象模型），兩者結合生成渲染樹（Render Tree），再進行布局（Layout）和繪制（Paint）。
- 若CSS未加載完成，渲染樹無法生成，頁面會呈現空白（或僅顯示已解析的未樣式化內容），直到CSSOM構建完成。
關鍵機制：
- CSS阻塞渲染：確保頁面按樣式規則正確顯示，避免“無樣式內容閃爍（FOUC）”。
- 媒體查詢優化：對media="print"等非當前場景的CSS，瀏覽器會下載但不阻塞渲染。
示例場景：
若頁面引入一個大型外部CSS文件，HTML解析完成后會等待CSS下載并解析，此時DOM已就緒但渲染樹未生成，頁面暫時空白，直到CSSOM構建完成后才會顯示樣式化內容。

16. 你對瀏覽器內核的理解是什么？

原理說明：
- 瀏覽器內核（Rendering Engine）是瀏覽器的核心組件，負責解析和渲染網頁內容，決定頁面的顯示方式和性能。
- 核心功能：
  - 解析HTML/XHTML生成DOM樹。
  - 解析CSS生成CSSOM樹。
  - 結合DOM和CSSOM生成渲染樹。
  - 執行布局（Layout）計算元素位置和大小。
  - 繪制（Painting）將元素渲染到屏幕。
  - 部分內核還集成JavaScript引擎（如WebKit的JavaScriptCore、Blink的V8）。
- 不同內核的實現差異會導致網頁在不同瀏覽器中的兼容性問題（如CSS屬性支持、渲染精度等）。
常見內核：
Blink（Chrome、Edge）、WebKit（Safari）、Gecko（Firefox）、Trident（舊版IE）。

17. 常見瀏覽器內核的優缺點分別是什么？

內核	代表瀏覽器	優點	缺點
Blink	Chrome、Edge	渲染速度快，對新特性支持積極，開源活躍	對部分舊標準兼容性一般，資源占用較高
WebKit	Safari、舊版Chrome	渲染流暢，與macOS/iOS生態整合好	新特性支持節奏較慢，部分API實現獨特
Gecko	Firefox	標準兼容性強，隱私保護功能完善	渲染性能略遜于Blink，市場份額較低
Trident	舊版IE（IE11及以下）	對舊網站兼容性好（如ActiveX）	不支持現代標準（如ES6、CSS3），已被淘汰

18. 渲染過程中遇到 JS 文件會如何處理？

原理說明：
- JavaScript會阻塞HTML解析和渲染，因為JS可修改DOM（如document.write）和CSSOM（如document.styleSheets），瀏覽器需暫停解析等待JS執行完成。
- 關鍵機制：
  - 默認阻塞：當HTML解析器遇到<script>標簽時，會暫停解析，下載JS文件（若為外部腳本）并執行，完成后再繼續解析HTML。
  - 預加載掃描器：瀏覽器會啟動預加載掃描器，提前發現并下載JS、CSS等資源，減少阻塞時間。
  - async/defer屬性：可改變JS的執行時機（見問題5），避免阻塞解析。

示例代碼：

<!-- 阻塞解析和渲染 -->
<script src="app.js"></script><!-- 不阻塞解析，下載完成后立即執行（順序不保證） -->
<script src="lib.js" async></script><!-- 不阻塞解析，DOM就緒后按順序執行 -->
<script src="util.js" defer></script>

19. 什么是文檔的預解析？

原理說明：
- 文檔預解析（Pre-parsing）是瀏覽器的優化機制，當HTML解析器被JS阻塞時，啟動預解析器（Preloader）提前掃描后續HTML內容，發現并下載關鍵資源（如JS、CSS、圖片等）。
- 作用：減少資源加載等待時間，提升頁面加載速度。
- 預解析范圍：僅掃描標簽中的資源引用（如src、href），不執行解析或渲染操作。
示例場景：
若頁面中部有一個阻塞解析的JS文件，預解析器會提前掃描后續的<link rel="stylesheet">和<img src>，在JS執行期間并行下載這些資源，避免JS執行完成后才開始下載，節省時間。

20. 渲染頁面時常見哪些不良現象？

常見現象及原因：
- 無樣式內容閃爍（FOUC）：CSS加載延遲，DOM先于CSSOM渲染，導致頁面短暫顯示無樣式內容。
- 布局偏移（CLS，Cumulative Layout Shift）：元素大小或位置動態變化（如圖片未設尺寸、字體加載延遲），導致頁面布局突然偏移，影響用戶體驗。
- 卡頓（Jank）：JS執行時間過長或頻繁觸發回流/重繪，導致渲染幀率下降（低于60fps），頁面滾動或動畫不流暢。
- 白屏/空白：HTML解析或關鍵資源（如JS、CSS）加載失敗，導致頁面無法渲染。
示例：
圖片未設置width和height屬性，加載完成后突然撐開容器，導致下方內容下移，產生布局偏移。

21. 如何優化關鍵渲染路徑？

原理說明：
關鍵渲染路徑是瀏覽器將HTML、CSS、JS轉換為屏幕像素的過程，優化目標是減少首次內容繪制（FCP） 和可交互時間（TTI）。
優化策略：
1. 精簡HTML/CSS：移除冗余代碼，壓縮文件（如使用Gzip/Brotli）。
2. 優先加載關鍵CSS：將首屏必需的CSS內聯到<head>，非關鍵CSS異步加載（如media="print"）。
3. 優化JS執行：
  - 延遲加載非關鍵JS（defer/async）。
  - 避免JS阻塞解析（將腳本放在</body>前或使用動態導入import()）。
4. 減少回流/重繪：合理使用will-change、transform等屬性（見問題22）。
5. 預連接/預加載：
```
<link rel="preconnect" href="https://cdn.example.com"> 
<link rel="preload" href="critical.css" as="style"> 
```

22. 什么是重繪和回流？如何減少回流？

重繪（Repaint）：
- 定義：元素樣式（如color、background）改變但不影響布局時，瀏覽器重新繪制元素的過程。
- 示例：div.style.color = "red";（僅顏色變化，位置和大小不變）。
回流（Reflow，又稱重排）：
- 定義：元素布局（如width、position、float）改變時，瀏覽器重新計算元素位置和大小，并更新渲染樹的過程。
- 影響：回流代價高于重繪，頻繁回流會導致頁面卡頓。
- 示例：div.style.width = "200px";（寬度變化，需重新計算布局）。
減少回流的方法：
1. 批量修改樣式：使用class一次性修改多個樣式，而非逐個設置。
```
.active { width: 200px; height: 100px; }
```
```
element.classList.add("active"); // 一次回流
```
2. 脫離文檔流操作：通過display: none隱藏元素后修改樣式，完成后恢復顯示（僅觸發2次回流）。
3. 使用CSS觸發合成層：transform、opacity等屬性修改僅觸發合成（Composite），不回流/重繪。
```
element.style.transform = "translateX(100px)"; // 無回流
```
4. 避免頻繁訪問布局屬性：如offsetWidth、scrollTop，瀏覽器會強制刷新渲染樹，可緩存結果。
```
const width = element.offsetWidth; // 觸發回流
// 多次使用width，避免重復訪問
element.style.width = width + 10 + "px";
```