如何使用JavaScript Performance API入门

痛定思痛。 2022-11-27 05:20 145阅读 0赞

Performance, performance, performance. You can have the best website in the world, but if it takes 2 minutes to load nobody will see it. If your website takes 2 minutes to load it probably won’t be too hard to figure out why. Optimization is trickier when you try to bring down your average load time from 1 second to 0.85 second.

性能，性能，性能。 您可以拥有世界上最好的网站，但是如果加载需要2分钟，则没人会看到它。 如果您的网站需要2分钟的加载时间，那么找出原因可能并不难。 当您尝试将平均加载时间从1秒降低到0.85秒时，优化会比较棘手。

There are a lot of tools which can help you understand how your application works locally. The Performance API is here to help us have a granular understanding of our web pages in the wild. You can get real data and see how your site works in different browsers, networks, parts of the world and more!

有很多工具可以帮助您了解应用程序在本地的工作方式。 Performance API可以帮助我们全面了解我们的网页。 您可以获得真实的数据，并查看您的站点如何在不同的浏览器，网络，世界各地等等中运行！

The Performance API is often described as a constellation of APIs. There are too many things to describe all of it in a single article. In this post, we’ll show the most basic features to get you started with performance monitoring.

Performance API通常被描述为API的集合。 在一篇文章中无法描述所有内容。 在本文中，我们将展示最基本的功能来帮助您开始性能监控。

The API is evolving and there are many new features and deprecations to come. Level 2s of all the Performance APIs coming up; some of them are partially implemented, some of them are still drafts. So you should regularly check out MDN or the W3C’s website for the most recent updates.

API不断发展，并且有许多新功能和不赞成使用的版本。 即将出现的所有Performance API的2级； 其中有些是部分实施的，有些仍是草案。 因此，您应该定期查看MDN或W3C的网站以获取最新更新。

## 如何访问性能数据 **(**How to Access Performance Data**)** ##

### 现在的表现 **(**performance.now**)** ###

The most basic way to measure a program’s performance is to use `performance.now()`. This will return the current time at a sub-millisecond resolution. If you want to dig into high-resolution time, I highly recommend reading the [W3C’s Editor’s draft on that topic][W3C_s Editor_s draft on that topic].

衡量程序性能的最基本方法是使用`performance.now()` 。 这将以毫秒级的分辨率返回当前时间。 如果您想研究高分辨率时间，我强烈建议您阅读[W3C关于该主题的编辑器草案][W3C_s Editor_s draft on that topic] 。

`performance.now` only allows you to measure what’s in your JavaScript code (aka user performance). Later in this post I’ll go over [an example on using `performance.now`][an example on using _performance.now].

`performance.now`仅允许您衡量JavaScript代码中的内容(也称为用户性能)。 在本文的稍后部分，我将介绍[有关使用`performance.now`的示例][an example on using _performance.now] 。

--------------------

To access different DOM and browser events we have 3 functions:

要访问不同的DOM和浏览器事件，我们具有3个功能：

*  `getEntries()` returns all the available performance entries. Try running `performance.getEntries()` on the current page, and you will see a big array. Initially, most of the entries will relate to all the images, scripts and other things which are loaded by the page (aka resources).
    
    `getEntries()`返回所有可用的性能条目。 尝试在当前页面上运行`performance.getEntries()` ，您会看到一个大数组。 最初，大多数条目将与页面加载的所有图像，脚本和其他东西(也称为资源)有关。

const tenthEntry = performance.getEntries()[10]
    // on Alligator.io it will return the following object
    // { initiatorType: "script",
    // nextHopProtocol: "h2",
    // workerStart: 526.8099999520928,
    // redirectStart: 0,
    // ....
    // decodedBodySize: 0,
    // serverTiming: [],
    // name: "https://d33wubrfki0l68.cloudfront.net/bundles/e2203d1b1c14952473222bcff4c58a8bd9fef14a.js",
    // entryType: "resource",
    // startTime: 315.5049999477342,
    // duration: 231.48499999661
    //}
    // We can see this is a resource entry for a script loaded from cloudfront

*  getEntriesByType() is like `getEntries()`, but will give you some possibility to filter the results.
    
    getEntriesByType()类似于`getEntries()` ，但将为您提供一些过滤结果的可能性。

There are 6 types that you can query:

您可以查询6种类型：

*  frame: Very experimental feature which allows developers to get data about how much work is done by the browser in one event loop. If the browser is doing too much work in one loop, the frame rate will drop and the user experience will be poor.
    
    框架：一种非常实验性的功能，它使开发人员可以在一个事件循环中获取有关浏览器完成了多少工作的数据。 如果浏览器在一个循环中执行过多的工作，则帧速率将下降并且用户体验将变差。
 *  resource: This relates to all the resources which are downloaded by the site.
    
    资源：这与站点下载的所有资源有关。
 *  mark: These are custom markers that can be used to calculate the speed of your code.
    
    标记：这些是自定义标记，可用于计算代码速度。
 *  measure: Measures allow us to easily measure the difference between two marks.
    
    测量：测量使我们能够轻松地测量两个标记之间的差异。
 *  paint: The paint entries relate to the pixels displayed on the screen.
    
    画图：画图条目与屏幕上显示的像素有关。
 *  longtask: Long tasks are any task which take over 50ms to execute.
    
    longtask：长任务是任何需要花费50ms以上的时间才能执行的任务。

