根據訪問屬性進行差異化數據加載

判斷用戶是否第一次訪問頁面，先不說怎么做，想想什么場景下會用到？

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

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

1. 需要服務器協助，而很多時候前端對服務器的控制為 0
2. cookie在每次網頁請求的時候都會附帶，浪費 （當然，可以在用戶訪問一次之后清理這個 cookie，比如服務器端設置 session 值，不過又增加了后端的邏輯負擔，而且不靠譜）
3. 如果用戶禁用了 cookie 呢？

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

》如何判斷用戶是否為第一次訪問頁面

當頁面加載的時候會觸發 onload 事件，完了之后觸發 pageShow 事件，pageShow 事件是頁面每次加載都會觸發的，而 onload 不然。默認情況下，瀏覽器會緩存當前訪問的頁面（隱私模式除外，特殊處理，也會緩存，退出隱私模式時，緩存的所有內容全部刪除），當用戶點擊前進或者后退按鈕時，瀏覽器會從緩存中獲取內容，這個時候 onload 事件是不會觸發的。

可以這么說：

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

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

》差異化加載

var body = document.body;
body.onpageshow = function(evt){
  if(evt.persisted){
    // 如果從緩存加載，該干啥干啥
    doSomething();
  } else {
    // 如果用戶第一次訪問（沒有緩存），只加載主體框架
    loadMainContent();
  }
};

在 loadMainContent() 我們可以這樣干：

funtion loadMainContent(){
  // 引導用戶執行操作，操作一次加載點東西
  leadUserDoSomething();
  // 或者悄悄地緩慢的加載需要的數據
  loadDataInQuickMode();
}

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