如何使用Performance API使您的网站更快

>本教程演示了如何利用性能API捕获与Web应用程序交互的真实用户的详细性能指标。虽然浏览器DevTools提供性能见解，但它们并没有准确反映用户在各种设备，位置和网络连接中体验的各种现实世界条件。 性能API的关键好处

与孤立的DevTool测试相比

• 综合指标：>它在整个页面生命周期中捕获指标，包括导航，资源加载，渲染和自定义应用程序逻辑执行时间。
• >高分辨率计时：使用高分辨率计时器，它记录了时间到毫秒的时间到毫秒的分数，捕获了诸如重定向和DNS查找时间之类的细节，而标准计时器不可能。
>可自定义的测量值：
• 允许您的应用程序功能的精确时机，在客户端JavaScript，Web Workers，Deno和Node.js. 上无缝工作
>跨平台分析：
• 启用对实际用户设备和网络的性能测量，简化瓶颈标识和性能优化。>
• 了解性能API：> 性能API使用缓冲区将性能指标作为对象存储在网页的生命周期的关键阶段：
>

>页面导航：记录重定向，连接，握手和DOM事件。>

>

>资源加载：

跟踪图像，CSS，脚本和AJAX呼叫等资产的加载时间。

1. 油漆指标：捕获浏览器渲染信息（例如，第一个内容的涂料）。
2. >自定义性能：>启用任意应用程序处理时间的测量以查明慢速功能。
3. 可以检查API支持：
4. >注意：尽管实现了大部分API。 （需要）。

超越

：

<code class="language-javascript">if ('performance' in window) {
  // Use Performance APIs
}</code>

> >可以测量经过的时间，其毫秒的精度和对系统时间（容易受到操作系统调整）的依赖限制了其准确性。性能API的高分辨率计时器和其他指标（例如重定向和DNS时间）提供了较高的细节。 perf_hooks录制和报告指标：--allow-hrtime>客户端性能数据需要一个目的地。 您可以使用AJAX，FETCH，XMLHTTPREQUEST或BEACON API将此数据发送到服务器进行分析。许多分析平台还提供用于录制时间安排的自定义事件API（例如，Google Analytics（分析）用户计时API）。

页面导航时机：

在快速连接上进行测试并不能反映房车的体验。 导航正时API提供了一个对象，其中包含有关重定向，加载时间，文件大小，DOM事件等的详细信息，如用户所观察到的。 >使用：

访问此对象

PerformanceNavigationTiming或

既返回一个带有一个只读取属性的对象的数组（例如，

<code class="language-javascript">if ('performance' in window) {
  // Use Performance APIs
}</code>

，

，

，

<code class="language-javascript">const pagePerf = performance.getEntriesByType('navigation');</code>

，各种定时指标）。

startTime页面资源定时： duration domComplete资源正时API为每个已加载资产（图像，CSS，脚本等）提供

的对象。 使用：

>这返回一个对象数组，每个对象都具有类似于导航时机的定时属性，但没有导航和DOM事件数据。 可以使用

。

>示例：分析CSS文件加载时间和尺寸：> PerformanceResourceTiming

<code class="language-javascript">const pagePerf = performance.getEntriesByName(window.location);</code>

>浏览器涂料计时：

getEntriesByName()

油漆正时API为

>和对象，对于评估感知性能至关重要。 使用：

<code class="language-javascript">const resPerf = performance.getEntriesByType('resource');</code>

访问它们

用户计时（自定义指标）：

>

性能API允许使用PerformancePaintTiming，first-paint和first-contentful-paint自定义应用程序功能的定时时间。

提供高分辨率的时间戳。

<code class="language-javascript">const css = performance.getEntriesByType('resource')
  .filter(r => r.initiatorType === 'link' && r.name.includes('.css'))
  .map(r => ({
    name: r.name,
    load: r.duration + 'ms',
    size: r.decodedBodySize + 'bytes'
  }));</code>

在性能缓冲区中创建命名标记，

计算标记之间的持续时间。 允许对性能条目的异步观察。

自封式API： performance.now() .mark()>自行封闭式API（仍在开发中）通过自动采样执行来简化性能分析，识别没有手动标记的潜在瓶颈。.measure()> performance.now().mark()结论： .measure() PerformanceObserver>

以上是如何使用Performance API使您的网站更快的详细内容。更多信息请关注PHP中文网其他相关文章！