面試題總結一

按失效策略分類：（強制快取 > 對比快取）

了解詳細可參考：

expires（http 1.0 的字段，在響應訊息頭中，設定這個字段之後，就可以告訴瀏覽器，在未過期之前不需要再次請求。）：

表示快取到期時間，是乙個絕對的時間 (當前時間+快取時間)，如：

expires: thu, 10 nov 2017 08:45:11 gmt

缺點：

1、由於是絕對時間，使用者可能會將客戶端本地的時間進行修改，而導致瀏覽器判斷快取失效，重新請求該資源。此外，即使不考慮自信修改，時差或者誤差等因素也可能造成客戶端與服務端的時間不一致，致使快取失效。

2、寫法太複雜了。表示時間的字串多個空格，少個字母，都會導致非法屬性從而設定失效。

cache-control（http 1.1 的字段，相當於expires公升級版，表示資源快取的最大有效時間，在該時間內，客戶端不需要向伺服器傳送請求

）：

這兩者的區別就是前者是絕對時間，而後者是相對時間。如：

cache-control: max-age=2592000

cache-control 字段完整的引數列表可以檢視：mdn

last-modified & if-modified-since（瀏覽器會將值和內容記錄在快取資料庫中，下一次請求相同資源時，瀏覽器會從快取中找出「不確定是否過期的」快取，在請求頭中將上次的 last-modified 的值寫入到請求頭的 if-modified-since 字段。利用值與字段進行對比：相等則表示未修改，響應304；反之則表示修改了，響應200，返回資料）：

伺服器通過 last-modified 字段告知客戶端，資源最後一次被修改的時間，如：

last-modified: mon, 10 nov 2018 09:10:11 gmt

缺點：

1、如果資源更新的速度是秒以下單位，那麼該快取是不能被使用的，因為它的時間單位最低是秒。

2、如果檔案是通過伺服器動態生成的，那麼該方法的更新時間永遠是生成的時間，儘管檔案可能沒有變化，所以起不到快取的作用。

etag & if-none-match（為解決last-modified & if-modified-since缺陷，出現的一組新字段 etag 和 if-none-match）：

etag 儲存的是檔案的特殊標識(一般都是 hash 生成的)，伺服器儲存著檔案的 etag 字段。之後的流程和 last-modified 一致，只是 last-modified 欄位和它所表示的更新時間改變成了 etag 欄位和它所表示的檔案 hash，把 if-modified-since 變成了 if-none-match。伺服器同樣進行比較，命中返回 304, 不命中返回新資源和 200。

https 比不需要加密的 http 要慢得多：

http 耗時 = tcp握手

https 耗時 = tcp握手 + ssl握手（https 也叫 ssl 延遲）

tcp 握手（22毫秒）：客戶端首先傳送syn資料報，然後伺服器傳送syn+ack資料報，最後客戶端傳送ack資料報，接下來就可以傳送內容了。這三個資料報的傳送過程，叫做tcp握手。

ssl 握手（64毫秒）

由此可見在建立連線的階段，htpps 請求比 http 請求要長3倍的時間，具體數字取決於cpu的快慢。如果是對安全性要求不高的情況下，為了提高網頁效能，建議不要採用保密強度很高的數字證書，不然會導致ssl握手的耗時延長。

解決方法：

1、頭資訊採用文字格式（ascii編碼），資料體可以是文字也可以是二進位制；

2、執行緒阻塞，同一時間同一網域名稱的請求有數量限制，超過限制請求會被阻塞；

3、瀏覽器與伺服器只能保持短暫的連線，瀏覽器每次請求都需要與伺服器建立 tcp 連線（ tcp 連線需三次握手導致成本高），伺服器完成請求後斷開tcp連線，伺服器不跟蹤每個客戶也不記錄歷史請求。（解決方法：新增頭資訊，connection: keep-alive）

http2（現階段必須使用https，保護**的資料安全

）：

1、頭資訊和資料體都採用二進位制格式；（解析更高效）

2、完全多路復用，可同時傳送多個請求或回應，不需要按照順序一一對應，避免阻塞。（解決阻塞問題，與 http1 最重要的區別）

3、報頭壓縮，對於相同的頭部，不需再通過請求傳送，只需傳送一次；（降低開銷）

4、伺服器推送，提公升首屏載入速度，允許 web 伺服器在收到瀏覽器的請求之前，提前傳送一些資源給客戶端。

dom 事件流有三個階段：

事件捕捉：事件從最頂層元素開始，逐次進入dom內部，最後到達目標元素，依次執行繫結在其上的事件；

事件目標：檢測機制到達目標元素，按事件註冊順序執行繫結在目標元素上的事件；

事件冒泡：事件從最裡層（目標元素）開始，往父級、body、document、window，逐級向上延申；

var：函式級作用域，定義變數，子域可訪問父域，父域不可訪問子域；

// 一秒後 輸出三次：3
for( var i = 0; i < 3; i++ ) , 1000)
}

let：塊級作用域，定義變數，外界不可訪問；

// 一秒後 輸出三次，分別是：0 1 2
for( let i = 0; i < 3; i++ ) , 1000)
}

const：常量，不可被改變，改變即報錯；

// 輸出一次：0
// i++ 時會報錯
// 常量值不可改變
for( const i = 0; i < 3; i++ )

面試題總結一

面試題總結（一）

面試題總結（一）

面試題總結 html面試題）

面試題總結一

面試題總結（一）

面試題總結（一）

面試題總結 html面試題）

相關推薦