The other answers all seem out of date
First off, putting scripts at the top and using
You can just move your scripts the the bottom of your html
<html> <head> <title>My Page</title> </head> <body> content <script src="some-external.js"></script> <script> some in page code </script> </body> </html>
The only reason people used
window.onload is because they mistakenly believed scripts needed to go in the
head section. Because things are executed in order if your script was in the head section then the body and your content didn’t yet exist by definition of execute in order.
The hacky workaround was to use
window.onload to wait for the rest of the page to load. Moving your script to the bottom also solved that issue and now there’s no need to use
window.onload since your body and content will have already been loaded.
The more modern solution is to use the
defer tag on your scripts but to use that your scripts need to all be external.
<head> <script src="some-external.js" defer></script> <script src="some-other-external.js" defer></script> </head>
This has the advantage that the browser will start downloading the scripts immediately and it will execute them in the order specified but it will wait to execute them until after the page has loaded, no need for
window.onload or the better but still unneeded