暑期大廠面了十余次，我把八股里面拷打最多的拿出來(lái)總結(jié)一下，可以隨便看看

1. 瀏覽器渲染流程

瀏覽器渲染

• 瀏覽器接收url并開(kāi)啟一個(gè)新進(jìn)程（這一部分可以展開(kāi)瀏覽器的進(jìn)程與線程的關(guān)系）
• 瀏覽器解析輸入的 URL，提取出其中的協(xié)議、域名和路徑等信息。（這部分涉及URL組成部分）
• 瀏覽器向 DNS 服務(wù)器發(fā)送請(qǐng)求，DNS服務(wù)器通過(guò) 多層查詢 將該 域名 解析為對(duì)應(yīng)的 IP地址 ，然后將請(qǐng)求發(fā)送到該IP地址上，與 服務(wù)器 建立連接和交換數(shù)據(jù)。（這部分涉及DNS查詢）. 瀏覽器緩存 -> 本地DNS -> 根 -> 頂級(jí) -> 權(quán)威
• 瀏覽器與服務(wù)器建立 TCP 連接。（這部分涉及TCP三次握手/四次揮手/5層網(wǎng)絡(luò)協(xié)議）
• 瀏覽器向服務(wù)器發(fā)送 HTTP 請(qǐng)求，包含請(qǐng)求頭和請(qǐng)求體。（4,5,6,7包含http頭部、響應(yīng)碼、報(bào)文結(jié)構(gòu)、cookie等知識(shí)）
• 服務(wù)器接收并處理請(qǐng)求，并返回響應(yīng)數(shù)據(jù)，包含狀態(tài)碼、響應(yīng)頭和響應(yīng)體。
• 瀏覽器接收到響應(yīng)數(shù)據(jù)，解析響應(yīng)頭和響應(yīng)體，并根據(jù)狀態(tài)碼判斷是否成功。
• 如果響應(yīng)成功，瀏覽器接收到http數(shù)據(jù)包后的解析流程（這部分涉及到html - 詞法分析，解析成DOM樹(shù)，解析CSS生成CSSOM樹(shù)（樣式樹(shù)），合并生成render渲染樹(shù)（樣式計(jì)算）。然后layout布局，分層，調(diào)用GPU繪制等，最后將繪制的結(jié)果合成最終的頁(yè)面圖像，顯示在屏幕上。這個(gè)過(guò)程會(huì)發(fā)生回流和重繪）。
• 連接結(jié)束 -> 斷開(kāi)TCP連接 四次揮手

2. js異步，promise 事件循環(huán)

簡(jiǎn)單

3. 瀏覽器緩存策略

強(qiáng)緩存（不會(huì)向服務(wù)器發(fā)送請(qǐng)求，直接用緩存）

機(jī)制：

• 瀏覽器在加載資源時(shí)，先查看緩存里有沒(méi)有符合條件的資源。
• 如果有，直接用本地緩存，不會(huì)發(fā)請(qǐng)求到服務(wù)器。
• 即使斷網(wǎng)也能用緩存里的數(shù)據(jù)。

常見(jiàn)的控制方式：

• Expires （HTTP/1.0）
• Cache-Control （HTTP/1.1）

協(xié)商緩存（會(huì)向服務(wù)器發(fā)送請(qǐng)求，但可能不下載資源）

機(jī)制：

• 資源過(guò)期后，瀏覽器向服務(wù)器發(fā)一個(gè)請(qǐng)求，詢問(wèn)：我這有個(gè)緩存版本，可以用嗎？
• 如果服務(wù)器說(shuō)可以（返回 304 Not Modified），瀏覽器繼續(xù)用緩存的版本。

常見(jiàn)的控制方式：

• Last-Modified / If-Modified-Since
• ETag / If-None-Match

4. 瀏覽器的存儲(chǔ)

5. 跨域