We will dive into some of these types in the next sections. Here is a simple example to get started:

在下一部分中，我们将深入探讨其中一些类型。 这是一个简单的示例开始：

const paintEntries = performance.getEntriesByType('paint')
    // paint Entries[0] equals {
    //    name: "first-paint",
    //    entryType: "paint",
    //    startTime: 342.160000000149,
    //    duration: 0,
    //    }
    // paintEntries[1] equals {
    //    name: "first-contentful-paint",
    //    entryType: "paint",
    //    startTime: 342.160000000149,
    //    duration: 0,
    // }

*  getEntriesByName(entryName) filters all the entries by name.
    
    getEntriesByName(entryName)按名称过滤所有条目。

const nativeLogoPerfEntry = performance.getEntriesByName('https://alligator.io/images/alligator-logo3.svg')[0];
    // It will return performance information related to the logo's performance:
    // {initiatorType: "img",
    // nextHopProtocol: "",
    // workerStart: 539.6649999311194,
    // ........
    // name: "https://alligator.io/images/alligator-logo3.svg",
    // entryType: "resource",
    // startTime: 539.5149999530986,
    // duration: 94.24000000581145
    //}

If you are looking for higher level information about the site’s performance you can also call `performance.toJSON()`.

如果您正在寻找有关网站性能的更高级信息，则也可以调用`performance.toJSON()` 。

## 审核您的职能 **(**Audit your functions**)** ##

For auditing specific JavaScript functions, the most basic tool is `performance.now()` which we described above.

对于审核特定JavaScript函数，最基本的工具是我们上面介绍的`performance.now()` 。

Here’s a usage example:

这是一个用法示例：

const firstNow = performance.now()
    // This loop is just to simulate slow calculations
    for (let i = 0; i < 100000; i++){
      var ii = Math.sqrt(i)
    }
    const secondNow = performance.now()
    
    const howLongDidOurLoopTake = secondNow - firstNow
    // on my laptop it returns howLongDidOurLoopTake == 4.08500000089407 in milliseconds

The problem with `now` is that it’s a bit difficult to manage if you have many measurements. A more useful tool is `mark` which creates some performance entries which you can query later-on. Then you can combine markers and create new entries using `measure`.

`now`的问题是，如果您进行许多测量，则很难管理。 一个更有用的工具是`mark` ，它会创建一些性能条目，您以后可以查询。 然后，您可以组合标记并使用`measure`创建新条目。

performance.mark('beginSquareRootLoop');
    // This loop is just to simulate slow calculations
    for (let i = 0; i < 1000000; i++){
      var ii = Math.sqrt(i);
    }
    performance.mark('endSquareRootLoop');
    // Then anywhere in your code you can use
    
    // We create a new entry called measureSquareRootLoop which combines our two marks
    performance.measure('measureSquareRootLoop','beginSquareRootLoop', 'endSquareRootLoop');
    
    console.log(performance.getEntriesByName('beginSquareRootLoop'));
    // {detail: null,
    // name: "beginSquareRootLoop",
    // entryType: "mark",
    // startTime: 3745.360000000801,
    // duration: 0}
    
    console.log(performance.getEntriesByName('measureSquareRootLoop'));
    // {detail: null,
    // name: "measureSquareRootLoop",
    // entryType: "measure",
    // startTime: 3745.360000000801, This is the same as beginSquareRootLoop
    // duration: 9.904999984428287 shows the time it took to get from beginSquareRootLoop to endSquareRootLoop
    //}

## 导航数据 **(**Navigation Data**)** ##

Navigation is used to get a granular understanding of the critical steps to build your web page. The safest way to access the navigation data is to do:

导航用于深入了解构建网页的关键步骤。 访问导航数据的最安全方法是：

const navigationEntry = performance.getEntriesByType('navigation')[0]

In my browser, I get:

在浏览器中，我得到：

{
      unloadEventStart: 213.41000002576038,
      unloadEventEnd: 213.41000002576038,
      domInteractive: 975.8100000326522,
      domContentLoadedEventStart: 982.2649999987334,
      domContentLoadedEventEnd: 1217.9650000180118,
      domComplete: 2000.960000033956,
      loadEventStart: 2001.044999982696,
      loadEventEnd: 2008.6500000325032,
      type: "reload",
      redirectCount: 0,
      initiatorType: "navigation",
      nextHopProtocol: "",
      workerStart: 2.5550000136718154,
      redirectStart: 0,
      redirectEnd: 0,
      fetchStart: 2.5599999935366213,
      domainLookupStart: 2.5599999935366213,
      domainLookupEnd: 2.5599999935366213,
      connectStart: 2.5599999935366213,
      connectEnd: 2.5599999935366213,
      secureConnectionStart: 0,
      requestStart: 2.5599999935366213,
      responseStart: 107.46500000823289,
      responseEnd: 214.3950000172481,
      transferSize: 0,
      encodedBodySize: 0,
      decodedBodySize: 0,
      serverTiming: [],
      name: "https://alligator.io/",
      entryType: "navigation",
      startTime: 0,
      duration: 2008.6500000325032
    }

