一、從URL輸入到頁(yè)面顯示發(fā)生了什么？

首先進(jìn)行DNS查詢，查詢到域名對(duì)應(yīng)的IP

接下來(lái)是TCP的三次握手，

當(dāng) TCP 握手結(jié)束后就會(huì)進(jìn)行 TLS 握手，然后就開(kāi)始正式的傳輸數(shù)據(jù)

數(shù)據(jù)在進(jìn)入服務(wù)端之前，可能還會(huì)先經(jīng)過(guò)負(fù)責(zé)負(fù)載均衡的服務(wù)器，它的作用就是將請(qǐng)求合理的分發(fā)到多臺(tái)服務(wù)器上，這時(shí)假設(shè)服務(wù)端會(huì)響應(yīng)一個(gè) HTML 文件。

首先瀏覽器會(huì)判斷狀態(tài)碼是什么，如果是 200 那就繼續(xù)解析，如果 400 或 500 的話就會(huì)報(bào)錯(cuò)，如果 300的話會(huì)進(jìn)行重定向，這里會(huì)有個(gè)重定向計(jì)數(shù)器，避免過(guò)多次的重定向，超過(guò)次數(shù)也會(huì)報(bào)錯(cuò)。

瀏覽器開(kāi)始解析文件，如果是 gzip 格式的話會(huì)先解壓一下，然后通過(guò)文件的編碼格式知道該如何去解碼文件。

文件解碼成功后會(huì)正式開(kāi)始渲染流程，先會(huì)根據(jù) HTML 構(gòu)建 DOM 樹(shù)，有 CSS 的話會(huì)去構(gòu)建 CSSOM 樹(shù)。如果遇到 script 標(biāo)簽的話，會(huì)判斷是否存在 async 或者 defer ，前者會(huì)并行進(jìn)行下載并執(zhí)行 JS，后者會(huì)先下載文件，然后等待 HTML 解析完成后順序執(zhí)行。

CSSOM 樹(shù)和 DOM 樹(shù)構(gòu)建完成后會(huì)開(kāi)始生成 Render 樹(shù)，這一步就是確定頁(yè)面元素的布局、樣式等等諸多方面的東西

在生成 Render 樹(shù)的過(guò)程中，瀏覽器就開(kāi)始調(diào)用 GPU 繪制，合成圖層，將內(nèi)容顯示在屏幕上了。

二、緩存相關(guān)，例如 no-cache 和 no-store的區(qū)別

no-store：不緩存任何響應(yīng) no-cache: 資源會(huì)被緩存，但會(huì)立即失效，下次會(huì)發(fā)起請(qǐng)求驗(yàn)證資源是否過(guò)期

三、瀏覽器有幾種緩存，什么時(shí)候使用緩存？

Service Worker

Memory Cache 內(nèi)存中的緩存

Disk Cache 硬盤中的緩存

Push Cache

網(wǎng)絡(luò)請(qǐng)求

四、cookie/session的區(qū)別，cookie的參數(shù)有哪些，http-only關(guān)注下

瀏覽器的同源政策規(guī)定，兩個(gè)網(wǎng)址只要域名相同和端口相同，就可以共享 Cookie（參見(jiàn)《同源政策》一章）。注意，這里不要求協(xié)議相同。也就是說(shuō)，example.com設(shè)置的 Cookie，可以被https://example.com讀取。

• path屬性必須為絕對(duì)路徑，默認(rèn)為當(dāng)前路徑。
• domain屬性值必須是當(dāng)前發(fā)送 Cookie，的域名的一部分。比如，當(dāng)前域名是example.com，就不能將其設(shè)為foo.com。該屬性默認(rèn)為當(dāng)前的一級(jí)域名（不含二級(jí)域名）。
• max-age屬性的值為秒數(shù)。
• expires屬性的值為 UTC，格式，可以使用Date.prototype.toUTCString()進(jìn)行日期格式轉(zhuǎn)換。

五、CDN能為什么可以做到性能優(yōu)化？

六、狀態(tài)碼，301和302的區(qū)別

七、web安全機(jī)制，XSS/CSRF

xss跨站腳本攻擊

csrf跨站輕輕偽造

xss最常見(jiàn)的就是評(píng)論功能，不要相信用戶的任何輸入，這里做下替換

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

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

九、http2.0有哪些新特性？解決了什么問(wèn)題？ http3.0呢？

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

• 二進(jìn)制分幀
• 首部壓縮
• 流量控制
• 多路復(fù)用
• 請(qǐng)求優(yōu)先級(jí)
• 服務(wù)器推送

在 HTTP/1 中，為了性能考慮，我們會(huì)引入雪碧圖、將小圖內(nèi)聯(lián)、使用多個(gè)域名等等的方式。這一切都是因?yàn)闉g覽器限制了同一個(gè)域名下的請(qǐng)求數(shù)量（Chrome 下一般是限制六個(gè)連接），當(dāng)頁(yè)面中需要請(qǐng)求很多資源的時(shí)候，隊(duì)頭阻塞（Head of line blocking）會(huì)導(dǎo)致在達(dá)到最大請(qǐng)求數(shù)量時(shí)，剩余的資源需要等待其他資源請(qǐng)求完成后才能發(fā)起請(qǐng)求。

HTTP/2 中引入了多路復(fù)用的技術(shù)，這個(gè)技術(shù)可以只通過(guò)一個(gè) TCP 連接就可以傳輸所有的請(qǐng)求數(shù)據(jù)。多路復(fù)用很好的解決了瀏覽器限制同一個(gè)域名下的請(qǐng)求數(shù)量的問(wèn)題，同時(shí)也間接更容易實(shí)現(xiàn)全速傳輸，畢竟新開(kāi)一個(gè) TCP 連接都需要慢慢提升傳輸速度。

十、瀏覽器跨域請(qǐng)求有哪些解決方式？

轉(zhuǎn)載于:https://juejin.im/post/5cf773526fb9a07eda03062f

總結(jié)

以上是生活随笔為你收集整理的Http 面试知识点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。