HTTP筆試部分 · 前端進階指南與面試(持續更新)

# HTTP筆試部分點擊關注本[公眾號](http://www.hmoore.net/book/dsh225/javascript_vue_css/edit#_118)獲取文檔最新更新,并可以領取配套于本指南的《**前端面試手冊**》以及**最標準的簡歷模板**. [TOC] > 此部分是我早前在網上搜集的，已無法找出出處 ## 緩存題假設我們有一個HTML頁面，如下: ~~~  <!DOCTYPE html> http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>page頁</title> </head> <body> <img src="images/head.png" /> <a href="page.html">重新訪問page頁</a> </body> </html> ~~~ 加載此頁面后，會獲取圖片，圖片請求返回的響應頭為 ~~~ HTTP/1.1 200 OK Cache-Control: no-cache Content-Type: image/png Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT Accept-Ranges: bytes Date: Thu, 10 Nov 2016 02:48:50 GMT Content-Length: 3534 ~~~ ### 問題一：當點擊“重新訪問 page 頁”鏈接重新加載該頁面后， head.png 如何二次加載？響應頭的`no-cache`表達的是可以緩存，但是每次都需要去服務器確認緩存資源的新鮮度，而不是不緩存，這是個坑。 ~~~ Cache-Control: no-cache ~~~ 如果不跳這個坑的話，這個問題就簡單了：圖片會發出請求頭帶上`If-Modified-Since: Tue, 08 Nov 2016 06:59:00 GMT`，服務器確認新鮮度，如果客戶端資源是新鮮資源則返回304,否則返回200并帶上新的圖片資源。 ### 問題二：如果將上述信息中的 Cache-Control 設置為 private，那么結果又會如何呢？當`Cache-Control: private`之后，說明一個問題，響應頭沒有給到任何緩存策略，這個時候客戶端會怎么處理？現在瀏覽器會有一個處理方法，當響應頭沒有任何緩存策略的時候有一套自己的處理機制，即`Expires = 當前時間(Date - Last-Modified) * 10%`,簡單理解就是響應頭的Date時間與Last-Modified的時間差的十分之一作為緩存的過期時間。按照這個處理流程，如果馬上重新加載，則會直接讀取本地緩存內容，無需向服務器請求。 * * * ## ajax和axios、fetch的區別 https://www.jianshu.com/p/8bc48f8fde75 ## 公眾號想要實時關注筆者最新的文章和最新的文檔更新請關注公眾號**程序員面試官**,后續的文章會優先在公眾號更新. **簡歷模板**:關注公眾號回復「模板」獲取《**前端面試手冊**》:配套于本指南的突擊手冊,關注公眾號回復「fed」獲取 ![2019-08-12-03-18-41](https://xiaomuzhu-image.oss-cn-beijing.aliyuncs.com/d846f65d5025c4b6c4619662a0669503.png)