npm 包 @thinkeloquent/browser-resource-timing 使用教程

当我们要优化 Web 应用性能时，常常需要对资源（例如图片、CSS、脚本）的加载情况进行分析。一个很好的指标是资源加载时间，即从浏览器开始请求资源到完成加载所需的时间。浏览器提供了 window.performance API 来帮助我们获取这些信息。本文介绍了一个 npm 包 @thinkeloquent/browser-resource-timing，它可以轻松地获取浏览器资源上报时间。

安装

使用 npm 进行安装：

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

ES6 和 TypeScript 可以将 import { getResourceTiming } from '@thinkeloquent/browser-resource-timing'; 用于导入。

对于普通的 JavaScript，请使用以下语法：

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

使用

函数 getResourceTiming 接收一个 Promise 对象，当 Promise 被解析时，它会返回一个 Promise 对象，该对象包含一个资源测量的时间戳列表，用于采集浏览器资源上报时间。在 window.onload 后调用该函数，以便能够获取所有浏览器资源，本示例代码将 log 所有浏览器网络请求资源的相关时间戳。

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

performanceEntries 是一个数组，其中包含每个网络请求的浏览器资源上报时间。每个项目都包含以下信息：

• name ：资源的 URL
• startTime ：从 NavigationTiming API 返回的资源请求时间戳
• responseEnd ：最后一个字节从服务器到达浏览器的时间戳
• duration ：资源加载时间

使用该 npm 包，可帮助我们快速了解 Web 应用程序的性能问题。希望本文对您的工作和学习有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600558d281e8991b448d61d2