Как измерить сколько памяти занимает html элемент и объект созданный через new?

Question

[Stepan1998]

Как можно в браузере увидеть сколько памяти занимает какой-либо html элемент или объект, который мы создали от класса через new?
Хочется понять, сколько максимально возможно создавать объектов для того, чтобы страница не лагала с учётом старых устройств на 512 мб оперативки.

Comments

[Вадим]

с учётом старых устройств на 512 мб оперативки

А если не секрет, что это за устройства такие и какая на них OC? Linux? Мне кажется, минимум треть от этого объёма сожрёт ОС и браузер с одной вкладкой.
А ещё, если они всё таки "старые" а не маломощные, то о какой версии браузера речь, о каком браузере?

Просто это всё звучит так, будто Вы каким-то общим вопросом хотите решить какую-то частную проблему и часто так бывает, что на самом деле вопрошающему нужно совсем не то, о чём он спрашивает.

[Stepan1998]

Вадим, поступили жалобы, что на старых андроидах, где оперативки 500-1000 мб лагает сайт на странице, где появляются дополнительные блоки и при скролле создаются новые экземпляры класса
Хотелось бы узнать, сколько весят объекты и возможность их удаления из памяти, чтобы оптимизировать работу и убрать лаги

[Вадим]

Stepan1998,

при скролле создаются новые экземпляры класса

А обработчик сролла с дебаунсом\тротлингом? Почему бы не создать элементы заранее а потом только отображать? Происходит ли рефлоу при скроле?

Я это к тому, что, память, скорее всего, последнее в чью сторону Вам стоит копать.

[Вадим]

Stepan1998, как правило, устройства с малой памятью, особенно мобильные, имеют не самый мощные CPU и GPU. Вот эти ребята более вероятно что не справляются, нежели память. Особенно когда речь идёт про "при скроле".

[Stepan1998]

Это что? )
Происходит ли рефлоу при скроле?
Подгрузка происходит по мере листания до низа
Мне сказали, что стоит оптимизировать js
Вот и стало интересно узнать сколько весят экземпляры класса (объемного слайдера) в js или они ничтожно малы, что даже тысяча экземпляров это капля в море, которая ни на что не повлияет и только большое количество html элементов может вызывать лаги?

[Вадим]

Stepan1998,

Это что

https://habr.com/ru/post/224187/

Объекты оптимизируются в движке, вплоть до того, что несколько объектов могут объединяться и там ещё много всякого.

В вашем сценарии если изначально при скролле не лагает а начинает лагать потом, при длительном скроле, то это скорее всего происходит из-за большого количества HTML элементов, ну и да, из-за памяти может в том числе.
Например, лет 5-7 назад у меня даже десктоп хром начинал лагать если очень долго ленту какую-нибудь скролил, например в ВК.

Так что ниже Вам подсказали одну из хороших практик - скрывать элементы вне вьюпорта. Погуглите - статей на эту тему найти не сложно. Типа оптимизация бесконечного скролла и тп.

Answer 1

[rPman]

провести эксперимент не вариант что ли?

по теме вопроса, чтобы не лагало, вместо создания новых элементов, рекомендуется их переиспользывание

грубый пример если хочешь создать что то типа excel таблицы, с огромным количеством строк, вместо буквального создания для каждой ячейки html элемента, лучше создать только видимые элементы и менять их содержимое при виртуальном скроллинге, кстати в такой реализации можно вместо изменения содержимого всех элементов, перемещать верхние, исчезающие при скроллинге - вниз (или наоборот нижние вверх), задавая новое значение только им.

создание нового dom элемента (а точнее изменение чего либо что меняет положение и размеры элементов на экране) на порядок более медленное чем изменение его содержимого или цвета

p.s. а еще есть самостоятельное рисование на canvas, плюс webgl, позволяют отрисовывать очень сложные интерфейсы
p.p.s. еще есть svg но он медленнее

Comments

[Stepan1998]

Создаются новые блоки при скролле, они небольшие, но чем дальше скролим, тем больше блоков
Так же с ними создаются экземпляры классов
Вот и стало интересно сколько что весит, чтобы понять, есть ли смысл удалять новые объекты и по мере видимости только их создавать снова

[rPman]

я же написал не надо ни новые создавать ни старые удалять
вместо удаления, перемещай невидимые старые на новое место

манипуляции с dom самые дорогие по времени и памяти (создание удаление а так же меняющие размер и положение других элементов, т.е. избегай взаимной зависимости элемнетов, пусть будут абсолютные координаты)

[Stepan1998]

rPman, а есть пример такого?
Вроде на словах что-то понятно, но пытаюсь представить, как это реализуется, начинается беда
Например у нас по умолчанию 10 блоков новостей
Мы прокрутили вниз, что дальше?
Если мы верхний блок опустим на место последнего, то нам в нём всё равно надо менять текст и картинки, а так же скролл не увеличит свою высоту
По каким ключевым словам можно найти видео того о чём вы рассказываете?

[rPman]

10 блоков это не то количество, ради которого стоило бы заморачиваться
речь идет о тысячах и десятках тысяч элементов.

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

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

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

[Stepan1998]

rPman, а как провести иксперемент, чтобы увидеть, сколько памяти потребляет новый блок и новый экземпляр класса?