为什么在执行JavaScript之前，浏览器并不总是完成前面的HTML的渲染？ [英] Why is a browser not always finishing rendering of the preceding HTML, before executing JavaScript?
问题描述
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< title>测试< /标题>
< / head>
< body>
一行HTML代码
< script>
//同步延迟5秒
var timeWhile = new Date（）。getTime（）;
while（new Date（）。getTime（） - timeWhile< 5000）;
< / script>
< / body>
我在Firefox和Chrome中测试了它们，并显示（呈现）：一行HTML代码5秒后，而不是5秒内。为什么浏览器会这样做？
我理解为什么浏览器在执行JavaScript时必须停止渲染，因为您可以使用JavaScript更改元素样式（作为示例） 。如果浏览器必须同时显示和更改内容，它会带来问题。这就是浏览器在执行JavaScript时阻止呈现的原因。
在上面的例子中，当开始执行JavaScript时，一行HTML代码已经被HTML解析器。它必须，因为JavaScript可以包含例如document.write，所以附加字符串必须位于前面的HTML之后。显然，在解析HTML和显示/呈现相同的HTML之间有一段时间，因为否则此示例中的浏览器将在5秒内显示某些内容，但事实并非如此。
当您用很多HTML代码替换一行HTML代码时，浏览器将在5秒内显示一些内容，因此原则上可以显示一些内容。
如果我是浏览器，那么我会这样做：
在这样的例子中，浏览器可以在5秒前显示一些内容。在渲染方面，这是一个巨大的提升。
也许这是浏览器可以改进的地方，但也许还有另外一个原因。也许有人知道更多关于它，并可以解释我。
尝试外部化上面示例中的内联JavaScript。
在内联脚本中，运行脚本所花的时间可能会改变DOM。尝试在变异时呈现DOM是一团糟。因此，渲染仅发生在JS停顿时的点上，因此DOM稳定。
在等待外部脚本下载时，脚本运行停止，所以DOM可以被安全地渲染。下载的JS将不会运行，直到渲染完成。
希望这有助于！
问候，
Eby
The question is about the following code:
<!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>
I tested it in Firefox and Chrome and they are showing (rendering): "One line of HTML code" after 5 seconds and not within 5 seconds. Why is a browser doing that?
I understand why a browser has to stop rendering when executing JavaScript, because you can change the style of elements with JavaScript (as an example). It would give problems if the browser has to show and change content exactly at the same moment. That's why a browser is blocking rendering while executing JavaScript.
In the example above when starting with the executing of JavaScript, "One line of HTML code" is already parsed by the "HTML parser". It has to, because JavaScript can contain for example document.write, so then the appended string has to come after the preceding HTML. Apparently there is some time between "parsing HTML" and showing / rendering that same HTML, because otherwise the browser in this example would already show something within 5 seconds, but that's not the case.
When you replace "One line of HTML code" by a lot of HTML code then the browser will already show some content within the 5 seconds, so in principle it's possible to show already some content.
If I would be a browser then I would do:
- Parse "One line of html code"
- Seeing some block of JavaScript
- Finish rendering the HTML, preceding the "JavaScript block", so the browser will show at this point: "One line of HTML code"
- Now pause rendering and execute the JavaScript code.
- After executing the JavaScript code, start rendering again.
In an example like this, the browser could show some content 5 seconds earlier. That's a big speed gain in terms of rendering.
Maybe it's something that browsers can improve, but maybe there is another reason. Maybe someone knows more about it and can explain me that.
Try to externalise the inline javascript which you have in above example.
In the inline script, the time is taken up running the script, which might change the DOM. Trying to render the DOM while it's mutating is a recipe for a mess. So rendering only happens at points when the JS is stalled, and therefore the DOM is stable.
While waiting for an external script to download, the running of scripts is stalled, so the DOM can be rendered safely. The downloaded JS won't be run until the rendering is complete.
Hope this Helps!
Regards, Eby
这篇关于为什么在执行JavaScript之前，浏览器并不总是完成前面的HTML的渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
