Page reload in Chrome unnecessarily triggers bound events just prior to reloading the page

Behavior observed on 14.0.835.202. edit : (on Windows Seven x64)

It's not the jquery fault : The DOMContentLoaded is fired another time just before page unload.

Simple test to check this :

 function startpage() {   
     console.log('page loaded');
   }   

   function unloadPage(){
       console.log("page unloaded");
   }
document.addEventListener("DOMContentLoaded", startpage, false);
window.onbeforeunload = unloadPage;

You should see after a refresh:

page loaded
page loaded // should not be here and is not on Firefox.
page unloaded
loaded

In your console (with persistence on)

I think it's simply a Chrome bug. Not a console one, as timestamping proves it's not a duplicate.

Edit : the same Chrome version but running OSX seems ok (see comment below). It tends to confirm that it's a bug.

In Chrome 13 for Mac I am not seeing this behavior. After you load the page for the first time, and before you hit refresh, do you clear out the console? Is there a chance you are seeing the old console output (I know some browsers like to keep a previous page's console output around)?

I would not expect those two events to be fired twice on a refresh, so my guess would be stale console, either by design because it was a manual refresh or perhaps Chrome 14 has bugs with their dev console.

Just to add some notes on testing, using chrome 15.0.874.102 and windows 7 x86:

This is the script I used for testing from my understanding of the question:

<html>
    <head>
        <script language="javascript">
            var r = Math.floor(Math.random() * 101);

            function reloadLink() {
                console.log('----Reload Link----');
            }

            function startpage() {
                console.log('---Loaded. ID: ' + r + ' Time: '+new Date());
            }

            function unloadPage() {
                console.log('Un-loaded. ID: ' + r + ' Time: '+new Date());
            }

            document.addEventListener("DOMContentLoaded", startpage, false);
            window.onbeforeunload = unloadPage;

        </script>
        <title>Testing Chrome</title>
    </head>
    <body>
        <a href="" onclick="reloadLink();">Reload Page</a>
    </body>
</html>

The following is a cumulative log, each new addition highlighted in bold:

On initial page load I get:

---Loaded. ID: 68 Time: Tue Oct 25 2011 21:35:18 GMT+0100 (GMT Daylight Time)

Pressing F5 whilst focused on the HTML page:

---Loaded. ID: 68 Time: Tue Oct 25 2011 21:35:18 GMT+0100 (GMT Daylight Time)
---Loaded. ID: 68 Time: Tue Oct 25 2011 21:35:18 GMT+0100 (GMT Daylight Time) <-----
Un-loaded. ID: 68 Time: Tue Oct 25 2011 21:36:12 GMT+0100 (GMT Daylight Time)
---Loaded. ID: 78 Time: Tue Oct 25 2011 21:36:12 GMT+0100 (GMT Daylight Time)

Pressing the link on the HTML page to reload the page:

---Loaded. ID: 68 Time: Tue Oct 25 2011 21:35:18 GMT+0100 (GMT Daylight Time)
---Loaded. ID: 68 Time: Tue Oct 25 2011 21:35:18 GMT+0100 (GMT Daylight Time)
Un-loaded. ID: 68 Time: Tue Oct 25 2011 21:36:12 GMT+0100 (GMT Daylight Time)
---Loaded. ID: 78 Time: Tue Oct 25 2011 21:36:12 GMT+0100 (GMT Daylight Time)
----Reload Link----
Un-loaded. ID: 78 Time: Tue Oct 25 2011 21:38:25 GMT+0100 (GMT Daylight Time)
---Loaded. ID: 22 Time: Tue Oct 25 2011 21:38:25 GMT+0100 (GMT Daylight Time)

Pressing F5 whilst focused on the console:

As you can see the anomaly only occurs when directly reloading the page (I have highlighted the anomaly with an arrow), whilst focused on the page itself.
Also, if you notice both the ID and the timestamp of the anomaly they are the same even after waiting several seconds before hitting F5 - so it appears the code isn't running for a second time so to speak, but the console is logging a copy for some reason.

Adding further to the conclusion:

If you select the timeline tab, and record both an initial page load, and an F5 reload, you will notice the two functions to write to the console are only run once, further compounding it looks like a possible error on chromes console:

Screenshot Show Image - Timeline 1 (initial load) Show Image - Timeline 2 (F5 reload)

Page reload in Chrome unnecessarily triggers bound events just prior to reloading the page

Tags:

Javascript

Jquery

Google Chrome

Google Chrome Devtools

Jquery Events

Related

Recent Posts