如何獲取頁面第一次繪製的時間

Question

儘管開發工具很容易獲得firstPaint次，但是有沒有辦法從JS獲取時間？

Answer 1

是的，這是paint timing API的一部分。

你可能想爲first-contentful-paint的時機，你可以得到使用：

const paintTimings = performance.getEntriesByType('paint'); 
const fmp = paintTimings.find(({ name }) => name === "first-contentful-paint"); 
enter code here 
console.log(`First contentful paint at ${fmp.startTime}ms`); 

Answer 2

最近新的瀏覽器API，如PerformanceObserver和PerformancePaintTiming使人們更容易被檢索的Javascript第一Contentful塗料（FCP）。

我做了一個JavaScript庫調用Perfume.js與代碼

const perfume = new Perfume({ 
    firstContentfulPaint: true 
}); 
// ⚡️ Perfume.js: First Contentful Paint 2029.00 ms 

我知道你問第一塗漆（FP），但建議使用首先Contentful塗料（FCP），而不是幾行字的作品。

兩個度量之間的主要差別是當在瀏覽器呈現任何從什麼 先於導航屏幕上可視不同FP標誌着點 。相比之下，當瀏覽器呈現來自DOM的第一位內容時，FCP是點 ，其中 可以是文本，圖像，SVG或甚至是畫布元素。