时间戳

首页 > 解决方案 > 为什么这个 Javascript 数组访问这么慢？

javascript - 为什么这个 Javascript 数组访问这么慢？

问题描述

我有一个 5000 个元素的数组 ( frames_to_boxes)。每个元素本身都是一个 Box 类的对象数组：

class Box {
  constructor(x, y, width, height, frame, object_class, id) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.frame = frame;
    this.object_class = object_class;
    this.id = id;
  }

frames_to_boxes按帧索引。的目的frames_to_boxes是使用它按帧号查找 Box，而不是扫描我的 yuuuge 数组并检查帧是否相等。但是，我没有得到我期望的表现；frames_to_boxes根据我的性能分析，检查某个特定元素是否为 null 大约需要 25 毫秒。这对我来说似乎是错误的。
这是我的分析方式：

const t11 = performance.now();
if(this.frames_to_boxes[i] != null)
{
  const t12 = performance.now();

在我的控制台日志中，我打印出差异(t12-t11)，它显示从 5 毫秒到 25 毫秒。该数组以 3 个为一组进行访问（即检查索引 500、501、502），似乎第一次访问通常在 25 毫秒左右，而接下来的两次访问在 5 毫秒左右。如果有区别，this.frames_to_boxes是一个 Vue 计算值；但是，从我的性能跟踪和日志记录来看，我已经确认要更新的代码frames_to_boxes没有被重新执行。似乎数组查找负责计时。

这种类型的操作需要 5-25 毫秒吗？如果不是，我的表现缓慢可能是什么原因造成的？我的性能数据来自 Chrome。

标签： javascriptperformancevue.js

解决方案

我试图在不使用 Vue 的情况下创建一个最小的可重现示例，问题就消失了。这给了我一个提示，虽然frames_to_boxes没有重新计算，但似乎 Vue 引擎正在检查更改的依赖项或类似的东西。

在将Object.freezeBox 元素插入主数组之前应用它们可以解决问题，并且现在检查 null 所需的时间少于预期的 1 毫秒。

推荐阅读