根據通路屬性進行差異化資料加載

判斷使用者是否第一次通路頁面，先不說怎麼做，想想什麼場景下會用到？

如果我們頁面的體積過大，使用者第一次通路，會消耗大量的時間(2-5s)去下載下傳頁面所需要的資源，給使用者帶來的體驗是很不好的，尤其是移動端的使用者。如果我們可以在使用者第一次通路的時候隻加載主要内容，在這個主要内容中引導使用者做更多的加載資源的操作，一方面可以讓使用者熟悉系統，一方面也給頁面加載資源争取了巨量的時間，何樂而不為？！

我們能最快想到的方案是，使用 cookie ，伺服器根據 cookie 的屬性（如某個 Tag 的值為 1 或者 0）來判斷要給使用者呈現什麼樣的内容，這樣做有幾點不好：

需要伺服器協助，而很多時候前端對伺服器的控制為 0

cookie在每次網頁請求的時候都會附帶，浪費 （當然，可以在使用者通路一次之後清理這個 cookie，比如伺服器端設定 session 值，不過又增加了後端的邏輯負擔，而且不靠譜）

如果使用者禁用了 cookie 呢？

問題有很多，解決問題的方案也不少，針對這個問題，HTML5規範也提供了相應的事件和屬性支援。

當頁面加載的時候會觸發 onload 事件，完了之後觸發 pageShow 事件，pageShow 事件是頁面每次加載都會觸發的，而 onload 不然。預設情況下，浏覽器會緩存目前通路的頁面（隐私模式除外，特殊處理，也會緩存，退出隐私模式時，緩存的所有内容全部删除），當使用者點選前進或者後退按鈕時，浏覽器會從緩存中擷取内容，這個時候 onload 事件是不會觸發的。

可以這麼說：

如果待加載的頁面不存在于緩存中，會觸發 onload ，再觸發 pageShow

如果待加載的頁面存在于緩存中，不觸發 onload，隻觸發 pageShow

pageShow 事件對象 event 中有一個屬性值，叫做 persisted，如果這個值為 true，則為緩存資料，false，則為第一次加載。

在 <code>loadMainContent()</code> 我們可以這樣幹：

當然，通過 cookie 或者 pageshow 事件屬性判斷使用者浏覽器是否有緩存資料不是最終的解決方案，但這是一種思考模式，可以發散思維~

本文轉自Barret Lee部落格園部落格，原文連結：http://www.cnblogs.com/hustskyking/p/diff-user-load-data.html，如需轉載請自行聯系原作者