[Tracker] Use ResizeObserver instead of polling for document height#6174
[Tracker] Use ResizeObserver instead of polling for document height#6174
Conversation
window.scrollY and window.innerHeight are compositor-cached values that never trigger layout recalculation, unlike el.scrollTop and el.clientHeight. The fallbacks only existed for IE which is already unsupported.
| }).observe(document.documentElement) | ||
|
|
||
| document.addEventListener('scroll', function () { | ||
| currentDocumentHeight = getDocumentHeight() |
There was a problem hiding this comment.
No need to recompute document height on every scroll event. If the document height changes at any point, ResizeObserver will keep it updated.
| // next 3 seconds. This makes sure dynamically loaded content is | ||
| // also accounted for. | ||
| var count = 0 | ||
| var interval = setInterval(function () { |
There was a problem hiding this comment.
No need to poll the document for height changes during initial load. Any time DOM is loaded and updated, ResizeObserver will keep currentDocumentHeight variable in sync.
| function getCurrentScrollDepthPx() { | ||
| var body = document.body || {} | ||
| var el = document.documentElement || {} | ||
| var viewportHeight = window.innerHeight || el.clientHeight || 0 |
There was a problem hiding this comment.
By removing IE support for engagement tracking, these fallbacks are not necessary since window.scrollY and window.innerHeight are well-supported:
https://caniuse.com/mdn-api_window_innerheight
https://caniuse.com/mdn-api_window_scrolly
|
Analyzed 1026 tracker script variants for size changes. Main variants:
Important legacy variants:
Summary:
In total, 0 variants brotli size increased and 1025 variants brotli size decreased. |
1 participant
Changes
Replaces document height polling with
ResizeObserverto avoid forced reflows.Fixes #5727
ResizeObserveris a fairly modern API. Should be OK for the main script since overall it doesn't have worse support than fetch-with-keepalive. The only gap I was able to find is Edge versions less than 79 do not supportResizeObserverwhile fetch support goes back longer on Edge. So we will lose pre-2020 Edge versions but they have negligible usage worldwide. It would be good to have some kind of feature matrix for tracker script and check against caniuse data when we update it.Instead of keeping the old code as fallback for
compatcode, I've disabled engagement tracking completely incompatmode. Without fetch-with-keepalive engagement data isn't reliable anyways. But it should probably be checked with sites that actually use thecompatmode.Disabling engagements in
compatmode also allowed me to remove some fallbacks ingetCurrentScrollDepthPxfunction which are not relevant in modern browsers (window.scrollY and window.innerHeight are way better supported than fetch and ResizeObserver, the fallbacks were only relevant for IE).Verification
On a local page with plausible installed, I profiled a scripted journey where page is loaded and scrolled after waiting a half a second. The old code produced 27 document reflows, with this PR there were 3 reflows. None of the remaining 3 were triggered by our script, they were all internal chrome events.