2019前端面試題（瀏覽器、協議安全篇）

在此分享、整理前端面試題，若有解答錯誤的地方，煩請各位大佬指正，感謝！！

請描述一下cookie、sessionStorage、localStorage的區別

• 存儲大小：cookie數據不能超過4k，sessionStorage和localStorage，能夠達到5M或更大
• 數據有效期：sessionStorage關閉標籤就去清除；localStorage須要手動清除；cookie在設置的cookie過時時間以前一直有效
• 請求數據，cookie能夠做爲請求參數去請求服務器接口，即cookie在瀏覽器和服務器間來回傳遞
• 做用範圍：cookie只屬於某個路徑下，須要設置路徑，同源窗口共享，sessionStorage不在不一樣的瀏覽器窗口中共享，localStorage 在全部同源窗口中都是共享的

如何實現瀏覽器內多個標籤頁之間的通訊

• localstorage、 cookies 等本地存儲方式
• 使用url帶參數作頁面間的跳轉
• 能夠把數據傳給後端，在另外一個頁面再去請求後端的接口拿數據

什麼是XXS攻擊

Cross-site script，跨站腳本攻擊，

當其它用戶瀏覽該網站時候，該段 HTML 代碼會自動執行，從而達到攻擊的目的，如盜取用戶的 Cookie，破壞頁面結構，重定向到其它網站等。

XSS 類型：

通常能夠分爲： 持久型 XSS 和非持久性 XSS

持久型 XSS 就是對客戶端攻擊的腳本植入到服務器上，從而致使每一個正常訪問到的用戶都會遭到這段 XSS 腳本的攻擊。(如上述的留言評論功能)

非持久型 XSS 是對一個頁面的 URL 中的某個參數作文章，把精心構造好的惡意腳本包裝在 URL 參數重，再將這個 URL 發佈到網上，騙取用戶訪問，從而進行攻

防範：

• 對用戶的輸入作過濾 zhuanlan.zhihu.com/p/22500730

CSRF攻擊

CSRF(Cross-site request forgery), 中文名稱：跨站請求僞造

CSRF 能夠簡單理解爲：攻擊者盜用了你的身份，以你的名義發送惡意請求，容易形成我的隱私泄露以及財產安全。

防範：

• post請求
• 使用token
• 驗證碼

值得注意的是，過濾用戶輸入的內容不能阻擋 CSRF 攻擊，咱們須要作的事過濾請求的來源，由於有些請求是合法，有些是非法的，因此 CSRF 防護主要是過濾那些非法僞造的請求來源。

DDOS 攻擊

利用目標系統網絡服務功能缺陷或者直接消耗其系統資源，使得該目標系統沒法提供正常的服務。

DDoS 攻擊經過大量合法的請求佔用大量網絡資源，以達到癱瘓網絡的目的。 具體有幾種形式：

經過使網絡過載來干擾甚至阻斷正常的網絡通信； 經過向服務器提交大量請求，使服務器超負荷； 阻斷某一用戶訪問服務器； 阻斷某服務與特定系統或我的的通信。

WebSocket

WebSocket是用於瀏覽器與服務器進行全雙工通信的網絡技術。

現不少網站爲了實現即時通信，所用的技術都是輪詢(polling)。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，而後由服務器返回最新的數據給客服端的瀏覽器，這種方式有一個很大的弊端，就是會佔用不少的帶寬。

使用WebSocket，瀏覽器和服務器只須要要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道，二者之間就直接能夠數據互相傳送。並且它爲咱們實現即時服務帶來了兩大好處：

• 節省資源：互相溝通的Header是很小的-大概只有 2 Bytes。
• 推送信息：不須要客戶端請求，服務器能夠主動傳送數據給客戶端。

參考：segmentfault.com/a/119000000…

eventloop

（1）全部同步任務都在主線程上執行，造成一個執行棧（execution context stack）。

（2）主線程以外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。

（3）一旦"執行棧"中的全部同步任務執行完畢，系統就會讀取"任務隊列"，看看裏面有哪些事件。那些對應的異步任務，因而結束等待狀態，進入執行棧，開始執行。

（4）主線程不斷重複上面的第三步。

宏任務：script，setTimeout，setImmediate，promise中的executor

微任務：promise.then，process.nextTick

process.nextTick優先級高於Promise.then

www.ruanyifeng.com/blog/2014/1… juejin.im/post/59e85e…

從URL輸入到頁面展示到底發生什麼

• DNS 解析:將域名解析成 IP 地址
• TCP 鏈接：TCP 三次握手
• 發送 HTTP 請求
• 服務器處理請求並返回 HTTP 報文
• 瀏覽器解析渲染頁面
• 斷開鏈接：TCP 四次揮手

TCP 三次握手結束後，開始發送 HTTP 請求報文。 請求報文由請求行（request line）、請求頭（header）、請求體

1.請求行包含請求方法、URL、協議版本 2.請求頭包含請求的附加信息，由關鍵字/值對組成，每行一對，關鍵字和值用英文冒號「:」分隔。 好比：Host，表示主機名，虛擬主機；Connection,HTTP/1.1 增長的，使用 keepalive，即持久鏈接，一個鏈接能夠發多個請求；User-Agent，請求發出者，兼容性以及定製化需求。

3.請求體，能夠承載多個請求參數的數據，包含回車符、換行符和請求數據，並非全部請求都具備請求數據

首先瀏覽器發送過來的請求先通過控制器，控制器進行邏輯處理和請求分發，接着會調用模型，這一階段模型會獲取 redis db 以及 MySQL 的數據，獲取數據後將渲染好的頁面，響應信息會以響應報文的形式返回給客戶端，最後瀏覽器經過渲染引擎將網頁呈如今用戶面前。

• 根據 HTML 解析出 DOM 樹
• 根據 CSS 解析生成 CSS 規則樹
• 結合 DOM 樹和 CSS 規則樹，生成渲染樹
• 根據渲染樹計算每個節點的信息
• 根據計算好的信息繪製頁面

當數據傳送完畢，須要斷開 tcp 鏈接，此時發起 tcp 四次揮手。

juejin.im/post/5bf3ad…

頁面性能

csspod.com/frontend-pe…