部落格說明
1、http1.1 是當前使用最為廣泛的http協議
http2.0 和 http1.x 相比
https 與 http 相比
2、https 介紹
https在傳輸資料之前需要客戶端（瀏覽器）與服務端（**）之間進行一次握手，在握手過程中將確立雙方加密傳輸資料的密碼資訊。tls/ssl協議不僅僅是一套加密傳輸的協議，tls/ssl中使用了非對稱加密，對稱加密以及hash演算法
3、https握手過程的簡單描述如下：
1、瀏覽器將自己支援的一套加密規則傳送給**。
a. 驗證證書的合法性（頒發證書的機構是否合法，證書中包含的**位址是否與正在訪問的位址一致等），如果證書受信任，則瀏覽器欄裡面會顯示乙個小鎖頭，否則會給出證書不受信的提示。
b. 如果證書受信任，或者是使用者接受了不受信的證書，瀏覽器會生成一串隨機數的密碼，並用證書中提供的公鑰加密。
c. 使用約定好的hash計算握手訊息，並使用生成的隨機數對訊息進行加密，最後將之前生成的所有資訊傳送給**。
a. 使用自己的私鑰將資訊解密取出密碼，使用密碼解密瀏覽器發來的握手訊息，並驗證hash是否與瀏覽器發來的一致。
b. 使用密碼加密一段握手訊息，傳送給瀏覽器。
5、瀏覽器解密並計算握手訊息的hash，如果與服務端發來的hash一致，此時握手過程結束，之後所有的通訊資料將由之前瀏覽器生成的隨機密碼並利用對稱加密演算法進行加密。
4、cookie和session的機制是什麼？有什麼區別？
session 是基於 cookie 實現的。cookie 儲存在客戶端瀏覽器中，而 session 儲存在伺服器上。cookie 機制是通過檢查客戶身上的「通行證」來確定客戶身份的話，那麼 session 機制就是通過檢查伺服器上的「客戶明細表」來確認客戶身份。session 相當於程式在伺服器上建立的乙份客戶檔案，客戶來訪的時候只需要查詢客戶檔案表就可以了。
cookie 和 session 的區別：
存在的位置： cookie 存在於客戶端，臨時資料夾中；session 存在於伺服器的記憶體中，乙個 session 域物件為乙個使用者瀏覽器服務
安全性 cookie 是以明文的方式存放在客戶端的，安全性低，可以通過乙個加密演算法進行加密後存放；session 存放於伺服器的記憶體中，所以安全性好
生命週期(以 20 分鐘為例) cookie 的生命週期是累計的，從建立時，就開始計時，20 分鐘後 cookie 生命週期結束； session 的生命週期是間隔的，從建立時，開始計時如在 20 分鐘，沒有訪問 session，那麼 session 生命週期被銷毀。但是，如果在 20 分鐘內（如在第 19 分鐘時）訪問過 session，那麼，將重新計算 session 的生命週期。關機會造成 session 生命週期的結束，但是對 cookie 沒有影響
訪問範圍 cookie 為多個使用者瀏覽器共享；session 為乙個使用者瀏覽器獨享
5、瀏覽器的儲存
特性cookie
localstorage
sessionstorage
indexeddb
資料生命週期
一般由伺服器生成，可以設定過期時間
除非被清理，否則一直存在
頁面關閉就清理
除非被清理，否則一直存在
資料儲存大小
4k5m
5m無限
與服務端通訊
每次都會攜帶在 header，中，對於請求效能影響
不參與不參與
不參與
補充：cookie 原本並不是用來儲存的，而是用來與服務端通訊的，需要訪問請自行封裝 api。 而 localstorage 則自帶 getitem 和 setitem 方法，使用很方便。
localstorage 注意點：
localstorage 只能存字串，訪問 json 資料需配合 json.stringify() 和 json.parse()
遇上禁用 setitem 的瀏覽器，需要使用 try...catch 捕獲異常
6、輸入url發生什麼？
dns 網域名稱解析（網域名稱解析成ip位址，走utp協議，因此不會有握手過程）：瀏覽器將 url 解析出相對應的伺服器的 ip 位址（1. 本地瀏覽器的 dns 快取中查詢 2. 再向系統dns快取傳送查詢請求 3. 再向路由器dns快取 4. 網路運營商dns快取 5. 遞迴搜尋），並從 url 中解析出埠號
瀏覽器與目標伺服器建立一條 tcp 連線（三次握手）
瀏覽器向伺服器傳送一條 http 請求報文
伺服器返回給瀏覽器一條 http 響應報文
瀏覽器進行渲染
關閉 tcp 連線（四次揮手）
7、瀏覽器渲染的步驟
html 解析出 dom tree
css 解析出 style rules
兩者關聯生成 render tree
layout（布局）根據 render tree 計算每個節點的資訊
painting 根據計算好的資訊進行渲染整個頁面
8、什麼是同源策略及其限制內容？
同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到xss、csrf等攻擊。所謂同源是指"協議+網域名稱+埠"三者相同，即便兩個不同的網域名稱指向同乙個ip位址，也非同源。
9、同源策略限制內容有：
但是有三個標籤是允許跨域載入資源：
10、跨域解決方案
1.jsonp
利用標籤沒有跨域限制的漏洞，網頁可以得到從其他**動態產生的 json 資料。jsonp請求一定需要對方的伺服器做支援才可以。
2.cors
cors 需要瀏覽器和後端同時支援。ie 8 和 9 需要通過 xdomainrequest 來實現。
瀏覽器會自動進行 cors 通訊，實現 cors 通訊的關鍵是後端。只要後端實現了 cors，就實現了跨域。
3、postmessage
postmessage()方法允許來自不同源的指令碼採用非同步方式進行有限的通訊，可以實現跨文字檔、多視窗、跨域訊息傳遞。
4、websocket
websocket 是一種雙向通訊協議，在建立連線之後，websocket 的 server 與 client 都能主動向對方傳送或接收資料
5.nginx反向**
實現原理類似於node中介軟體**，需要你搭建乙個中轉nginx伺服器，用於**請求。
6、iframe
11、頁面渲染優化
html 文件結構層次盡量少，最好不深於 6 層
指令碼盡量放後邊，避免組織頁面載入
少量首屏樣式可以放在便簽內
樣式結構層次盡量簡單
指令碼減少 dom 操作，減少回流，盡量快取訪問 dom 的樣式資訊
儘量減少 js 修改樣式，可以通過修改 class 名的方式解決
減少 dom 查詢，快取 dom 查詢結果
動畫在螢幕外或頁面滾動時，盡量停止
12、強制快取和協商快取
13、get 和 post 請求的區別
14、介紹下304過程
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後，根據資源的最後修改時間判斷是否命中快取。
15、http 狀態碼
2xx（成功）表示成功處理了請求的狀態碼
3xx（重定向）表示要完成請求，需要進一步操作；通常，這些狀態**用來重定向
4xx（請求錯誤）這些狀態碼表示請求可能出錯，妨礙了伺服器的處理
5xx（伺服器錯誤）這些狀態碼表示伺服器在嘗試處理請求時發生內部錯誤。這些錯誤可能是伺服器本身的錯誤，而不是請求出錯
感謝
萬能的網路以及勤勞的自己，個人部落格，github
2020前端面試題
2020年 疫情影響著經濟，好多企業都裁員了，我所在的公司也不例外。所幸我不是其中之一。但是，金三銀四，即使不想換工作，也要評估一下自己在市場的價值。以下就是我 面試中遇到的一些問題 關於vue 1.vue元件的懶載入的原理？2.vue的元件通訊方式有哪些？3.你對mvvm的原理的理解 4.next...
2020前端面試題
以下是我自己面試時遇到的一些問題，react vue相關的另有專題。先列題目，答案慢慢更新 1.什麼是跨域？如何解決跨域？2.介紹下深拷貝和淺拷貝。深拷貝 增加乙個指標並申請了乙個新記憶體，新記憶體中存放拷貝的物件。兩者互不影響。順便講一下淺比較和深比較 3.原生js中,const定義的變數能否被修...
2020前端面試題（一）
題目二 結語 在實際工作中我們也應需要保持有一顆居安思危的心，雖然有關演算法模組的技術著實很難有用武之地，但是這並不影響我們去見識並學習一些非演算法部分的面試題，從而做到知己知彼，方可心中不虛。寫乙個 mysetinterval fn,a,b 每次間隔 a,a b,a 2b,a nb 的時間，然後寫...