Имеет ли смысл с помощью javascript скрывать часть элементов DOM для оптимизации мобильного приложения?

Question

[Alex]

Здравствуйте.

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

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

Есть ли смысл после закрытия активити не просто его скрывать за пределы видимости WebView, но и очищать блок div в котором находится контент с гиф, картинками и видео - помещая весь html в переменную JS, а после возвращать из неё при открытии этого окна пользователем?

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

Answer 1

[Alex]

Тут вам нужно провести исследование, так как есть много нюансов
Например:
Браузер может самостоятельно прекращать обработку тех узлов которые он определяет как "не отображаемые". Но Определит ли браузер узел как "не отображаемый" зависит от ваших стилей.

Узлы которые пользователь не видит, стоит удалять из DOM чтобы освободить ресурсы клиента. Но если у вас есть необходимость в быстром восстановлении узла, и вы будете хранить его html в переменной JS то тут не понятно где будет больше затрат.

Насколько я понимаю, у вас что-то вроде ленты активностей? Тогда можно сделать так: Один контейнер, в котором отображаются любые активити. При чем, каждая новая открытая заменяет собой предыдущую. Так, все старые узлы будут удаляться из DOM, а новые будут доступны для быстрого просмотра, если пользователь закроет активити и сразу захочет открыть её снова.

Comments

[Alex]

Да можно и так сказать. Есть несколько активити с лентами из контента. Желательно бы сохранять все данные из всех активити, потому что их приходится часто пользователю открывать и закрывать. Поэтому сохранять данные только последнего открытого активити, не получится. Так как пользователь может просто замучатся от загрузок и от пролистывания ленты чтобы вернутся на то место где остановился .
Поэтому интересно было услышать мнение именно по вырезанию html и сохранению их в JS, насколько это оправдано, и не возникнет ли так что это займет еще больше ресурсов у клиента ))

[Alex]

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

Так же можно использовать, скажем, idb для хранения данных не в оперативной памяти

[Alex]

Alex, придётся сохранять стейт активити полностью, т.е. все что пользователь пролистал придется разом подгружать. Думаю вряд ли это будет оптимизацией))
А всё таки по поводу скрытых элементов, как это можно проанализировать. Достаточно просто скрытия за пределами элемента, или назначить ему например display none чтобы браузер точно не просчитывал его, или единственное только если вырезать весь html в активити и внести в переменную js например.
Не представляю даже как узнать точно поведения в этих случаях учитывая что webview на движке Chroimum, ну и по сути аналогичен думаю Хрому.

Answer 2

[historydev]

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

Comments

[Alex]

а если скрыть их css-ом display none, или всё таки думаете лучше будет вырезать html и хранить его в js до вызова активити?

[historydev]

alexjet73, всё таки знаю, а не думаю, скройте своим display: none и пройдите google load page speed test