如何解决在 javascript 中使用 performance.now() 方法时出现的问题？

问题描述

在 javascript 中，我们可以使用 performance.now() 方法来获取当前时间戳（以毫秒为单位），该方法比 Date.now() 更加精准。不过，有时候在使用 performance.now() 方法时可能会遇到下面两种问题：

1. 在某些设备上，performance.now() 方法返回的数值不正确。
2. 在某些浏览器中，performance.now() 方法不被支持。

如果我们遇到这些问题，该怎么解决呢？

解决方案

问题 1 - 在某些设备上，performance.now() 方法返回的数值不正确

我们知道，performance.now() 方法返回的数值代表了当前时间戳与某个时间点的差值，所以当我们判断该数值是否正确时，可以通过下面的公式计算：

delta = (performance.now() - startTime) - expectedDelta;

其中，startTime 代表我们开始记录时间的时间戳，expectedDelta 代表我们预计的时间差值。如果 delta 的值过大或者过小，那么就说明 performance.now() 方法返回的数值不正确。

使用上述方法可以较为准确地判断 performance.now() 方法返回的数值是否正确，当我们发现问题时，可以尝试使用下面的解决方案来修复这个问题：

1. 升级设备的操作系统或者浏览器版本，这样可以解决许多因为设备或者浏览器版本过旧造成的问题。

2. 尝试使用 Date.now() 方法代替 performance.now() 方法，虽然 Date.now() 方法比 performance.now() 方法精度稍差，但是 Date.now() 方法可以保证在大多数设备上都能够正常工作。

3. 为 performance.now() 方法编写补丁函数，这个函数可以参考下面的代码实现：

function performanceNowFix() {
    var performance = window.performance || {};
    var now = performance.now       ||
              performance.mozNow    ||
              performance.msNow     ||
              performance.oNow      ||
              performance.webkitNow ||
              Date.now;  // fallback to Date.now()

    return now.call(performance);
}

使用上述函数可以较为准确地获取当前时间戳，可以替代原来的 performance.now() 方法。

问题 2 - 在某些浏览器中，performance.now() 方法不被支持

当我们在某些比较老的浏览器中使用 performance.now() 方法时，可能会发现该方法并不被支持。如果我们需要在这些浏览器中使用 performance.now() 方法，那么可以尝试使用下面的解决方案：

1. 为该浏览器编写对应的 polyfill，这个 polyfill 可以模拟 performance.now() 方法的行为，并可以在老浏览器中正常工作。这个 polyfill 可以参考下面的代码实现：

if ("performance" in window == false) {
    window.performance = {};
}

Date.now = (Date.now || function () {  // better performance than Date.getTime() if used for time deltas
    return new Date().getTime();
});

if ("now" in window.performance == false) {

    var nowOffset = Date.now();

    if (performance.timing && performance.timing.navigationStart) {
        nowOffset = performance.timing.navigationStart;
    }

    window.performance.now = function now() {
        return Date.now() - nowOffset;
    };
}

使用上述 polyfill 可以在老浏览器中模拟 performance.now() 方法的行为，从而保证该方法在老浏览器中正常工作。

2. 直接使用高版本浏览器的 performance.now() 方法，这种方法比较简单粗暴，但是只有在我们可以确保用户的浏览器都是高版本时才适用。如果我们需要兼容多个浏览器版本，那么还是推荐使用第一种方法。

总结

在 javascript 中使用 performance.now() 方法时，我们可能会遇到数值不准确或者方法不被支持的问题，这些问题可以通过适当的补丁函数或者 polyfill 来进行修复，从而在所有设备和浏览器中保证 performance.now() 方法的正常工作。