特性
cookie
localstorage
sessionstorage
indexeddb
資料生命週期
一般由伺服器生成，可以設定過期時間
除非被清理，否則一直存在
頁面關閉就清理
除非被清理，否則一直存在
資料儲存大小
4k5m
5m無限
與服務端通訊
每次都會攜帶在 header，中，對於請求效能影響
不參與不參與
不參與補充：cookie 原本並不是用來儲存的，而是用來與服務端通訊的，需要訪問請自行封裝 api。
而 localstorage 則自帶 getitem 和 setitem 方法，使用很方便。
localstorage 注意點：
localstorage 只能存字串，訪問 json 資料需配合 json.stringify() 和 json.parse()
遇上禁用 setitem 的瀏覽器，需要使用 try...catch 捕獲異常
九種跨域方式實現原理
如何跨域我們已經明白了，如果這樣問：瀏覽器沒有同源策略會有什麼危險？是不是有點瞬間懵逼？
下面是摘選的事例，參考：ajax跨域訪問被禁止的原因
假設有乙個黑客叫做小黑，他從網上抓取了一堆美女圖做了乙個**，每日訪問量爆表。session 是基於 cookie 實現的。cookie 儲存在客戶端瀏覽器中，而 session 儲存在伺服器上。cookie 機制是通過檢查客戶身上的「通行證」來確定客戶身份的話，那麼 session 機制就是通過檢查伺服器上的「客戶明細表」來確認客戶身份。session 相當於程式在伺服器上建立的乙份客戶檔案，客戶來訪的時候只需要查詢客戶檔案表就可以了。為了維護**執行，小黑掛了一張收款碼，覺得**不錯的可以適當資助一點，可是無奈伸手黨太多，小黑的**入不敷出。
於是他非常生氣的在網頁中寫了一段js**，使用ajax向**發起登陸請求，因為很多數人都訪問過**，所以電腦中存有**的cookie，不需要輸入賬號密碼直接就自動登入了，然後小黑在ajax**函式中解析了**返回的資料，得到了很多人的隱私資訊，轉手一賣，小黑的**終於盈利了。
如果跨域也可以傳送ajax請求的話，小黑就真的獲取到了使用者的隱私並成功獲利了！！！
cookie 和 session 的區別：
存在的位置：
cookie 存在於客戶端，臨時資料夾中；session 存在於伺服器的記憶體中，乙個 session 域物件為乙個使用者瀏覽器服務
安全性cookie 是以明文的方式存放在客戶端的，安全性低，可以通過乙個加密演算法進行加密後存放；session 存放於伺服器的記憶體中，所以安全性好
生命週期(以 20 分鐘為例)
cookie 的生命週期是累計的，從建立時，就開始計時，20 分鐘後 cookie 生命週期結束；
session 的生命週期是間隔的，從建立時，開始計時如在 20 分鐘，沒有訪問 session，那麼 session 生命週期被銷毀。但是，如果在 20 分鐘內（如在第 19 分鐘時）訪問過 session，那麼，將重新計算 session 的生命週期。關機會造成 session 生命週期的結束，但是對 cookie 沒有影響
訪問範圍
cookie 為多個使用者瀏覽器共享；session 為乙個使用者瀏覽器獨享
好文推薦：徹底理解 cookie、session、token
dns 網域名稱解析（網域名稱解析成ip位址，走utp協議，因此不會有握手過程）：瀏覽器將 url 解析出相對應的伺服器的 ip 位址（1. 本地瀏覽器的 dns 快取中查詢 2. 再向系統dns快取傳送查詢請求 3. 再向路由器dns快取 4. 網路運營商dns快取 5. 遞迴搜尋），並從 url 中解析出埠號
瀏覽器與目標伺服器建立一條 tcp 連線（三次握手）
瀏覽器向伺服器傳送一條 http 請求報文
伺服器返回給瀏覽器一條 http 響應報文
瀏覽器進行渲染
關閉 tcp 連線（四次揮手）
html 解析出 dom tree
css 解析出 style rules
兩者關聯生成 render tree
layout（布局）根據 render tree 計算每個節點的資訊
painting 根據計算好的資訊進行渲染整個頁面
html 文件結構層次盡量少，最好不深於 6 層
指令碼盡量放後邊，避免組織頁面載入
少量首屏樣式可以放在便簽內
樣式結構層次盡量簡單
指令碼減少 dom 操作，減少回流，盡量快取訪問 dom 的樣式資訊
儘量減少 js 修改樣式，可以通過修改 class 名的方式解決
減少 dom 查詢，快取 dom 查詢結果
動畫在螢幕外或頁面滾動時，盡量停止
你需要知道的http常識
可能是全網最全的http面試答案
如何優雅的談論http／1.0／1.1／2.0
http1.1 是當前使用最為廣泛的http協議
http2.0 和 http1.x 相比
https 與 http 相比
https 介紹：https在傳輸資料之前需要客戶端（瀏覽器）與服務端（**）之間進行一次握手，在握手過程中將確立雙方加密傳輸資料的密碼資訊。tls/ssl協議不僅僅是一套加密傳輸的協議，tls/ssl中使用了非對稱加密，對稱加密以及hash演算法。
握手過程的簡單描述如下：
1.瀏覽器將自己支援的一套加密規則傳送給**。這裡瀏覽器與**互相傳送加密的握手訊息並驗證，目的是為了保證雙方都獲得了一致的密碼，並且可以正常的加密解密資料。其中非對稱加密演算法用於在握手過程中加密生成的密碼，對稱加密演算法用於對真正傳輸的資料進行加密，而hash演算法用於驗證資料的完整性。由於瀏覽器生成的密碼是整個資料加密的關鍵，因此在傳輸的時候使用了非對稱加密演算法對其加密。非對稱加密演算法會生成公鑰和私鑰，公鑰只能用於加密資料，因此可以隨意傳輸，而**的私鑰用於對資料進行解密，所以**都會非常小心的保管自己的私鑰，防止洩漏。tls握手過程中如果有任何錯誤，都會使加密連線斷開，從而阻止了隱私資訊的傳輸。正是由於https非常的安全，攻擊者無法從中找到下手的地方，於是更多的是採用了假證書的手法來欺騙客戶端，從而獲取明文的資訊。2.**從中選出一組加密演算法與hash演算法，並將自己的身份資訊以證書的形式發回給瀏覽器。證書裡面包含了**位址，加密公鑰，以及證書的頒發機構等資訊。
3.獲得**證書之後瀏覽器要做以下工作：
a. 驗證證書的合法性（頒發證書的機構是否合法，證書中包含的**位址是否與正在訪問的位址一致等），如果證書受信任，則瀏覽器欄裡面會顯示乙個小鎖頭，否則會給出證書不受信的提示。
b. 如果證書受信任，或者是使用者接受了不受信的證書，瀏覽器會生成一串隨機數的密碼，並用證書中提供的公鑰加密。
c. 使用約定好的hash計算握手訊息，並使用生成的隨機數對訊息進行加密，最後將之前生成的所有資訊傳送給**。
4.**接收瀏覽器發來的資料之後要做以下的操作：
a. 使用自己的私鑰將資訊解密取出密碼，使用密碼解密瀏覽器發來的握手訊息，並驗證hash是否與瀏覽器發來的一致。
b. 使用密碼加密一段握手訊息，傳送給瀏覽器。
5.瀏覽器解密並計算握手訊息的hash，如果與服務端發來的hash一致，此時握手過程結束，之後所有的通訊資料將由之前瀏覽器生成的隨機密碼並利用對稱加密演算法進行加密。
a. 瀏覽器請求資源時首先命中資源的expires 和 cache-control，expires 受限於本地時間，如果修改了本地時間，可能會造成快取失效，可以通過cache-control: max-age指定最大生命週期，狀態仍然返回200，但不會請求資料，在瀏覽器中能明顯看到from cache字樣。
b. 強快取失效，進入協商快取階段，首先驗證etagetag可以保證每乙個資源是唯一的，資源變化都會導致etag變化。伺服器根據客戶端上送的if-none-match值來判斷是否命中快取。
c. 協商快取last-modify/if-modify-since階段，客戶端第一次請求資源時，服務服返回的header中會加上last-modify，last-modify是乙個時間標識該資源的最後修改時間。再次請求該資源時，request的請求頭中會包含if-modify-since，該值為快取之前返回的last-modify。伺服器收到if-modify-since後，根據資源的最後修改時間判斷是否命中快取。
2xx（成功）表示成功處理了請求的狀態碼
3xx（重定向）表示要完成請求，需要進一步操作；通常，這些狀態**用來重定向
4xx（請求錯誤）這些狀態碼表示請求可能出錯，妨礙了伺服器的處理
5xx（伺服器錯誤）這些狀態碼表示伺服器在嘗試處理請求時發生內部錯誤。這些錯誤可能是伺服器本身的錯誤，而不是請求出錯
嗨，送你一張web效能優化地圖
2019前端面試系列——css面試題
2019前端面試系列——js面試題
2019前端面試系列——js高頻手寫**題
2019前端面試系列——vue面試題
2019前端面試系列——http、瀏覽器面試題
前端面試 HTTP
1 http的介紹 http協議是hyper text transfer protocol 超文字傳輸協議 的縮寫,負責 web 伺服器與 web 瀏覽器 客戶端 之間的通訊，包括從 web 客戶端 瀏覽器 向 web 伺服器傳送請求，並從 web 伺服器向 web 客戶端返回內容 網頁 http協...
2019前端面試總結
作為乙個程式猿，跳槽，那是比較正常滴，最近在準備裸辭，把面試過程中問到的面試題記錄下來，希望能夠幫助大家找到乙個理想中的工作。一定要記得和 hr 約好具體的時間 一定要記得和 hr 約好具體的時間 一定要記得和 hr 約好具體的時間 重要的事請說三遍，否則，可能和我一樣在大晚上刷劇的時候來場面試 嗯...
前端面試之HTTP
在瀏覽器和伺服器之間，有許多計算機和其他裝置 了http訊息。簡而言之，他們中間的部分就是 http是簡單的 http是可擴充套件的 http是無狀態 有會話的 http是無狀態的 在同乙個連線中，兩個執行成功的請求之間是沒有關係的。這就帶來了乙個問題，使用者沒有辦法在同乙個 中進行連續的互動，比如...