前端面試題及答案 - 瀏覽器篇

這篇文章並非最全的前端面試題（沒有最全，只有更全），只是針對本身面試過程當中遇到的一些難題、容易忽略的題作一個簡單的筆記，方便後面有面試須要的小夥伴們借鑑，後續內容會不定時更新，有錯誤之處但願你們不吝指出。

1. 談談Cookie的優劣

Cookie不一樣之處：

• IE6或更低版本最多20個cookie
• IE7和以後的版本最後能夠有50個cookie。
• Firefox最多50個cookie
• chrome和Safari沒有作硬性限制

優勢：極高的擴展性和可用性

• 經過良好的編程，控制保存在cookie中的session對象的大小。
• 經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。
• 只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
• 控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

缺點：

• Cookie數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。
• 安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。
• 有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

例子
JavaScript 中，建立 cookie 以下所示：

document.cookie="username=John Doe";

還能夠爲 cookie 添加一個過時時間（以 UTC 或 GMT 時間）。默認狀況下，cookie 在瀏覽器關閉時刪除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

可使用 path 參數告訴瀏覽器 cookie 的路徑。默認狀況下，cookie 屬於當前頁面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

二、瀏覽器本地存儲 - cookie、localStorage、sessionStorage區別

相同：在本地（瀏覽器端）存儲數據
不一樣：

• localStorage只要在相同的協議、相同的主機名、相同的端口下，就能讀取/修改到同一份localStorage數據。sessionStorage比localStorage更嚴苛一點，除了協議、主機名、端口外，還要求在同一窗口（也就是瀏覽器的標籤頁）下。
• localStorage是永久存儲，除非手動刪除。
• sessionStorage當會話結束（當前頁面關閉的時候，自動銷燬）
• cookie的數據會在每一次發送http請求的時候，同時發送給服務器而localStorage、sessionStorage不會。

瞭解更多

三、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
這道題能夠說是不少都會被問到的，網上答案五花八門，不過都接近，更詳細的請看
簡單總結：

• 當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。
• 瀏覽器與遠程Web服務器經過TCP三次握手協商來創建一個TCP/IP鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
• 一旦TCP/IP鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。
• 此時，Web服務器提供資源服務，客戶端開始下載資源。瀏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而javascript又能夠根據DOM API操做DOM
• 前端面試題及答案 - HTML篇
• 前端面試題及答案 - CSS篇
• 前端面試題及答案 - JS篇
• 前端面試題及答案 - 性能優化篇