Как работает ASYNC и DEFER

211

20 декабря 2019, 06:10

уважаемые форумчане, хочу задать вопрос о том, почему у меня код работает не так как я хочу. У меня есть документ HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/style.css">
  <script defer src="js/code.js"></script> //Обратите внимание на DEFER
</head>
<body>
  <div class="container">
    <div class="container__top top">
      <header><div class="container__header header">Header</div></header>
      <div class="container__content content"></div>
    </div>
    <footer><div class="container__footer footer">Footer</div></footer>
  </div>
</body>
</html>

К нему подключен файл стилей

* {
  margin: 0;
  padding: 0; 
}
body, html {
  height: 100%;
  font-family: "Source Sans Pro", sans-serif, fantasy;
  font-size: 16px; 
}
.container {
  min-height: 100%;
  min-width: 320px;
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  flex-direction: column; }
  .container__top {
    flex-grow: 1; }
  .container__header {
    min-height: 50px;
    background-color: crimson; }
  .container__footer {
    min-height: 50px;
    background-color: dodgerblue; }

И некий скрипт, который в самом начале запрашивает пользовательский ввод

"use script"
let a = prompt("Введите имя");

Вот вроде поставил DEFER, чтобы сначала страница загрузилась, и показалась, а потом сработал скрипт, но что-то не то. Добавляю в скрипт

window.onload = function() { 
  let a = prompt("Enter your name");
};

И ничего не меняется. То-есть я понимаю, что надо отличать парсинг, от построения и что DEFER указывает только на то, что скрипт запустится после парсинга, но как все-таки добиться того, чтобы сначала всё загрузилось, а потом запустился код?