We will dive in some more detailed explanations about how to use that data in a future post. But in the meantime here is a visualization of the navigation timeline:

我们将在以后的文章中详细介绍如何使用这些数据。 但与此同时，这是导航时间轴的可视化：

## 资源资源 **(**Resource**)** ##

Anytime a resource is loaded by a page we can find its trace in the Performance Entries. All we have to do to get them is run `performance.getEntriesByType('resource')`. This includes images, scripts, CSS files and more. So for example if we want to focus on the performance of images on the site we can run:

每当页面加载资源时，我们都可以在Performance Entries中找到它的踪迹。 我们要做的就是运行`performance.getEntriesByType('resource')` 。 这包括图像，脚本，CSS文件等。 因此，例如，如果我们要关注站点上图像的性能，则可以运行：

performance.getEntriesByType('resource').filter(resource=> resource.initiatorType == 'img')

Here’s one of the resources found on Alligator.io:

这是在Alligator.io上找到的资源之一：

{
        initiatorType: "img",
        nextHopProtocol: "h2",
        workerStart: 551.2149999849498,
        redirectStart: 0,
        redirectEnd: 0,
        fetchStart: 551.3149999896996,
        domainLookupStart: 0,
        domainLookupEnd: 0,
        connectStart: 0,
        connectEnd: 0,
        secureConnectionStart: 0,
        requestStart: 0,
        responseStart: 0,
        responseEnd: 560.1850000093691,
        transferSize: 0,
        encodedBodySize: 0,
        decodedBodySize: 0,
        serverTiming: [],
        name: "https://d33wubrfki0l68.cloudfront.net/39d2d2905588dad289b228deb021d51449f6143d/a3baf/images/logos/gatsby-logo.svg",
        entryType: "resource",
        startTime: 222.0450000022538,
        duration: 338.1400000071153
    }

This entry has a lot of 0 values as you can see, that is because we are restricted by CORS (this is a big limit of the resource timing API). So the following properties will always return 0: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, and responseStart.

如您所见，该条目有很多0值，这是因为我们受到CORS的限制(这是资源计时API的很大限制)。 因此，以下属性将始终返回0：redirectStart，redirectEnd，domainLookupStart，domainLookupEnd，connectStart，connectEnd，secureConnectionStart，requestStart和responseStart。

## 涂料 **(**Paint**)** ##

The paint API relates to events that draw pixels on the window. As we saw in a previous snippet, we have access to First Time to Paint and First Contentful Paint. If you’ve worked with front-end optimization tools like Lighthouse, you might be familiar with these terms. The first time to paint is when the first pixel shows up on the user screen. The first contentful paint is when an element defined in the DOM is first rendered. To optimize the first contentful paint you can reduce render-blocking scripts and stylesheets, use HTTP caching, optimize JavaScript boot-up and more!

绘画API与在窗口上绘制像素的事件有关。 正如我们在上一片段中所看到的，我们可以访问“ 第一次绘画”和“ 第一次内容丰富的绘画” 。 如果您使用过诸如Lighthouse之类的前端优化工具，您可能会熟悉这些术语。 第一次绘制是在用户屏幕上出现第一个像素时。 第一个有意思的绘画是第一次渲染DOM中定义的元素时。 为了优化第一个内容丰富的绘画，您可以减少渲染阻止脚本和样式表，使用HTTP缓存，优化JavaScript启动等等！

These are useful metrics but are pretty limited if you are trying to understand what your users see. In order to have a good idea of your user’s performance perception, we need to combine multiple metrics.

这些是有用的指标，但是如果您想了解用户所看到的内容，它们将受到很大的限制。 为了更好地了解您的用户的效果，我们需要结合多个指标。

The performance API is gigantic and is rapidly changing. The best place to look for updates is of course Alligator.io, but if you want to explore this topic really in depth you should check out the [Web Performance Working Group’s][Web Performance Working Group_s] page where you can find the latest working drafts and recommendations.

性能API巨大且正在Swift变化。 寻找更新的最佳位置当然是Alligator.io，但是，如果您想深入探讨此主题，则应查看[Web Performance Working Group的][Web Performance Working Group_s]页面，在该页面上可以找到最新的工作草案和建议。

> 翻译自: [https://www.digitalocean.com/community/tutorials/js-js-performance-api][https_www.digitalocean.com_community_tutorials_js-js-performance-api]

[W3C_s Editor_s draft on that topic]: https://w3c.github.io/perf-timing-primer/#high-resolution-time
[an example on using _performance.now]: https://www.digitalocean.com/js/js-performance-api/#audit-your-functions
[Web Performance Working Group_s]: https://www.w3.org/webperf/
[https_www.digitalocean.com_community_tutorials_js-js-performance-api]: https://www.digitalocean.com/community/tutorials/js-js-performance-api