Question

我在渲染html之前执行JavaScript的问题。

我正在使用 Beginning JavaScript 一书中的代码示例。

以下是代码：

＆＃13;

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

＆＃13;

加载页面时：

页面为空白/白色。
弹出第一个提醒。
我点击OK。
显示第一段。
然后弹出第二个警告。
我点击OK
页面从白色变为红色。
然后显示第二和第三段。

我期待按照我编写的顺序显示所有内容，这是本书中描述的行为。

我在Chrome和Firefox中尝试过相同的结果。另外，我下载了示例代码，它与我编写的代码完全相同。

我的期望是否错误，页面应按顺序呈现？

Answer 1

代码按照您编写的顺序执行。

不，你不应该期望渲染在任何特定点发生。您只需更改文档，浏览器就会在其认为合适时进行渲染。这是一种性能优化，如果您多次更改背景颜色，则不会看到它闪烁，而只是应用最后一个值。或者，如果您更改了多个CSS属性，您会看到所有这些属性同时应用，而不是一个接一个地应用。

Chrome只是在渲染更新之前等待您的脚本执行完成。使用同步alert阻止执行当然会混淆。

Javascript执行顺序不正确

1 个答案: