前端高頻面試題2：瀏覽器/計算機網絡

?本專欄相關鏈接

前端高頻面試題1：HTML/CSS

前端高頻面試題2：瀏覽器/計算機網絡

前端高頻面試題3：JavaScript

?1.什么是強緩存、協商緩存？?

強緩存：當瀏覽器請求資源時，首先檢查本地緩存是否命中。如果命中，則直接從緩存中讀取資源，無需向服務器發送任何請求。（返回200）

協商緩存：當強緩存未命中時，瀏覽器會向服務器發送請求，詢問服務器資源是否發生變化。如果服務器告知資源未改變，則瀏覽器從緩存中讀取資源；如果服務器告知資源已改變，則瀏覽器會下載新資源并更新緩存。（返回304）

Cookie:

存儲位置：Cookie存儲在客戶端的瀏覽器中。

生命周期：Cookie可以設置過期時間（Expires或Max-Age），到期后自動刪除；若未設置過期時間，則為會話級（瀏覽器關閉后清除）。

容量限制：一般大小限制為4KB左右。

使用場景：主要用于用戶身份認證（如記住登錄狀態）、保存用戶偏好設置和跟蹤用戶行為（如廣告點擊記錄）。

安全性：容易被劫持（如XSS攻擊），可以通過設置HttpOnly和Secure屬性提高安全性。

登錄狀態：可以在用戶未登錄時使用。

跨頁面：可以跨多個頁面和不同子域共享。

傳輸數據：每次請求都會攜帶 Cookie 數據。

Session:

??高安全性場景：適用于需要保護敏感數據的場景，如在線銀行、支付系統等。

存儲位置：Session存儲在服務端，服務器為每一個用戶創建唯一的會話（Session）。

生命周期：Session存在于用戶活動的會話期間，當用戶退出或者關閉瀏覽器，會話數據就會被刪除。

容量限制：取決于服務器配置。

使用場景：用戶會話管理：用于存儲用戶的會話信息，如購物車數據、用戶權限等。

安全性：相對安全，通過加密的 Session ID 進行識別和驗證，且客戶端不可見。

登錄狀態：需要用戶登錄后才能創建和訪問會話數據。

跨頁面：通常只能在單個會話期間。

傳輸數據：僅在初始會話時傳輸 Session ID，后續請求不再攜帶全部會話數據。

LocalStorage:

??前端緩存：用于緩存大量數據，提高應用性能和用戶體驗。

存儲位置：存儲在客戶端，瀏覽器內。

生命周期：持久性存儲，除非手動刪除，否則永久有效。

容量限制：一般為 5-10MB，各瀏覽器可能不同。

使用場景：長期數據存儲：適用于存儲長期有效的數據，如用戶偏好設置、瀏覽歷史等。

安全性：易受 XSS 攻擊，數據存儲在客戶端。

登錄狀態：需要用戶登錄后才能創建和訪問會話數據。

跨頁面：可以在同一域下的所有頁面中共享數據。

傳輸數據：不隨請求發送，僅在客戶端存儲和訪問。

SessionStorage:

??多標簽頁數據隔離：在同一域名下的不同標簽頁之間實現數據隔離，防止數據污染。

存儲位置：存儲在客戶端，瀏覽器內。

生命周期：會話級別，瀏覽器關閉或標簽頁關閉后失效。

容量限制：一般為 5-10MB，各瀏覽器可能不同。

使用場景：臨時數據存儲：適用于存儲會話級別的數據，如表單數據、頁面狀態等。

安全性：易受 XSS 攻擊，數據存儲在客戶端。

登錄狀態：需要用戶登錄后才能創建和訪問會話數據。

跨頁面：手動新建標簽頁無法共享數據，通過鏈接打開新頁面會復制一套原有數據，但與原數據是獨立的。

傳輸數據：不隨請求發送，僅在客戶端存儲和訪問。

3.?輸入一個URL到頁面過程中發生了什么

通過 DNS 解析域名的實際 IP 地址

檢查瀏覽器是否有緩存，命中則直接取本地磁盤的 html，如果沒有命中強緩存，則會向服務器發起請求（先進行下一步的 TCP 連接）

若強緩存和協商緩存都沒有命中，則返回請求結果

然后與 WEB 服務器通過三次握手建立 TCP 連接。期間會判斷一下，若協議是 https 則會做加密，如果不是，則會跳過這一步

加密完成之后，瀏覽器發送請求獲取頁面 html，服務器響應 html，這里的服務器可能是 server、也可能是 cdn

接下來是瀏覽器解析 HTML，開始渲染頁面

構建DOM樹：詞法分析然后解析成DOM樹（dom tree），是由dom元素及屬性節點組成，樹的根是document對象

構建CSS規則樹：生成CSS規則樹（CSS Rule Tree）

構建render樹：Web瀏覽器將DOM和CSSOM結合，并構建出渲染樹（render tree）

布局（Layout）：計算出每個節點在屏幕中的位置

繪制（Painting）：即遍歷render樹，并使用UI后端層繪制每個節點。

