Size: a a a

JavaScript.Ninja

2020 February 20

д

д̸̥̫͖̓͐̈́͑у̴̘͈͑́̃̋͛́͝ш̸̟̙͙̪̃͂̂̃͛̾н̷̟͉͖̓̾̋͂̍̇̃͘͠о̷̾̉͑͒̃͝ ̢̣̺̏͠ ̺̤ in JavaScript.Ninja
Даниил Пантелеев
Всем привет, у меня есть небольшой canvas эффект но при скролле в некоторых местах вылетают фризы. Подскажите пожалуйста в каком направлении копать http://gold-standard.good-landing.com.ua/

Возможно можно скрыть его вне видимости но только не знаю правильный метод и это от части костыль
На телефоне он у меня вообще повесил браузер
источник

ДП

Даниил Пантелеев in JavaScript.Ninja
Под моб не адаптивен + он кладет любой браузер
источник

m

mkots in JavaScript.Ninja
фф не падает, что удивительно
источник

SK

Sergey Kostyrko in JavaScript.Ninja
судя по таймлайну - фризы вызваны Composite layer фазой
слоев на странице много и они достаточно большие
и получается что когда созадется новый большой слой это может занимать какое-то время
надо разбиратся в этих слоях/убрать лишние/сократить размеры (например сейчас канвас сильно больше того текста что на нем рисуется - соответственно куча ресурсов на нем тратится зря)
источник

ДП

Даниил Пантелеев in JavaScript.Ninja
mkots
фф не падает, что удивительно
Mozila не каждый canvas загружает или у Вас появились эффекты
источник

ДП

Даниил Пантелеев in JavaScript.Ninja
Sergey Kostyrko
судя по таймлайну - фризы вызваны Composite layer фазой
слоев на странице много и они достаточно большие
и получается что когда созадется новый большой слой это может занимать какое-то время
надо разбиратся в этих слоях/убрать лишние/сократить размеры (например сейчас канвас сильно больше того текста что на нем рисуется - соответственно куча ресурсов на нем тратится зря)
Спасибо большое за подсказку
источник

SK

Sergey Kostyrko in JavaScript.Ninja
в мозиле кстати они процес композиции слоев в последние время сильно улучшили (была большая статья по оптимизациям) - может поэтому там меньше проблем
источник

ДП

Даниил Пантелеев in JavaScript.Ninja
Sergey Kostyrko
в мозиле кстати они процес композиции слоев в последние время сильно улучшили (была большая статья по оптимизациям) - может поэтому там меньше проблем
Вы правы, намного лучше отображается. На удивление я думал что Mozila вообще не запуститься
источник

ДП

Даниил Пантелеев in JavaScript.Ninja
Sergey Kostyrko
судя по таймлайну - фризы вызваны Composite layer фазой
слоев на странице много и они достаточно большие
и получается что когда созадется новый большой слой это может занимать какое-то время
надо разбиратся в этих слоях/убрать лишние/сократить размеры (например сейчас канвас сильно больше того текста что на нем рисуется - соответственно куча ресурсов на нем тратится зря)
Подскажите пожалуйста как вы это диагностировали, я попробовал убрать слои и моя проблема улучшилась
источник

SK

Sergey Kostyrko in JavaScript.Ninja
то что фризы были в композиции было видно из таймлайна
а в Console вкладке можно дополнительно открыть Rendering и там есть подсветка перерисовки и подсветка границ слоев
источник

ДП

Даниил Пантелеев in JavaScript.Ninja
Благодарю! Вы сделали мой день проще
источник

SK

Sergey Kostyrko in JavaScript.Ninja
you are welcome
источник

ВТ

Вячеслав Тертычный in JavaScript.Ninja
есть, что по таким анимациям почитать стоящее?
источник

KB

Kostya Boyarchuk in JavaScript.Ninja
На MDN документации думаю будет достаточно
источник

A

Alex in JavaScript.Ninja
Dmytro Rybachek
Добрый день,
Не понимаю причину и как устранить баг. Использую Google Map API и heatmap.js. Суть заключается в том что могу одновременно вывести несколько heatmap, все следующие после первого не отрисовываються, ошибок никаких нет. Как выводить несколько хитмапов?
Я с именно с heatpmap не работала, но похоже что выводить надо в цикле, и если это так, то вы выводите не в цикле или идет прерывание.
источник

DR

Dmytro Rybachek in JavaScript.Ninja
Alex
Я с именно с heatpmap не работала, но похоже что выводить надо в цикле, и если это так, то вы выводите не в цикле или идет прерывание.
Мне нужно отдельных два хитмепа,
На одной карте и одновременно )
источник

A

Alex in JavaScript.Ninja
Читаю доки, даже интересно стало
источник

A

Alex in JavaScript.Ninja
Для меня гугл карты - моя маленькая боль
источник

DR

Dmytro Rybachek in JavaScript.Ninja
Alex
Для меня гугл карты - моя маленькая боль
Пример брал здесь https://developers.google.com/maps/documentation/javascript/heatmaplayer
Если продублировать инит хитмепа то сработает только первый )
источник

A

Alex in JavaScript.Ninja
Dmytro Rybachek
Пример брал здесь https://developers.google.com/maps/documentation/javascript/heatmaplayer
Если продублировать инит хитмепа то сработает только первый )
А он вообще так умеет?
Я правильно понимаю 1 страница 2 разных heatmap?
источник