頁面停留時間（time on page）簡稱 tp，是**分析中很常見的乙個指標，用於反映使用者在某些頁面上停留時間的長短，傳統的tp統計方法會存在一定的統計盲區，比如無法監控單頁應用，沒有考慮使用者切換tab、最小化視窗等操作場景。基於上述背景，重新調研和實現了精確統計頁面停留時長的方案，需要 相容單頁應用和多頁應用，並且不耦合或入侵業務**。
針對哪些應用？
對於單頁應用內部的跳轉可以轉化為兩個問題：
首先確定一下需求：
如何監聽頁面的進入和離開
對於常規頁面的 首次載入、頁面關閉、重新整理 等操作都可以通過 window.onload 和window.onbeforeunload 事件來監聽頁面進入和離開，瀏覽器前進後退可以通過 pageshow 和 pagehide 處理。
首先，進入頁面的時候，瀏覽器會呼叫onload事件,瀏覽器關閉時，瀏覽器會呼叫beforeunload事件，可以從這兩個事件入手。
但是這裡有幾個問題，那就是瀏覽器重新整理的時候，也會呼叫beforeunload,還有就是如何知道使用者在其它標籤頁也開啟了網頁呢？
有什麼可以記錄瀏覽器是否重新整理呢？這時候我想到了sessionstorage。
sessionstorage，用於臨時儲存同一視窗(或標籤頁)的資料，在關閉視窗或標籤頁之後將會刪除這些資料。也就是說資料儲存在sessionstorage中，在當前標籤頁會一直存在。首先在初次進入頁面時在onload事件中往sessionstorage存入乙個標識
window.
addeventlistener
("load"
,function()
sessionstorage.
setitem
("flag"
,true);
})
在本地快取中，localstorage中的資料是整個**都可以共享的，也就是具有相同網域名稱、ip的**，localstorage裡的資料在不同標籤頁中也是相同的。
這時候可以往localstorage裡存乙個計數器，當使用者進入頁面時，計數器加1，當使用者離開頁面時計數器減1。當計數器為0時，標誌頁面全部關閉，此時可以記錄頁面關閉的結束時間。同時訪問**的開始時間也存到localstorage中。
window.
addeventlistener
("load"
,function()
localstorage.
setitem
("starttime"
,nowtime)
sessionstorage.
setitem
("flag"
,true);
})window.
addeventlistener
("beforeunload"
,function()
})function
getnowtime()
要解決這個問題，可以往localstorage裡存乙個重新整理時間，每30秒更新這個重新整理時間，使用者載入**時，讀取這個重新整理時間，如果當前時間和這個重新整理時間相差大於1分鐘，說明資料有斷層，此時應該拋棄這一條記錄資料。
window.
addeventlistener
("load"
,function()
localstorage.
setitem
("starttime"
,nowtime)
localstorage.
setitem
("refreshtime"
,nowtime)
sessionstorage.
setitem
("flag"
,true);
})window.
addeventlistener
("beforeunload"
,function()
})function
getnowtime()
function
comparerefreshtime()
function
refreshtime()
可以通過 page visibility api 以及在 window 上宣告 onblur/onfocus 事件來處理。
page visibility api
乙個網頁的可見狀態可以通過 page visibility api 獲取，比如當使用者 切換瀏覽器tab、最小化視窗、電腦睡眠 的時候，系統api會派發乙個當前頁面可見狀態變化的 visibilitychange 事件，然後在事件繫結函式中通過 document.hidden 或者 document.visibilitystate 讀取當前狀態。
document.
addeventlistener
('visibilitychange'
,function
(event)
)
可以通過 page visibility api 以及在 window 上宣告 onblur/onfocus 事件來處理。對於pc端來說，除了監聽上述相關事件外，還可以考慮監聽滑鼠行為，比如當一定時間內滑鼠沒有操作則認為使用者處於非活躍狀態。
什麼時機上報資料
頁面離開時上報
對於頁面重新整理或者關閉視窗觸發的操作可能會造成資料丟失
下次開啟頁面時上報
會丟失歷史訪問記錄中的最後乙個頁面資料
以上就是統計使用者停留**時長思路的全部**。
對於頁面停留時長的定義可能在不同場景會有差異，比如內部業務系統或者oa系統，產品可能更關心使用者在頁面的活躍時長；而對於資訊型別的產品，頁面可見時長會更有價值。單一的資料對業務分析是有限的，所以在具體的**實過程中我們會把停留時長分三個指標，這樣能更好的幫助產品/運營分析。
是否在當前頁面api
目前頁面可見性api有兩個屬性，乙個事件，如下 我寫了個如下的頁面可見性api支援性的測試 var ispagevisibilitysupport function return support 測試發現，如下瀏覽器都是支援的 不支援的瀏覽器 因此，typeof document.mshidden ...
js 怎樣判斷使用者是否在瀏覽當前頁面
有些時候我們需要在專案中判斷使用者是否在瀏覽當前頁面，或者當前頁面是否處於啟用狀態。然後再進行相關的操作。瀏覽器中可通過window物件的onblur onfocus判斷，或者document的hidden屬性判斷。1 window.onblur window.onfocus 關於是否失焦點，瀏覽器...
進入當前頁面自動載入當前使用者資訊並顯示
如果獲取到的是json字串的話需要先轉成json物件 json字串 var str1 json物件 var str2 實現 要使用上面的str1，必須使用下面的方法先轉化為json物件 1 var obj eval str 2 var obj str.parsejson 由json字串轉換為json...