1：初次進入系統的新用戶

首次進入該系統的用戶，沒有任何的文件緩存。進入系統後加載index.html 會將所有的文件（圖片、js、css）下載下來 耗時在3.3s左右。之後進入系統 只會額外加載一些頁面的圖片，不會再加載js、css文件。

2：已經進過該系統的老用戶，且系統未更新之前

用戶本地的文件都已經被緩存（圖片、css、js），在系統更新之前，所有的文件都沒有更改，用戶再進入系統時，速度會在500ms之內，可以從下圖看到，所有的文件加載速度都是為0的。

3：已經進入過該系統的老用戶，且系統已經更新

分析:

用戶訪問系統時會下載index.html文件，此時，如果index裏引入的文件（圖片、js、css）的文件名沒有改變，客戶端（瀏覽器）會仍然從緩存中取數據。但每次叠代更新都會更改css、js，每次的改動都會導致再次打包時該文件的文件名發生改變，此時，用戶就會重新下載這個被改動的文件。如果被改動的文件的大小比較大，那麽該用戶仍然會在再次進入該系統時花費較多的時間從服務器下載該文件，但介於有很多資源並不會改變，比如引入的一些插件（包含js、css、圖片）從始至終並不會去改變的東西，那麽用戶首次進入該系統時就已經緩存，一直不需要從服務器下載。

4：關於打包

不管如何打包，系統的所有文件都會被瀏覽器下載，能做的有以下幾點。

1：縮小所有的文件（js、圖片、css）

Js/css：能復用的盡量復用，不寫冗余的代碼。（註釋，空格會在打包時自動去除進行壓縮，所以註釋可以多寫）

html：我們將所有的html都打包進了js文件，這樣可以在改變html時更改js文件名，這樣在系統更新之後，老用戶可以重新下載html，一次性下載，之後不會在從服務器下載html

針對於以上的機制，用戶在登錄系統期間，即使我們將服務器上的所有的代碼刪除掉，用戶仍然可以在系統之內正常運行，因為用戶已經下載了index頁面及這個index頁面所引入的各個文件。

5：打包測試的幾種情況

1：不將html打包進入js文件，且退出登錄時不做任何關於緩存上的處理

grunt的配置方法：

先將ngtemplete任務刪除，然後filerev（為文件提供md5值）會根據usemin配置的文件指向，將所指向的文件加上md5值，這時候所有的html裏引用的文件名會根據打包之後的名字而進行替換。

測試方法：

　　1：進入系統後，先將所有的html都點擊一次，這樣，就保證了所有的html文件都被瀏覽器所下載

　　　　此時，用戶不關閉串口，將服務器上的前端文件全部刪除，用戶仍然可以正常操作該系統。如果用戶之前有一個頁面從來沒有使用過，即沒有請求後臺拿到數據後緩存在瀏覽器內這一步操 　　　　作。將會得到一個404的頁面返回。如下圖，我在錄單頁面（正常使用）去訪問一個從來沒使用過的頁面（發車確認）就會發生404請求。

　　　　原因：html、js、css都已經被客戶端下載，客戶端可以正常使用並且訪問服務器。　　

　　2：關閉瀏覽器窗口，重新進入系統。

　　　　這時用戶是無法放到到我們的網頁的。（這裏牽涉到客戶端的一些關閉、刷新等操作對緩存的影響

）

　　　　此時會產生的緩存問題：

　　　　1：如果用戶一直處於打開窗口

先寫到這啦今天

單頁面系統的一些性能優化