The head schedules a script with defer, then the body creates the controls that script can safely initialize.

Program

Scripts are resources too. The defer attribute lets a script download while parsing continues, then run after the document is ready.

defer_script.html
<head>
  <script defer src="app.js"></script>
</head>
<body>
  <button id="save">Save</button>
  <p id="status">Waiting</p>
</body>
defer defer delays script execution until the document has been parsed.
script src The src attribute points to the external JavaScript file.