前端面試最常問(wèn)的瀏覽器相關(guān)問(wèn)題有哪些？疫情好轉(zhuǎn)后。迎來(lái)一波復(fù)工熱潮。在這個(gè)時(shí)候，也是許多小伙伴求職面試的高峰期。因此小編為大家整理了前端面試中常見(jiàn)的瀏覽器相關(guān)問(wèn)題，眾所周知，瀏覽器的相關(guān)問(wèn)題是前端面試中的基礎(chǔ)問(wèn)題，也是幾乎必考的問(wèn)題。希望大家可以在前端面試前，多刷刷題，準(zhǔn)備得更加充分。
1、為什么會(huì)有跨域的問(wèn)題出現(xiàn)？
跨域,指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本，它是由瀏覽器的同源策略造成的,是瀏覽器對(duì)javascript施加的安全限制，防止他人惡意攻擊網(wǎng)站。比如一個(gè)黑客，他利用 iframe 把真正的銀行登錄頁(yè)面嵌到他的頁(yè)面上，當(dāng)你使用真實(shí)的用戶(hù)名和密碼登錄時(shí)，如果沒(méi)有同源限制，他的頁(yè)面就可以通過(guò)JavaScript讀取到你的表單中輸入的內(nèi)容，這樣用戶(hù)名和密碼就輕松到手了。
2、前端安全 XSS、CSRF 是什么？
（1）xss：跨站腳本攻擊。xss 攻擊的主要目的是想辦法獲取目標(biāo)攻擊網(wǎng)站的cookie，因?yàn)橛辛?cookie 相當(dāng)于有了 session。惡意攻擊者往 Web 頁(yè)面里插入惡意 Script 代碼，當(dāng)用戶(hù)瀏覽該網(wǎng)頁(yè)之時(shí)，嵌入其中 Web 里面的。Script 代碼會(huì)被執(zhí)行，從而達(dá)到惡意攻擊用戶(hù)的目的，避免采取的措施： 編碼、過(guò)濾、校驗(yàn)。
（2）csrf：跨站點(diǎn)偽裝請(qǐng)求，CSRF 攻擊者在用戶(hù)已經(jīng)登錄目標(biāo)網(wǎng)站之后，誘使用戶(hù)訪(fǎng)問(wèn)一個(gè)攻擊頁(yè)面，利用目標(biāo)網(wǎng)站對(duì)用戶(hù)的信任，以用戶(hù)身份在攻擊頁(yè)面對(duì)目標(biāo)網(wǎng)站發(fā)起偽造用戶(hù)操作的請(qǐng)求，達(dá)到攻擊目的。防御手段：1. 盡量使用 POST，限制 GET，2. 加驗(yàn)證碼
3、瀏覽器如何加載頁(yè)面？
從瀏覽器地址欄的請(qǐng)求鏈接開(kāi)始，瀏覽器通過(guò) DNS 解析查到域名映射的 IP 地址，成功之后瀏覽器端向此 IP 地址取得連接，成功連接之后，瀏覽器端將請(qǐng)求信息通過(guò) HTTP 協(xié)議向此 IP 地址所在服務(wù)器發(fā)起請(qǐng)求，服務(wù)器接受到請(qǐng)求之后等待處理，最后向?yàn)g覽器端發(fā)回響應(yīng)，此時(shí)在 HTTP 協(xié)議下， 瀏覽器從服務(wù)器接收到 text/html 類(lèi)型的代碼，瀏覽器開(kāi)始顯示此 html， 并獲取其中內(nèi)嵌資源地址，然后瀏覽器再發(fā)起請(qǐng)求來(lái)獲取這些資源，并在 瀏覽器的 html 中顯示。
4、script 腳本阻塞有什么解決辦法？
（1）推遲加載
如果頁(yè)面初始的渲染并不依賴(lài)于 js 或者 CSS 可以用推遲加載，就是最后在加載 js 和 css，把引用外部文件的代碼寫(xiě)在最后。
（2）defer 延遲加載
在 文 檔 解 析 完 成 開(kāi) 始 執(zhí) 行 ， 并且在DOMContentLoaded 事件之前執(zhí)行完成，會(huì)按照他們?cè)谖臋n出現(xiàn)的順序去下載解析。效果和把 script 放在文檔最后
（3）異步加載
async 異步加載：就是告訴瀏覽器不必等到加載完外部文件，可以邊渲染邊下載，什么時(shí)候下載完成什么時(shí)候執(zhí)行。
5、defer 和 async 的區(qū)別是什么？
有了 async 屬性，表示后續(xù)文檔的加載和渲染與 js 腳本的加載和執(zhí)行是并行進(jìn)行的， 即異步執(zhí)行；。有了 defer 屬性，加載后續(xù)文檔的過(guò)程和 js 腳本的加載(此時(shí)僅加載不執(zhí)行) 是并行進(jìn)行的(異步)，js 腳本的執(zhí)行需要等到文檔所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)執(zhí)行之前。
6、瀏覽器強(qiáng)制緩存和協(xié)商緩存是什么？
強(qiáng)制緩存：是利用 http 的返回頭中的 Expires 或者 Cache-Control 兩個(gè)字段來(lái)控制的，用來(lái)表示資源的緩存時(shí)間。協(xié)商緩存：就是由服務(wù)器來(lái)確定緩存資源是否可用，所以客戶(hù)端與服務(wù)器端要通過(guò)某種標(biāo)識(shí)來(lái)進(jìn)行通信，從而讓服務(wù)器判斷請(qǐng)求資源是否可以緩存訪(fǎng)問(wèn)，這主要涉及到下面兩組 header 字段，這兩組搭檔都是成對(duì)出現(xiàn)的， 即第一次請(qǐng)求的響應(yīng)頭帶上某個(gè)字段，則后續(xù)請(qǐng)求則會(huì)帶上對(duì)應(yīng)的請(qǐng)求字段， 若響應(yīng)頭沒(méi)有 Last-Modified 或者 Etag 字段，則請(qǐng)求頭也不會(huì)有對(duì)應(yīng)的字段。
7、WEB 存儲(chǔ)，COOKIES、LOCALSTOGE 等的使用規(guī)則和區(qū)別？
web 存儲(chǔ)就指的是本地存儲(chǔ)，包括 localstorage 和 sessionstorage。cookie 在瀏覽器與服務(wù)器之間來(lái)回傳遞，cookie 只在設(shè)置的cookie 過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉，cookie 數(shù)據(jù)不能超過(guò) 4k。localStorage 不把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存,始終有效， 長(zhǎng)期保存,可以達(dá)到 5M 或更大存儲(chǔ)大小。
8、什么是預(yù)加載、懶加載？
預(yù)加載：提前加載圖片，當(dāng)用戶(hù)需要查看時(shí)可直接從本地緩存中渲染。懶加載：也就是延遲加載。當(dāng)訪(fǎng)問(wèn)一個(gè)頁(yè)面的時(shí)候，先把 img 元素或是其他元素的背景圖片路徑替換成一張大小為 1*1px 圖片的路徑，只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，才設(shè)置圖片真正的路徑，讓圖片顯示出來(lái)。這就是圖片懶加載。
9、服務(wù)器如何識(shí)別是你在操作，說(shuō)說(shuō)思路？
（1）當(dāng)瀏覽器首次訪(fǎng)問(wèn)服務(wù)器時(shí), 服務(wù)器會(huì)為客戶(hù)端創(chuàng)建一個(gè)session，并通過(guò)特殊算法算出一個(gè) sessionID，用來(lái)標(biāo)識(shí)該 session 對(duì)象。
（2）當(dāng)瀏覽器再次（session 還在有效時(shí)間內(nèi)）向服務(wù)器請(qǐng)求資源的時(shí)候，瀏覽器將 sessionID 和請(qǐng)求內(nèi)容一起發(fā)送到服務(wù)端。服務(wù)端通過(guò)對(duì)比自身存儲(chǔ)的 sessionId 來(lái)判斷用戶(hù)之前是否存在，并返回對(duì)應(yīng)的內(nèi)容給不同用戶(hù)。
（3）因?yàn)闃?biāo)識(shí)符存在內(nèi)存里，所以當(dāng)瀏覽器關(guān)閉時(shí)，瀏覽器保存的sessionId 就會(huì)消失。服務(wù)器將匹配失敗，默認(rèn)為此請(qǐng)求是新用戶(hù)提出的，如上文順序，重新創(chuàng)建一個(gè) session 容器，和相應(yīng)的唯一 sessionId， 返回給瀏覽器。
10、瀏覽器的渲染流程你了解嗎？
（1）解析 HTML 文件，創(chuàng)建 DOM 樹(shù)
（2）解析 CSS：優(yōu)先級(jí)：瀏覽器默認(rèn)設(shè)置<用戶(hù)設(shè)置<外部樣式<內(nèi)聯(lián)樣式
（3）將 CSS 與 DOM 合并，構(gòu)建渲染樹(shù)
（4）布局和繪制，重繪和重排。重排：若渲染樹(shù)的一部分更新，且尺寸變化，就會(huì)發(fā)生重排；重繪：部分節(jié)點(diǎn)需要更新，但不改變其他集合形狀。如改變某個(gè)元素的顏色，就會(huì)發(fā)生重繪。
以上就是前端面試最常問(wèn)的瀏覽器相關(guān)問(wèn)題，大家都會(huì)做嗎？如果有什么地方還有疑問(wèn)，可以對(duì)前端知識(shí)點(diǎn)進(jìn)行針對(duì)性的查漏補(bǔ)缺。最后希望大家都可以順利通過(guò)前端面試，拿到理想的offer。
重慶分公司
重慶分公司