1. 同源策略：兩個(gè) URL 的協(xié)議、域名和端口都相同，限制js腳本、傳統(tǒng)請(qǐng)求、數(shù)據(jù)訪問(wèn)三大問(wèn)題
2. 跨域解決：

6. 瀏覽器安全

1. XSS攻擊：

在網(wǎng)站注入惡意腳本，讓其他用戶瀏覽時(shí)執(zhí)行，竊取敏感信息（如cookie）或者進(jìn)行非法操作

○ 存儲(chǔ)型 XSS 攻擊：黑客將惡意代碼儲(chǔ)存到存在漏洞的服務(wù)器，瀏覽器訪問(wèn)含有惡意代碼的頁(yè)面，瀏覽器上傳用戶信息到服務(wù)器。

○ 反射型XSS攻擊：用戶將一段含有惡意代碼的請(qǐng)求提交給 Web 服務(wù)器，Web 服務(wù)器接收到請(qǐng)求時(shí)，又將惡意代碼反射給了瀏覽器端，這就是反射型 XSS 攻擊。

○ 基于 DOM 的 XSS 攻擊：不牽涉到頁(yè)面 Web 服務(wù)器，在 Web 資源傳輸過(guò)程或者在用戶使用頁(yè)面的過(guò)程中修改 Web 頁(yè)面的數(shù)據(jù)。 比如通過(guò)網(wǎng)絡(luò)劫持在頁(yè)面?zhèn)鬏斶^(guò)程中修改 HTML 頁(yè)面的內(nèi)容，這種劫持類型很多，有通過(guò) WiFi 路由器劫持的，有通過(guò)本地惡意軟件來(lái)劫持的。

防范措施

○ 輸入內(nèi)容嚴(yán)格 轉(zhuǎn)義/過(guò)濾（如HTML、JS、URL編碼）

○ 使用 Content-Security-Policy（CSP安全策略）限制腳本來(lái)源

○ HttpOnly設(shè)置Cookie，避免被JS讀取

2. CSRF跨域請(qǐng)求偽造

利用受害者在已登錄的情況下身份驗(yàn)證的權(quán)限，對(duì)受害者進(jìn)行操作。攻擊者通過(guò)偽裝的請(qǐng)求來(lái)執(zhí)行未經(jīng)授權(quán)的操作，比如修改密碼、發(fā)送電子郵件或進(jìn)行資金轉(zhuǎn)賬等

防范措施

○ 設(shè)置 CSRF Token（每次請(qǐng)求攜帶驗(yàn)證令牌）

○ 檢查 Origin / Referer 來(lái)源

○ 對(duì)重要操作使用 二次確認(rèn)

○ Cookie設(shè)置 SameSite 屬性7. https和http

7. https和http

• HTTP：無(wú)連接、無(wú)狀態(tài)，明文傳輸
• HTTPS：HTTP+SSL/TLS協(xié)議

HTTP 與 HTTPS 區(qū)別

• 加密： HTTPS 是 HTTP 協(xié)議的更加安全的版本，通過(guò)使用SSL/TLS進(jìn)行加密傳輸?shù)臄?shù)據(jù)；
• 連接方式： HTTP（三次握手）和 HTTPS （三次握手+數(shù)字證書(shū)）連接方式不一樣；
• 端口： HTTP 默認(rèn)的端口是 80和 HTTPS 默認(rèn)端口是 443

保證安全性

