Борис Мосуновfacebook.com/mossounov

linkedin.com/in/borismossounovanotherguru.me

Особенности построения дополненной реальностидля Single Page Application

Борис Мосуновfacebook.com/mossounov

linkedin.com/in/borismossounovanotherguru.me

Особенности построения дополненной реальностидля Single Page Application

илиsetInterval MutationObserver

Проблема:

Content Script & Styles загружаются один раз, дополняя страницу.

В Single Page Application страница изменяется без перезагрузки.

Нужно выбрать оптимальный механизм дополнения реальности.

Вариант 1. window.setInterval()

tТем временем в неактивных вкладках….

Вариант 1. window.setInterval()

Чем больше вкладок, тем больше нагрузка.

Нагрузка не зависит от того, работает пользователь или нет.

Чем меньше таймаут, тем нагрузка больше.

Чем больше таймаут, тем заметней лаг между изменением страницы и ее дополнением.

Вариант 2. MutationObserver

t

в теории:

в реальности:

в остальных вкладках:

но кое где:

Изменения обычно происходят пачками, в цикле.

Нагрузка не зависит на прямую от количества вкладок.

Где-то в Single Page Application может через интервал происходить изменение DOM дерева.

Обработчик изменения страницы сам может порождать изменение страницы, можно свалиться в бесконечный цикл.

Вариант 2. MutationObserver

setInterval MutationObserver

setTimeout &MutationObserver

Вариант 3. MutationObserver + setTimeout

t

в остальных вкладках:

но кое где:

200 ms 200 ms 200 ms 200 ms 200 ms

200 ms 200 ms 200 ms 200 ms 200 ms 200 ms 200 ms 200 ms

Обработка изменений страницы происходит после того как прошла пачка изменений.

Неактивные вкладки чаще всего не создают дополнительной нагрузки.

Нужны ровные руки, чтобы реализовать правильно.

Вариант 3. MutationObserver + setTimeout

Вопросы?