介绍
website-performance-hoc 是一个使用 React Hooks 实现的 npm 包，用于测量网页的性能表现，可以帮助前端开发者优化网页的性能，提升用户体验。
使用 website-performance-hoc 可以轻松获取网页的加载时间、domReady 时间、首次渲染时间等关键指标，在优化网页性能时提供有力的参考。
安装
在项目目录下通过 npm 安装 website-performance-hoc：
npm install --save website-performance-hoc
使用
使用 website-performance-hoc 只需引入 usePerformanceMetrics 钩子，即可获取网页性能指标数据。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------------- ---- --------------------------
------ ------- -------- ----- -
----- -
---------
-------------
---------------
------------------------
- - ------------------------
------ -
-----
---------- ----------------
----------- --- --------------------
---------- ----------------------
------------ --------------------------------
------
--
-在应用中使用 usePerformanceMetrics 钩子，即可获取到网页性能的指标数据，将数据渲染到应用中。
指标解释
loadTime
loadTime（网页加载时间）表示从发起请求到浏览器处理完所有资源的时间，包括所有资源的下载和解析等时间。loadTime 可以反映出网页整体的加载性能，通常情况下，loadTime 越短说明网页性能越好。
domReadyTime
domReadyTime（文档准备就绪时间）是指页面的 HTML 文档加载完成并被浏览器解析完成之后，dom 对象加载完成的时间。也就是说，当浏览器加载页面的 html 文件后，并在浏览器解析 html 文件中遇到的每个脚本文件时，时间计算开始。当文档的 dom 读取完毕时，domReadyTime 的时间就被记录下来。domReadyTime 可以反映出网页的渲染性能，通常情况下，domReadyTime 越短说明网页性能越好。
firstPaintTime
firstPaintTime（首次渲染时间）表示打开网页后，浏览器首次将像素渲染到屏幕上的时间。它反映出网页的第一印象，也就是说，firstPaintTime 越短，用户在访问网页时就能够快速看到页面的内容，进而提升用户体验。
firstContentfulPaintTime
firstContentfulPaintTime（首次内容绘制时间）表示打开网页后，浏览器首次绘制页面的内容的时间。包括文字、图片、svg等。也就是浏览器将内容图形化的时间。firstContentfulPaintTime 可以反映出网页内容的渲染性能。
示例
在这个示例中，我们创建了一个简单的 React 应用程序，以查看如何使用 website-performance-hoc 来获取网页性能指标数据。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------------- ---- --------------------------
------ ------- -------- ----- -
----- -
---------
-------------
---------------
------------------------
- - ------------------------
------ -
-----
---------- ----------------
----------- --- --------------------
---------- ----------------------
------------ --------------------------------
------
--
-结论
通过使用 website-performance-hoc，我们可以轻松地获取关键的网页性能指标，以便优化网页性能，提升用户体验。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd7d