• 加密傳輸：HTTPS使用SSL/TLS協(xié)議對(duì)HTTP報(bào)文進(jìn)行加密，這種加密過(guò)程結(jié)合了對(duì)稱加密和非對(duì)稱加密，確保數(shù)據(jù)的保密性和完整性。
• 身份驗(yàn)證：HTTPS通過(guò)數(shù)字證書(shū)進(jìn)行身份驗(yàn)證，確保通信雙方的真實(shí)性。在建立HTTPS連接時(shí)，服務(wù)器會(huì)提供數(shù)字證書(shū)來(lái)證明自己的身份。如果驗(yàn)證通過(guò)，客戶端就可以信任服務(wù)器，并繼續(xù)與其進(jìn)行安全的數(shù)據(jù)傳輸。這有效防止了被惡意偽裝的服務(wù)器攻擊。
• 數(shù)據(jù)完整性保護(hù)：在傳輸數(shù)據(jù)之前，HTTPS會(huì)對(duì)數(shù)據(jù)進(jìn)行加密，并使用消息摘要（hash）算法生成一個(gè)摘要值。在數(shù)據(jù)到達(dá)接收端后，接收端會(huì)使用相同的算法對(duì)接收到的數(shù)據(jù)進(jìn)行摘要計(jì)算，并與發(fā)送端的摘要值進(jìn)行比較。如果兩者一致，說(shuō)明數(shù)據(jù)在傳輸過(guò)程中沒(méi)有被篡改。如果不一致，通信雙方應(yīng)重新進(jìn)行驗(yàn)證或中斷連接。

8. https連接過(guò)程

（也就是拿非對(duì)稱加密對(duì)稱，保證非對(duì)稱的密鑰安全）

HTTPS通過(guò)TLS協(xié)議來(lái)建立安全連接，大致過(guò)程是：

?? 1. 客戶端發(fā)起請(qǐng)求

瀏覽器向服務(wù)器發(fā)起 HTTPS 請(qǐng)求，并說(shuō)明支持的加密算法。

?? 2. 服務(wù)器返回證書(shū)

服務(wù)器返回包含公鑰的數(shù)字證書(shū)（CA機(jī)構(gòu)簽發(fā)）。

?? 3. 客戶端驗(yàn)證證書(shū)

檢查證書(shū)是否有效（未過(guò)期、可信頒發(fā)機(jī)構(gòu)、未吊銷等）。

驗(yàn)證通過(guò)后，瀏覽器生成一個(gè)隨機(jī)對(duì)稱密鑰（Session Key）。

?? 4. 客戶端加密密鑰并發(fā)送

客戶端用服務(wù)器的公鑰加密這個(gè)對(duì)稱密鑰，發(fā)送給服務(wù)器。

?? 5. 服務(wù)器解密密鑰

服務(wù)器用私鑰解密出這個(gè)對(duì)稱密鑰。

?? 6. 建立安全通道

雙方以后使用這個(gè)對(duì)稱密鑰進(jìn)行加密通訊（效率高）。

簡(jiǎn)圖：

瀏覽器 ——> 服務(wù)器證書(shū)（含公鑰）
瀏覽器（驗(yàn)證證書(shū)）——> 隨機(jī)對(duì)稱密鑰（用公鑰加密）
服務(wù)器（用私鑰解密）——> 雙方用對(duì)稱密鑰加密通訊

9. tcp和udp

10. http狀態(tài)碼

以下是一些常見(jiàn)的HTTP狀態(tài)碼及其代表的意思：

1. 1xx（信息性狀態(tài)碼）：

○ 100 Continue：請(qǐng)求已收到，繼續(xù)處理。

2. 2xx（成功狀態(tài)碼）：

○ 200 OK：請(qǐng)求成功。

○ 201 Created：請(qǐng)求已經(jīng)被實(shí)現(xiàn)，并因此創(chuàng)建了一個(gè)新的資源。

○ 204 No Content：服務(wù)器成功處理了請(qǐng)求，但沒(méi)有返回任何內(nèi)容。

3. 3xx（重定向狀態(tài)碼）：

○ 301 Moved Permanently：永久重定向，資源位置變了。

○ 302 Found：臨時(shí)重定向，資源臨時(shí)移動(dòng)到其他位置。

○ 304 Not Modified：資源未修改，走緩存（跟協(xié)商緩存有關(guān)）。

4. 4xx（客戶端錯(cuò)誤狀態(tài)碼）：

○ 400 Bad Request：服務(wù)器無(wú)法理解請(qǐng)求。

