Можно ли как-то оптимизировать этот javascript код?

Question

[Александр]

move() {
  let layerOffset = this.layerOffset,
      currentLayerOffset = this.currentLayerOffset,
      layerMoveBraking = this.processedConfig.layerMoveBraking,
      border = this.border,
      points = this.points;

  this.currentLayerOffset = {
    '1': {
      x: layerOffset[1].x + (currentLayerOffset[1].x - layerOffset[1].x) * layerMoveBraking,
      y: layerOffset[1].y + (currentLayerOffset[1].y - layerOffset[1].y) * layerMoveBraking
    },
    '2': {
      x: layerOffset[2].x + (currentLayerOffset[2].x - layerOffset[2].x) * layerMoveBraking,
      y: layerOffset[2].y + (currentLayerOffset[2].y - layerOffset[2].y) * layerMoveBraking
    },
    '3': {
      x: layerOffset[3].x + (currentLayerOffset[3].x - layerOffset[3].x) * layerMoveBraking,
      y: layerOffset[3].y + (currentLayerOffset[3].y - layerOffset[3].y) * layerMoveBraking
    }
  };

  points.forEach(function (point) {
    point.coordinatesOnLayer.x += point.speed.x;
    point.coordinatesOnLayer.y += point.speed.y;

    point.coordinates.x = point.coordinatesOnLayer.x + currentLayerOffset[point.layer].x;
    point.coordinates.y = point.coordinatesOnLayer.y + currentLayerOffset[point.layer].y;

    if (point.coordinatesOnLayer.x < border.left) {
      point.speed.x = Math.abs(point.speed.x)
    } else if (point.coordinatesOnLayer.x > border.right) {
      point.speed.x = -Math.abs(point.speed.x)
    }
    if (point.coordinatesOnLayer.y < border.top) {
      point.speed.y = Math.abs(point.speed.y)
    } else if (point.coordinatesOnLayer.y > border.bottom) {
      point.speed.y = -Math.abs(point.speed.y)
    }
  }, this)
}

Comments

[gleendo]

Тут нечего оптимизировать.

Answer 1

[Константин Китманов]

Цикл for (let i = 0, len = points.length; i < len; i++) будет примерно на порядок быстрее, чем Array#forEach — но тут зависит от количества элементов в массиве, если их десяток — то пофиг. Еще проверьте, у вас итератор выполняется в специфическом контексте, но в теле функции это нигде не используется.

В приведенном коде нечего оптимизировать, это обычная арифметика. Подозреваю, что тормоза у вас в другом месте — там где это выводится на экран. Если это дело двигает дивы, то поищите техники для уменьшения reflow и repaint. Если это какие-то спрайты на канвасе — возможно, стоит рендерить в WebGL (возьмите pixi.js).

Ну и да, проверять, проверять и еще раз проверять профайлером. Вдумчиво.

Comments

[Александр]

Ну не то чтобы тормозит, но ищу способы максимально снизить время просчёта кадра, чтобы анимации в остальной части интерфейса не тормозили на слабых устройствах. Сейчас на 4770k один кадр просчитывается и рендерится в среднем от 1 до 2 мс (конкретно тот код, который я прикладывал от 0.1 до 0.6 мс, иногда и до 1.5 мс доходит). В целом анимация не имеет критическую важность, так что я отключаю её когда среднее время просчёта кадра переваливает за 6 мс. По идее происходить это будет разве что на нетбуках.

А вообще в цикле 150-200 итераций.

[Константин Китманов]

LordGuard: Ну насколько я помню, при 60 FPS один кадр (и обсчет и отрисовка) должен занимать чуть меньше 16мс, так что у вас есть резерв в принципе-то.

[Александр]

Константин Китманов: проблема в том, что canvas - это далеко не единственное что есть на странице, а лишь фон.

[Константин Китманов]

LordGuard: честно, не знаю, что вам еще сказать, не смотря в профайлер. Работа с DOM и reflow/repaint -- наше всё. Удачи, оптимизация долгий и комплексный процесс:)

Answer 2

[Павел Корнилов]

Эффективно - не думаю.