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