framework icon indicating copy to clipboard operation
framework copied to clipboard

[Performance] URL changes when scrolling discussion even when it doesn't have to (it's the same)

Open rafaucau opened this issue 3 years ago • 0 comments

Bug Report

Current Behavior I recently plugged Cloudflare Zaraz (Google Analytics) into my forum and the page views suddenly jumped strangely. It turned out that tracking URL changes detects it even if it doesn't change. This doesn't happen on other sites, so I started digging deeper and found that Flarum always changes the URL when scrolling the discussion, no matter if the link needs changing. If the link doesn't change, Flarum sets it to the same.

Steps to Reproduce I found this code that allows you to track URL changes. If you paste it in the browser console and scroll the page, you can see when Flarum changes the URL.

;(function() {
    const pushState = history.pushState;
    const replaceState = history.replaceState;

    history.pushState = function() {
        pushState.apply(history, arguments);
        window.dispatchEvent(new Event('pushstate'));
        window.dispatchEvent(new Event('locationchange'));
    };

    history.replaceState = function() {
        replaceState.apply(history, arguments);
        window.dispatchEvent(new Event('replacestate'));
        window.dispatchEvent(new Event('locationchange'));
    };

    window.addEventListener('popstate', function() {
        window.dispatchEvent(new Event('locationchange'))
    });
})();

window.addEventListener('locationchange', function(){
    console.log('Location changed!');
})

Expected Behavior The new link should be set only if necessary, i.e. when the user scrolls down to the next post. This will prevent problems with analytics tools and probably improve performance.

Screenshots

https://user-images.githubusercontent.com/25438601/165382598-006895b8-07d7-4199-99ec-d504df475b31.mp4

Google Tag Manager:

https://user-images.githubusercontent.com/25438601/165408423-2e96ed21-bd75-442b-8fff-a33848b68e04.mp4

Environment

  • Flarum version: 1.2.1
  • Webserver: Any
  • Hosting environment: Any
  • PHP version: Any
  • Browser: Any

Possible Solution For best performance, it would be ideal to use an Intersection Observer to track which post is currently being viewed.

rafaucau avatar Apr 26 '22 20:04 rafaucau