javascript七基础学习系列一千四百七十九:计时API

页面性能始终是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

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值