How to build augmented reality for Single Page Application using browser extension?
-
Upload
chaykaborya -
Category
Software
-
view
164 -
download
2
Transcript of How to build augmented reality for Single Page Application using browser extension?
Boris Mossounovfacebook.com/mossounov
linkedin.com/in/borismossounovanotherguru.me
How to build augmented reality for Single Page Applicationusing browser extension?
Boris Mossounovfacebook.com/mossounov
linkedin.com/in/borismossounovanotherguru.me
How to build augmented reality for Single Page Applicationusing browser extension?
orsetInterval MutationObserver
Pain:
Content Script & Styles are embedded and augment webpage only once when page is loaded.
In Single Page Applications webpage changes without reload.
You gotta pick optimal mechanism for page augmentation timing.
Option 1. window.setInterval()
tMeanwhile in inactive tabs…
Option 1. window.setInterval()
The more tabs the more overhead.
You’ve got overhead regardless whether the user is busy or idle.
The lesser timeout the more overhead.
The longer timeout the more noticeable is the augmentation lag.
Option 2. MutationObserver
t
in theory:
in reality:
meanwhile in other tabs:
but in some tabs:
DOM tree modifications happen in bulk usually. Sometimes in cycle.
The overhead does not depend on the number of open tabs.
Somewhere in Single Page Application interval triggered DOM tree modifications can occur.
DOM tree modification callback can produce another DOM tree modification. You can end up in endless loop.
Option 2. MutationObserver
setInterval MutationObserver
setTimeout &MutationObserver
Option 3. MutationObserver + setTimeout
t
meanwhile in other tabs:
but somewhere:
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
DOM tree modification callback is fired after a bunch of modifications.
Inactive tabs do not produce overhead.
It takes some effort and smarts to implement this mechanism carefully without endless loops.
Option 3. MutationObserver + setTimeout
Questions?