4. DNS解析的過程?

瀏覽器緩存：瀏覽器首先檢查自身緩存是否有該域名的IP記錄，若有則直接使用。

系統緩存與Hosts文件：若瀏覽器無緩存，操作系統檢查本地緩存（如Windows的DNS緩存）及Hosts文件，存在記錄則返回。

本地DNS服務器查詢：

用戶配置的本地DNS服務器（如ISP提供的或公共DNS）接收遞歸查詢請求。

若本地DNS有緩存且未過期，直接返回IP；否則開始迭代查詢。

根域名服務器指引：本地DNS向根服務器查詢，根服務器返回管理該頂級域（如.com）的頂級域名服務器地址。

頂級域名服務器指引：本地DNS詢問頂級服務器（如.com服務器），獲取管理目標域（如example.com）的權威服務器地址。

權威域名服務器解析：本地DNS向權威服務器查詢，獲得域名對應的IP（如www.example.com的A記錄），并緩存結果。

結果返回與緩存：本地DNS將IP返回給用戶，瀏覽器緩存該記錄，后續請求可快速響應。?

1.名稱和值（Name and Value）

每個Cookie都有一個名稱和值，名稱和值由服務器設置，并在發送給客戶端時存儲在瀏覽器中。
document.cookie = "username=JohnDoe";
2.域（Domain）

指定Cookie所屬的域。默認情況下，Cookie屬于創建它的域。
document.cookie = "username=JohnDoe; domain=example.com";
3.路徑（Path）

指定Cookie的有效路徑。只有在該路徑下的頁面才能訪問Cookie。
document.cookie = "username=JohnDoe; path=/account";
4.有效期（Expires）

指定Cookie的過期時間。可以設置為特定的日期和時間，超過這個時間后，Cookie將被刪除。
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT";
5.最大年齡（Max-Age）

指定Cookie從創建開始的有效時間，以秒為單位。這個屬性比expires屬性更精確。
document.cookie = "username=JohnDoe; max-age=3600";
6.安全性（Secure）

指定Cookie只能通過HTTPS協議發送，確保數據傳輸的安全性。
document.cookie = "username=JohnDoe; secure";
7.HttpOnly

指定Cookie只能通過HTTP協議訪問，客戶端JavaScript無法訪問，增加安全性，防止跨站腳本攻擊（XSS）。
document.cookie = "username=JohnDoe; HttpOnly";
8.SameSite

指定Cookie的SameSite屬性，防止跨站請求偽造（CSRF）攻擊。取值可以是Strict、Lax或None。
document.cookie = "username=JohnDoe; SameSite=Strict";

6.常見的瀏覽器狀態碼有哪些

200 OK??：請求成功，服務器成功處理了請求
??201 Created??：請求成功，并在服務器創建了新的資源
??301 Moved Permanently??：請求的資源已永久移動到新位置（客戶端應使用新URI進行后續請求，如網站域名永久更改）
??302 Found??：請求的資源臨時移動到另一個位置（客戶端應使用新URI進行本次請求，但后續請求可能使用原URI，如臨時維護重定向）
??303 See Other??：服務器指示客戶端通過GET方法在另一個URI獲取資源（常用于POST請求后的重定向，如提交表單后跳轉到結果頁面）
??304 Not Modified??：資源未修改，客戶端可使用緩存版本（用于條件GET請求，如瀏覽器緩存有效時）
??400 Bad Request??：請求語法錯誤（多為傳參形式錯誤）
??401 Unauthorized??：請求需要用戶身份認證（未登錄）
??403 Forbidden??：無訪問權限
??404 Not Found??：請求資源不存在
??405 Method Not Allowed??：請求方式不被允許（如使用Post請求一個Get請求）
??500 Internal Server Error??：服務器內部錯誤
??502 Bad Gateway??：服務器作為網關或代理，上游服務器無法收到響應（如后臺通過nginx代理，但后臺服務沒有啟動）
??503 Service Unavailable??：服務器暫時無法處理請求（通常由于過載或維護，客戶端可稍后重試，如服務器重啟中）

?7.什么是瀏覽器的重繪、重排（回流）

重繪：重繪是指當元素樣式發生改變，但不影響布局，瀏覽器重新繪制元素的過程。如改變元素的color、background、box-shadow等屬性。

重排（回流）：重排是指元素的布局屬性發生變化，需要重新計算元素在瀏覽器中的位置，瀏覽器重新進行布局的過程。如元素寬高度、位置、增刪元素等。

8.GET和POST請求的區別

區別點：

GET請求會被瀏覽器主動緩存，POST不會；

GET在瀏覽器回退不會再次請求，POST會再次提交請求；

GET請求參數會被完整保留在瀏覽器歷史記錄里，POST中的參數不會；

GET請求能由瀏覽器自動發起（請求image等），POST不能；

GET參數放于URL中，POST通常放于Request Body中。

相同點：

都不安全，基于http明文傳輸（可自行進行加密處理）；

參數沒有大小限制，但URL有長度限制。