Обновить

Комментарии 1

Хороший способ, воспользовался, но нужно добавить одну оптимизацию.
Маркеры обычно однотипны, даже если их надо вращать, исходное количество картинок обычно очень ограничено.

Здесь на каждый маркер создается свой html элемент:
const img = document.createElement('img');

Если нужно отобразить например 10 000 маркеров, то будет создаваться 10 000 html элементов, но они на самом деле не нужны, так как это не маркер, а исходная картинка для canvas.

Я бы может не обратил внимания, но firefox похоже не может обработать 10-20 тысяч созданий таких элементов, он просто виснет, chrome — может, но скорость все равно выше если оптимизировать.

Поэтому в «img.onload» я добавил:

img.onload = () => {
  this.options.imageCache[this.options.img.url] = img;  // это будет "img.el"
  // ...
};


А перед createElement забираю из кэша:
if (this.options.imageCache[this.options.img.url]) {
  this.options.img.el = this.options.imageCache[this.options.img.url];
  this.redraw();
  return;
}


imageCache это единый объект для кэширования, который передается при создании маркеров вместе с остальными options.
После этого firefox стал летать на 10-12 тысячах маркеров (как мне было нужно).
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Минуточку внимания