頁面白屏有哪些檢測手段？

01-25

包括純前端，或 iOS/Android 客戶端中；但不是本地，而是用戶端。是否有可能做到業務無感？

首先得定義什麼叫做「白屏」呀。w3c 不標準化與「白屏」/「首屏」有關的性能指標就是因為很難定義。

First paint time · Issue #21 · w3c/navigation-timing

但是瀏覽器自己會定義這個 first meaningful paint，比如 chrome 的定義就是基於布局顯著性的

layout significance = number of layout objects added / max(1, page height / screen height)

https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view

介紹一個 W3C 規範里的利器：MutationObserver

剩下的應該就知道怎麼做了

如果是題主問的是用戶側如何檢測到頁面出現問題導致的白屏情況...emmm...我不造阿

但假設，題主問的是用戶端載入Web頁面的白屏時間點，而不是因為異常ERROR導致頁面白屏的話...

第一種情況：獲得Web頁面載入的精確時間點

A. loadingTimes

在PC Chrome62版本後，提供了一個API:

chrome.loadingTimes()

返回一個對象

{ commitLoadTime:1508903864.785 connectionInfo:"h2" finishDocumentLoadTime:1508903865.951 finishLoadTime:1508903869.145 firstPaintAfterLoadTime:0 firstPaintTime:1508903865.94 // 第一次Paint時間，頁面出現內容時間 navigationType:"Other" npnNegotiatedProtocol:"h2" requestTime:1508903862.098 // 開始請求時間點 startLoadTime:1508903862.098 // 開始載入時間點 wasAlternateProtocolAvailable:false wasFetchedViaSpdy:true wasNpnNegotiated:true }

我們可以看到 firstPaintTime 這個時間點，是你的頁面出現內容後的時間點..如果頁面一直白屏的話，firstPaintTime的值是0。

所以說，在這種情況下，在我們的開發環境是可以獲得到非白屏的時間點。

B. PerformanceObserver

關於這個東西，之前在知乎上看到的文章，使用 Paint Timing API 提高性能，講述的很不錯，我就複述了，差不多就是可以在JS代碼里拿到性能的數據

第二種情況：不那麼精確的Web首屏載入時間點

A. 直出頁面

& &...直出內容& & // 打點 const firstPaintTime = + new Date() & &




      
   一點新知 
    GetIt01