前端白屏時間如何獲取？

02-01

有說在&&前後打時間戳計算差值就可以的，但是如果head之間沒有其他資源如css,js等，這個差值會幾乎為0，然後你在chrome dev的timeline的Event log裡頭看到的firstPaint這個時間點根本不可能是0，，，所以問題來了，到底如何獲取白屏時間，所謂的first paint time......當然chrome有自己的api。。。window.chrome.loadTimes().firstPaintTime * 1000 - window.performance.timing.navigationStart 那其他瀏覽器怎麼弄？

謝邀。

關於 first paint time 為什麼沒有寫進標準的討論在此

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

但你可以用 raf 曲線救國嘛

& & & & & requestAnimationFrame(function(){


      var firstPaintTime = Date.now() - performance.timing.navigationStart;
      console.log(

         get first paint time by raf:,

         firstPaintTime

        );

    });

    window.onload = function(){

      requestAnimationFrame(function(){

        var firstPaintTime =

           window.chrome.loadTimes().firstPaintTime * 1000 -

           window.performance.timing.navigationStart;

console.log( get first paint time by chrome.loadTimes().firstPaintTime:, firstPaintTime ); }); }; & & & & var start = Date.now(); while(Date.now() - start &< 3000){} // white screen & & &

在head裡面打個點,再在&前setTimeout個0毫秒打個點.兩者差值接近是白屏時間.用這個做監控差不多吧.

秒錶。

注意手速要快。

(? ??ω??)??相信自己

-------------------分割線-----------------------------

當時用手機刷知乎，並不是太懂這個問題，匿名抖了個機靈，獲得一些贊(比我一些認真的回答還多）非常慚愧。

但是一直沒時間來細緻了解這個問題。想來點贊的各位，可能也是手機刷刷知乎，也沒時間細緻了解。

@魯小夫大神答案里的鏈接，翻譯整理在這裡（有刪節並自己組織的語言），希望對那些沒精力看高票答案代碼的同志能有一些思路上的幫助。本來想找更多的資料，但是限於能力精力，沒有實現。

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

問：為什麼沒把first paint time 寫進標準里呢？希望您能把他加進去。

答：因為不能準確定義它啊，這個時間標準是模糊的。比如一些網頁，他本來就是空白的啊，怎麼來定義這個paint的時間呢？而且很多人並不在乎，什麼時候畫出第一個像素，他們想跟蹤一下具體某個元素是什麼時候畫出來的。但是每個網站都不一樣，我們不可能來定義太細的介面。所以不能加。

Frame Timing 可以讓你跟蹤畫出來的時間，如果你真想追蹤first paint(白屏) time，你得等我們有一些 Houdini pieces (不知道怎麼翻譯，沒細看，求指正）才能有比較好的解決辦法。

問：那為什麼DevTools裡面有呢？為什麼不加個時間戳(從hidden到visible)? 我就是想知道，從點擊進去到看到內容，用戶等了多久，這個值是模糊的么？

答：在DevTools里有，並不是意味著他是一個好的標準。

如果想加時間戳來記錄，你自己加就行了唄。

我只是認為，first paint 不夠分量來寫進標準，frame Timing 應該更有意義。但是需要時間。

另外，關於時間標準的模糊，quora上有個回答，我也無從分辨，暫時放在這裡：

What does First Meaningful Paint mean in Web Performance?

所以我抖的機靈，且不論能否測1k次的平均時間，它需要根據視覺判斷，是完全不對的。

通過Navigation Timing API 可以獲取首屏時間

使用方法：

控制台中

performance.timing.responseStart - performance.timing.navigationStart

具體解釋可以參考：

3fuyu

Google 搜搜 didFinishLoad ，差不多就是這個事件（iOS）發生的時候。

前端 白屏時間如何獲取？

前端白屏時間如何獲取？