如何让HTML代码先于JavaScript执行，避免prompt阻塞页面渲染？

我需要浏览器先渲染页面中的<h1>标签，再执行JavaScript里的prompt()弹窗，但实际情况是prompt()总是先弹出，阻塞了HTML渲染。试过把<script>标签放在<head>、<body>末尾、<body>外甚至</html>之后，问题都没解决。

核心原因 #

浏览器解析HTML时，遇到<script>标签会立即暂停解析和渲染，优先执行JS代码——而prompt()是同步阻塞API，执行时会完全卡住浏览器的渲染进程，导致之前的HTML内容还没来得及绘制到页面上，弹窗就先出现了。

解决方案：等待DOM渲染完成后执行JS #

使用DOMContentLoaded事件，确保浏览器完成DOM结构的解析和渲染后，再触发弹窗逻辑。

修改后的HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Keyless Car</title>
</head>
<body>
    <h1>Hello there, this is your Keyless Car.</h1>
    <script type="text/javascript" src="Keyless car.js"></script>
</body>
</html>

修改后的JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
    var age = prompt("How old are you?");

    if (Number(age) < 18){
        alert("Sorry, you are too young to drive this car. Powering off");
    }
    else if (Number(age) === 18){
        alert("Congratulations on your first year of driving. Enjoy the ride!");
    }
    else{
        alert("Powering On. Enjoy the ride!");
    }
});

额外说明 #

• DOMContentLoaded事件在浏览器完成所有DOM元素解析（无需等待图片、样式表等外部资源加载）时触发，刚好满足“先渲染HTML再执行弹窗”的需求。
• 若使用window.onload，会等所有外部资源（图片、字体等）加载完毕才执行，触发时机更晚，除非需要依赖外部资源，否则优先选择DOMContentLoaded。

内容的提问来源于stack exchange，提问作者ArshiaZ