在前端性能优化中，我们通常需要对网页的加载时间、资源大小等进行分析和优化。而对于网络请求的响应时间分布分析，hdr-histogram-js 是一个非常好用的工具。
前置知识
首先，我们需要了解 HDR 直方图（High Dynamic Range Histogram）是一种能够支持非常大范围值的直方图数据结构，它可以较为精确地测量延迟、带宽和吞吐量等指标，而传统的直方图数据结构则不能很好地支持这些指标。因此，在处理高负载场景下的性能问题时，HDR 直方图通常比传统的直方图更加实用。
安装
我们可以通过 npm 来安装 hdr-histogram-js。
npm install --save hdr-histogram-js
使用
创建直方图
使用 hdr-histogram-js，我们可以很容易地创建一个 HDR 直方图：
const hdr = require('hdr-histogram-js');
// 从 1ms 到 1 minute，刻度间隔为 1.15 的直方图
const histogram = hdr({
lowestDiscernibleValue: 1,
highestTrackableValue: 60000,
numberOfSignificantValueDigits: 2,
});在上面的示例中，我们创建了一个能够记录 1 毫秒到 1 分钟之间的响应时间的 HDR 直方图。该直方图将使用 2 个有效数字位数（numberOfSignificantValueDigits），这意味着直方图精度可以达到 1.15 ^ 2 = 1.3225。低于此精度的值将被合并为一个条目。
记录数据
接下来，我们可以记录一些数据：
histogram.recordValue(100); // 记录响应时间为 100ms 的数据点 histogram.recordValue(200);
查询数据
我们可以使用以下方法查询数据：
getTotalCount()：获取总的数据点数量。getMean()：获取所有数据点的平均值。getValueAtPercentile(percentile)：获取某一百分位数对应的数据点值。getPercentiles(percentiles)：获取指定百分位数所对应的数据点值。
例如：
console.log(`数据点数量：${histogram.getTotalCount()}`);
console.log(`平均响应时间：${histogram.getMean()}ms`);
console.log(`95% 响应时间：${histogram.getValueAtPercentile(95)}ms`);
console.log(`99% 响应时间：${histogram.getPercentiles([99])[0]}ms`);示例代码
以下是一个完整的代码示例，它演示了如何使用 hdr-histogram-js 记录和查询数据，并将结果输出到控制台：
-- -------------------- ---- ------- ----- --- - ---------------------------- ----- --------- - ----- ----------------------- -- ---------------------- ------ ------------------------------- -- --- ----- ---- - ----- ---- ---- ---- ----- -------------------- -- - ----------------------------- --- -------------------------------------------------- ----------------------------------------------- ---------------- ----------------------------------------------- ---------------- ----------------------------------------------
总结
使用 hdr-histogram-js，我们可以轻松地创建和操作 HDR 直方图，并通过它来分析和优化网络请求的响应时间分布。这对于前端性能优化是非常有价值的，因为它可以帮助我们更加深入地了解网页加载过程中存在的瓶颈，从而更好地优化网
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/48535