当我们要优化 Web 应用性能时，常常需要对资源（例如图片、CSS、脚本）的加载情况进行分析。一个很好的指标是资源加载时间，即从浏览器开始请求资源到完成加载所需的时间。浏览器提供了 window.performance API 来帮助我们获取这些信息。本文介绍了一个 npm 包 @thinkeloquent/browser-resource-timing，它可以轻松地获取浏览器资源上报时间。
安装
使用 npm 进行安装：
npm install @thinkeloquent/browser-resource-timing
ES6 和 TypeScript 可以将 import { getResourceTiming } from '@thinkeloquent/browser-resource-timing'; 用于导入。
对于普通的 JavaScript，请使用以下语法：
var getResourceTiming = require('@thinkeloquent/browser-resource-timing').getResourceTiming;使用
函数 getResourceTiming 接收一个 Promise 对象，当 Promise 被解析时，它会返回一个 Promise 对象，该对象包含一个资源测量的时间戳列表，用于采集浏览器资源上报时间。在 window.onload 后调用该函数，以便能够获取所有浏览器资源，本示例代码将 log 所有浏览器网络请求资源的相关时间戳。
-- -------------------- ---- -------
------------- - ---------- -
----------------------------------------------------- -
----------------------------------------------------- -
------------------ - - -----------------------
------------------ ----- - - ----------------------------
---------------- ----- - - ------------------------------
---------------------- - - ----------------------------- - -----------------------------
---
---
--performanceEntries 是一个数组，其中包含每个网络请求的浏览器资源上报时间。每个项目都包含以下信息：
name：资源的 URLstartTime：从NavigationTimingAPI 返回的资源请求时间戳responseEnd：最后一个字节从服务器到达浏览器的时间戳duration：资源加载时间
使用该 npm 包，可帮助我们快速了解 Web 应用程序的性能问题。希望本文对您的工作和学习有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558d281e8991b448d61d2