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