Develop Reference

Chrome loads js events before DOM loads

I was doing some javascript testing on chrome v71.0.3578.98, with the window.onload and I'm experiencing the js happening before the DOM loads
Ref gif: https://imgur.com/nxHYjRr
here is the code just wrapped in a simple html tag.
<h1>Title...</h1>
<p>lorem500...</p>
<script>
function pageLoad() {
alert('I\'m alive');
}
window.onload = pageLoad;
</script>
So in this basic page I tried running it in chrome v71 and the javascript ran first, but in firefox, opera it loaded after page loaded, as expected. Any thoughts?

The problem is that alert blocks - while an alert popup is visible, further page rendering is prevented, and when window.onload runs, the page may well not have rendered at all yet, especially if there isn't much HTML at all before it. All elements do exist in the document when the onload runs, they just may not be visible. (It depends on the browser)
alert is very user-unfriendly, as well as being difficult to work with (as you're encountering). Use console.log or a proper modal instead:
<h1>Title...</h1>
<p>lorem500...</p>
<script>
function pageLoad() {
console.log('I\'m alive');
}
window.onload = pageLoad;
</script>
If you had to use alert, only alert after an instant setTimeout, thus giving the browser a chance to paint the page before the alert gets called, just in case the browser hasn't rendered the page yet:
<h1>Title...</h1>
<p>lorem500...</p>
<script>
function pageLoad() {
setTimeout(() => {
alert('I\'m alive');
});
}
window.onload = pageLoad;
</script>

window.onload doesn't work at all

I made an extension for youtube new layout, but since yesterday (they had some issues with the layout) the extension stopped working.
It seems like it does not respond to the action window.onload event as I am using like so:
window.onload = function() {
$('body').on('mouseenter', '#thumbnail', function() {
console.log('test');
});
};
For some reason every time I hover on a video thumbnail, the test is not being outputted at all. It might work once every 50 times or so.
I have jquery injected above this script as well and they are both inside the head tags. Can youtube block window.onload event or am I doing something completely wrong?

Raising alert after the page loads completely

I want to load stackoverflow page and then raise the alert, strictly one after the other, without using frameworks like jQuery etc.
I have gone through the answers here and visited this too.
I ran the following in browser console. The page loads but the alert is not raised. I am using chrome in windows 8.1.
Try #1:
window.location.href = 'https://stackoverflow.com/';
window.onload = function () { alert("It's loaded!") }
Try #2:
window.location.href = 'https://stackoverflow.com/';
if(document.readyState === "complete") {
//Already loaded!
window.onload = function () { alert("It's loaded!") }
}
else {
//Add onload or DOMContentLoaded event listeners here: for example,
window.addEventListener("onload", function () {/* your code here */}, false);
//or
//document.addEventListener("DOMContentLoaded", function () {/* code */}, false);
}
Try #3:
window.location.href = 'https://stackoverflow.com/';
var everythingLoaded = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(everythingLoaded);
alert("It's loaded!");
}
}, 1000);
Try #4:
Tried setTimeout() too but doesn't work either.
I have tried above examples with window.location.replace() also.
How do I make this work?
P.S: I am novice with javascript. The above codes are not mine but I am just trying to work them out. I don't claim to have understood them completely either.

As Barmar pointed out this is not possible. The new page load will remove all JavaScript from the old page. Some alternatives are:
You can open the new page or in a new tab using the window.open api and attach an event handler.
You can load the page inside a frame (if it doesn't have any restrictions preventing that) and add a load event to the frame.
You can load the page using XMLHttpRequest (or a library of your choice) and insert the result into a <div> though not all of it will probably work.
You don't say what you want to do once the page has loaded. In most cases (generally unless you own the second page) it will not be possible to access any information on the second page.

Attaching events to window.onload

I would like attach a function to window.onload so that it executes after everything is load. I have tried to do:
window.addEventListener('load', myFunction ,false);
window.onload = myFunction;
window.attachEvent('onload', myFunction); (this way does not work on Chrome)
What happens to me is that this function, looking at the Chrome's console (Network tab) is executed before window.onload (before the red line). I know this, because myFunction tries to load a remote javascript file and this file is loaded before red line.
I have also tried something more simple:
$(function() {
console.log("1111111");
});
window.onload=console.log("222222);
The output of that is:
22222222222
11111111111
Why ??? The first part should execute after DomContentLoaded and the second one after window.load isnt it? So why is this happening?

// This way does not work in Chrome
That's because you're using onload instead of load.

What event name use in Opera's userJS to trigger a function when page finished loading and has downloaded all its assets like img,script,css etc.?

This is my code:
document.addEventListener('load', function () {
alert(document.getElementsByTagName("DIV").length);
}, false);
//'load' event above doesn't show any response, alert isn't showing
alert(document.getElementsByTagName("DIV").length);
// this alert returns 0 it looks like it is called before the page DOM has loaded
window.onload = function() {
alert(document.getElementsByTagName("DIV").length);
};
//returns 0, what the... it seems DOM hasn't loaded also
// but only on some sites, here on stackoverflow and youtube it works,
//but on google.com and many other websites (pcworld.com) shows 0
The same situation in latest stable and alpha Operas.

I suggest you simply do
window.addEventListener('load', function(){}, false)
like you would in a normal script. You could use opera.addEventListener('BeforeEvent.load', ...) but that might not fire if the page's scripts do not listen for load events in some Opera versions.
Some other background reading:
window.onload vs document.onload
addEventListener("input", callback) doesn't work in opera?