小编Maa*_*ins的帖子

为什么浏览器在执行JavaScript之前并不总是完成前面HTML的渲染？

问题是关于以下代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
</head>
<body>
    One line of HTML code
    <script>
        // Synchronous delay of 5 seconds
        var timeWhile = new Date().getTime();
        while( new Date().getTime() - timeWhile < 5000 );
    </script>
</body>

Run Code Online (Sandbox Code Playgroud)

我在Firefox和Chrome中对它进行了测试,它们在5秒后显示(渲染):"一行HTML代码",而不是在5秒内.为什么浏览器会这样做？

我理解为什么浏览器在执行JavaScript时必须停止渲染,因为你可以用JavaScript改变元素的样式(作为例子).如果浏览器必须在同一时刻完全显示和更改内容,则会出现问题.这就是浏览器在执行JavaScript时阻止渲染的原因.

在上面的示例中,当从执行JavaScript开始时,"HTML解析器"已经解析了"一行HTML代码".它必须,因为JavaScript可以包含例如document.write,所以附加的字符串必须在前面的HTML之后.显然,在"解析HTML"和显示/呈现相同的HTML之间有一段时间,因为否则此示例中的浏览器已经在5秒内显示了某些内容,但事实并非如此.

当您用大量HTML代码替换"一行HTML代码"时,浏览器将在5秒内显示一些内容,因此原则上可以显示一些内容.

如果我是一个浏览器,那么我会这样做: