页面性能始终是Web 开发者关心的话题。Performance 接口通过JavaScript API 暴露了浏览器内部
的度量指标,允许开发者直接访问这些信息并基于这些信息实现自己想要的功能。这个接口暴露在
window.performance 对象上。所有与页面相关的指标,包括已经定义和将来会定义的,都会存在于
这个对象上。
Performance 接口由多个API 构成:
High Resolution Time API
Performance Timeline API
Navigation Timing API
User Timing API
Resource Timing API
Paint Timing API
有关这些规范的更多信息以及新增的性能相关规范,可以关注W3C 性能工作组的GitHub 项目
页面。
High Resolution Time API
Date.now()方法只适用于日期时间相关操作,而且是不要求计时精度的操作。在下面的例子中,
函数foo()调用前后分别记录了一个时间戳:
const t0 = Date.now();
foo();
const t1 = Date.now();
const duration = t1 – t0;
console.log(duration);
考虑如下duration 会包含意外值的情况。
duration 是0。Date.now()只有毫秒级精度,如果foo()执行足够快,则两个时间戳的值会相等。
duration 是负值或极大值。如果在foo()执行时,系统时钟被向后或向前调整了(如切换到夏
令时),则捕获的时间戳不会考虑这种情况,因此时间差中会包含这些调整。
为此,必须使用不同的计时API 来精确且准确地度量时间的流逝。High Resolution Time API 定义了
window.performance.now(),这个方法返回一个微秒精度的浮点值。因此,使用这个方法先后捕获的时间戳更不可能出现相等的情况。而且这个方法可以保证时间戳单调增长。
const t0 = performance.now();
const t1 = performance.now();
console.log(t0); // 1768.625000026077
console.log(t1); // 1768.6300000059418
const duration = t1 – t0;
console.log(duration); // 0.004999979864805937
performance.now()计时器采用相对度量。这个计时器在执行上下文创建时从0 开始计时。例如,
打开页面或创建工作线程时,performance.now()就会从0 开始计时。由于这个计时器在不同上下文中初
始化时可能存在时间差,因此不同上下文之间如果没有共享参照点则不可能直接比较performance.now()。
performance.timeOrigin 属性返回计时器初始化时全局系统时钟的值。
const relativeTimestamp = performance.now();
const absoluteTimestamp = performance.timeOrigin + relativeTimestamp;
console.log(relativeTimestamp); // 244.43500000052154
console.log(absoluteTimestamp); // 1561926208892.4001
08-14
401
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
05-12
326
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
05-18
307
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-27
558
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-22
441
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)