○ 401 Unauthorized：請(qǐng)求要求進(jìn)行身份驗(yàn)證。

○ 403 Forbidden：服務(wù)器理解請(qǐng)求，但拒絕執(zhí)行它。

○ 404 Not Found：服務(wù)器無(wú)法找到請(qǐng)求的資源。

○ 405 Method Not Allowed：請(qǐng)求中指定的方法不被允許。

5. 5xx（服務(wù)器錯(cuò)誤狀態(tài)碼）：

○ 500 Internal Server Error：服務(wù)器內(nèi)部錯(cuò)誤。

○ 502 Bad Gateway：服務(wù)器作為網(wǎng)關(guān)或代理時(shí)收到無(wú)效響應(yīng)（常見(jiàn)于反向代理、Nginx）。

○ 503 Service Unavailable：服務(wù)器暫時(shí)過(guò)載或維護(hù)，無(wú)法處理請(qǐng)求。

○ 504 Gateway Timeout：網(wǎng)關(guān)超時(shí)，代理服務(wù)器等待上游服務(wù)器響應(yīng)超時(shí)。

11. react diff算法

react fiber前，傳統(tǒng)的diff算法：

• 把樹(shù)形結(jié)構(gòu)按照層級(jí)分解，只比較同級(jí)元素。
• 列表結(jié)構(gòu)的每個(gè)單元添加唯一的 key 屬性，方便比較。
• React 只會(huì)匹配相同 class 的 component（這里面的 class 指的是組件的名字）
• 合并操作，調(diào)用 component 的 setState 方法的時(shí)候, React 將其標(biāo)記為 dirty 到每一個(gè)事件循環(huán)結(jié)束, React 檢查所有標(biāo)記 dirty 的 component 重新繪制.
• 選擇性子樹(shù)渲染。開(kāi)發(fā)人員可以重寫(xiě) shouldComponentUpdate 提高 diff 的性能。

react fiber后

從 React 16 開(kāi)始，底層 Diff 算法升級(jí)為 Fiber 架構(gòu)，可以做到：

1. 可中斷的渲染：Fiber 允許將大的渲染任務(wù)拆分成多個(gè)小的工作單元（Unit of Work），使得 React 可以在空閑時(shí)間執(zhí)行這些小任務(wù)。當(dāng)瀏覽器需要處理更高優(yōu)先級(jí)的任務(wù)時(shí)（如用戶輸入、動(dòng)畫(huà)），可以暫停渲染，先處理這些任務(wù)，然后再恢復(fù)未完成的渲染工作。
2. 優(yōu)先級(jí)調(diào)度：在 Fiber 架構(gòu)下，React 可以根據(jù)不同任務(wù)的優(yōu)先級(jí)決定何時(shí)更新哪些部分。React 會(huì)優(yōu)先更新用戶可感知的部分（如動(dòng)畫(huà)、用戶輸入），而低優(yōu)先級(jí)的任務(wù)（如數(shù)據(jù)加載后的界面更新）可以延后執(zhí)行。
3. 雙緩存樹(shù)（Fiber Tree）：Fiber 架構(gòu)中有兩棵 Fiber 樹(shù)——current fiber tree（當(dāng)前正在渲染的 Fiber 樹(shù)）和 work in progress fiber tree（正在處理的 Fiber 樹(shù)）。React 使用這兩棵樹(shù)來(lái)保存更新前后的狀態(tài)，從而更高效地進(jìn)行比較和更新。
4. 任務(wù)切片：在瀏覽器的空閑時(shí)間內(nèi)（利用 requestIdleCallback思想），React 可以將渲染任務(wù)拆分成多個(gè)小片段，逐步完成 Fiber 樹(shù)的構(gòu)建，避免一次性完成所有渲染任務(wù)導(dǎo)致的阻塞。

?? Fiber 主要是為了解決大頁(yè)面卡頓的問(wèn)題，但核心的 Diff 思想還是類似的！