知識要點：瀏覽器緩存機制,資源下載序,css渲染與js執行順序
當瀏覽器第一次請求某個URL時，順利訪問的話，服務器返回狀態200的狀態,
同時會返回給瀏覽器一些Headers集合，例如set-cookie,Last-Mondified,Etag等等
下面重點說明Last-Mondified與Etag,即瀏覽器緩存.
HTTP/1.x 200 OK
Date:Mon, 05 Jan 2015 15:32:11 GMT
ETag:"1815c-0-451b46c0"
Expires:Thu,02 Jan 2025 15:32:11 GMT
Last-Modified:Thu,28 Sep 2006 03:51:28 GMT
Server:Apache
Last-Mondified: 最後一次修改時間
Etag: 資源的狀態唯一標識(每個資源的etag都不同,例如img,js,css。。。。)
Expires: 指定資源在瀏覽器緩存中的過期時間 (需要在服務端設定)
瀏覽器接收到服務器這些信息後，就會將資源緩存在本地目錄中,同時保存文件的上述信息.
如果有set-cookie的話，且瀏覽器未禁用cookie,則會保存cookie信息,當cookie過期時間大於當前時間時，瀏覽器會將cookie保存在本地硬盤.
下次發送時會同header頭一起發送給服務器，當然條件是相同域，path約束相符等等情況下.
第二次請求時，根據 HTTP 協議的規定，瀏覽器會向服務器傳送If-Modified-Since 與 If-None-Match 報頭,
這兩個報頭實際上是第一次請求時服務器返回的Last-Modified,Etag.發送這兩個報頭目地是詢問服務器，該資源在時間內有沒有被修改過.
如果該資源未被修改，則服務器會直接返回HTTP 304 （Not Changed.）狀態碼,內容爲空,此時不會下載資源，瀏覽器則自動從緩存目錄中讀取資源.
使用Last-Modified/Etag可以減少傳輸成本，但不會減少http請求
如果給文件加上關於過期時間(Expires)的header報文,這樣瀏覽器就會先檢查緩存中的文件，如果沒有過期，就直接使用緩存中的文件,從而不會發送http請求.
前面描述的只是一些普通的瀏覽器緩存狀態，在實際應用中，如頁面跳轉（點擊頁面鏈接跳轉，window.open，在地址欄敲回車，刷新頁面）等操作，會有一些區別
普通頁面跳轉包括鏈接點擊跳轉，用js腳本打開新頁面（window.open），iframe時
第一次請求服務器返回200,並返回資源的Last-Modified/Etag,
第二次請求時，瀏覽器發送上次接收的Last-Modified/Etag,服務器直接返回304(HTTP/1.x304 Not Modified)
如果設置了Expires,且未過期，瀏覽器直接從緩存目錄中讀取，不發送請求給服務器
F5刷新時
與普通請求區別在於，即便資源設置了Expires且未過期，瀏覽器也會發送相應請求,然後根據服務器返回狀態來決定是否下載資源.
Ctrl+F5刷新時與無緩存時效果一樣，服務器返回200(資源全部重新下載).