Question

虽然从开发工具中获取<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/> <solid android:color="#FFffffff"/> </shape>次很容易，但有没有办法从JS获得时间？

Answer 1

是的，这是paint timing API。

的一部分

你可能想要firstPaint的时间，你可以使用它：

first-contentful-paint

Answer 2

最近，PerformanceObserver和PerformancePaintTiming这样的新浏览器API让您可以更轻松地通过Javascript检索First Contentful Paint（FCP）。

我创建了一个名为Perfume.js的JavaScript库，它可以使用几行代码

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

我意识到您询问了First Paint（FP），但建议使用First Contentful Paint（FCP）。

这两个指标之间的主要区别是FP标志着这一点当浏览器渲染任何与视觉上不同的东西时在导航之前在屏幕上。相比之下，FCP就是重点当浏览器从DOM中呈现第一部分内容时，其中可以是文本，图像，SVG，甚至是画布元素。

Answer 3

if(typeof(PerformanceObserver)!=='undefined'){ //if browser is supporting
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
     console.log(entry.entryType);
     console.log(entry.startTime);
     console.log(entry.duration);
   }
  });
  observer.observe({entryTypes: ['paint']});
}

这将帮助您在开始使用js应用程序之前将此代码粘贴到其他所有内容之前。

如何获得页面第一次画的时间

3 个答案: