JavaScript执行顺序异常：JS在HTML渲染前执行问题求助

嘿，我完全懂你碰到的这个困扰——当浏览器加载HTML页面时，是从上到下逐行解析渲染的，一旦遇到<script>标签，就会立刻暂停页面的渲染流程，优先执行里面的JavaScript代码。这就是为什么你弹出alert("First Script Block")时，下面的<p>Paragraph 2</p>还没显示出来的原因，alert弹窗直接阻塞了后续的HTML解析和渲染。

结合你正在学习《Beginning JavaScript》的场景，给你几个实用的解决办法：

1. 把脚本移到页面底部（最简单直接） #

最直观的方式是将<script>标签放到</body>闭合标签的前面，这样浏览器会先渲染完所有HTML内容，再执行JavaScript代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Chapter 1, Example 2</title> 
</head> 
<body bgcolor="white"> 
    <p>Paragraph 1</p> 
    <p>Paragraph 2</p> 
    <script> 
        // script block 1
        alert("First Script Block"); 
    </script> 
</body>
</html>

修改后，两个段落会先完整渲染出来，再弹出alert弹窗。

2. 使用DOMContentLoaded事件（更灵活的现代方案） #

如果后续你需要脚本留在页面上方（比如要操作DOM元素），可以监听DOMContentLoaded事件——它会在浏览器完成HTML解析、DOM树完全构建好之后触发，这时所有页面元素都已经准备就绪：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Chapter 1, Example 2</title> 
    <script> 
        document.addEventListener('DOMContentLoaded', function() {
            alert("First Script Block"); 
        });
    </script> 
</head> 
<body bgcolor="white"> 
    <p>Paragraph 1</p> 
    <p>Paragraph 2</p> 
</body>
</html>

这个方法能保证脚本在页面渲染完成后执行，同时也不限制脚本的位置，是前端开发中常用的最佳实践之一。

3. 补充下底层逻辑（帮你吃透原理） #

再啰嗦两句核心机制：浏览器解析HTML时，遇到脚本（不管内联还是外部）都会暂停渲染，因为脚本可能会修改DOM结构或样式，浏览器必须先执行完脚本，才能确定后续要渲染的内容。你遇到的alert弹窗会阻塞脚本执行，自然也卡住了后续的HTML解析流程，所以Paragraph2要等alert关闭后才会显示。

希望这些方法能帮你顺利推进学习，继续加油！

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