Http 面試知識點

1、從URL輸入到頁面顯示發生了什麼？

首先進行DNS查詢，查詢到域名對應的IP

接下來是TCP的三次握手，

當 TCP 握手結束後就會進行 TLS 握手，而後就開始正式的傳輸數據

數據在進入服務端以前，可能還會先通過負責負載均衡的服務器，它的做用就是將請求合理的分發到多臺服務器上，這時假設服務端會響應一個 HTML 文件。

首先瀏覽器會判斷狀態碼是什麼，若是是 200 那就繼續解析，若是 400 或 500 的話就會報錯，若是 300的話會進行重定向，這裏會有個重定向計數器，避免過屢次的重定向，超過次數也會報錯。

瀏覽器開始解析文件，若是是 gzip 格式的話會先解壓一下，而後經過文件的編碼格式知道該如何去解碼文件。

文件解碼成功後會正式開始渲染流程，先會根據 HTML 構建 DOM 樹，有 CSS 的話會去構建 CSSOM 樹。若是遇到 script 標籤的話，會判斷是否存在 async 或者 defer ，前者會並行進行下載並執行 JS，後者會先下載文件，而後等待 HTML 解析完成後順序執行。

CSSOM 樹和 DOM 樹構建完成後會開始生成 Render 樹，這一步就是肯定頁面元素的佈局、樣式等等諸多方面的東西

在生成 Render 樹的過程當中，瀏覽器就開始調用 GPU 繪製，合成圖層，將內容顯示在屏幕上了。

2、緩存相關，例如 no-cache 和 no-store的區別

no-store：不緩存任何響應 no-cache: 資源會被緩存，但會當即失效，下次會發起請求驗證資源是否過時

3、瀏覽器有幾種緩存，何時使用緩存？

Service Worker

Memory Cache 內存中的緩存

Disk Cache 硬盤中的緩存

Push Cache

網絡請求

4、cookie/session的區別，cookie的參數有哪些，http-only關注下

瀏覽器的同源政策規定，兩個網址只要域名相同和端口相同，就能夠共享 Cookie（參見《同源政策》一章）。注意，這裏不要求協議相同。也就是說，example.com設置的 Cookie，能夠被https://example.com讀取。

• path屬性必須爲絕對路徑，默認爲當前路徑。
• domain屬性值必須是當前發送 Cookie，的域名的一部分。好比，當前域名是example.com，就不能將其設爲foo.com。該屬性默認爲當前的一級域名（不含二級域名）。
• max-age屬性的值爲秒數。
• expires屬性的值爲 UTC，格式，可使用Date.prototype.toUTCString()進行日期格式轉換。

5、CDN能爲何能夠作到性能優化？

6、狀態碼，301和302的區別

7、web安全機制，XSS/CSRF

xss跨站腳本攻擊

csrf跨站輕輕僞造

xss最多見的就是評論功能，不要相信用戶的任何輸入，這裏作下替換

const filterXss = (str) => {
    if (typedef str !== 'string') {
        return str
    }
    str = str.replace(/\</g, '&gt;').replace(/\>/, '&lt;').replace(/\"/, '&quot;')
    return str                                                             
}
複製代碼

8、TCP三次握手，四次揮手原理

9、http2.0有哪些新特性？解決了什麼問題？ http3.0呢？

參考：juejin.im/post/5a4dfb…

• 二進制分幀
• 首部壓縮
• 流量控制
• 多路複用
• 請求優先級
• 服務器推送

在 HTTP/1 中，爲了性能考慮，咱們會引入雪碧圖、將小圖內聯、使用多個域名等等的方式。這一切都是由於瀏覽器限制了同一個域名下的請求數量（Chrome 下通常是限制六個鏈接），當頁面中須要請求不少資源的時候，隊頭阻塞（Head of line blocking）會致使在達到最大請求數量時，剩餘的資源須要等待其餘資源請求完成後才能發起請求。

HTTP/2 中引入了多路複用的技術，這個技術能夠只經過一個 TCP 鏈接就能夠傳輸全部的請求數據。多路複用很好的解決了瀏覽器限制同一個域名下的請求數量的問題，同時也間接更容易實現全速傳輸，畢竟新開一個 TCP 鏈接都須要慢慢提高傳輸速度。

10、瀏覽器跨域請求有哪些解決方式？