后果javascript可以在代码中有document.write吗？ [英] Consequences javascript can have document.write in the code?
问题描述
关于这篇文章的问题是： https://www.html5rocks .com / zh / tutorials / speed / script-loading /
The question is about this article: https://www.html5rocks.com/en/tutorials/speed/script-loading/
他们这样说：
<script src="//other-domain.com/1.js"></script>
<script src="2.js"></script>
啊，幸福的简约。在这里，浏览器将并行下载两个脚本并尽快执行它们，维护它们的顺序。 2.js将在1.js执行（或未能执行）之前执行，1.js将不执行，直到前一个脚本或样式表执行等等。
Ahh, blissful simplicity. Here the browser will download both scripts in parallel and execute them as soon as possible, maintaining their order. "2.js" won’t execute until "1.js" has executed (or failed to do so), "1.js" won’t execute until the previous script or stylesheet has executed, etc etc.
不幸的是，浏览器会阻止进一步呈现页面，而这一切都在发生。这是因为来自网络的第一个时代的DOM API允许将字符串附加到解析器正在咀嚼的内容上，例如document.write。
Unfortunately, the browser blocks further rendering of the page while all this is happening. This is due to DOM APIs from "the first age of the web" that allow strings to be appended onto the content the parser is chewing through, such as document.write.
我的问题是：当所有这一切发生时，浏览器会阻止进一步呈现页面。
My question is about: "the browser blocks further rendering of the page while all this is happening".
让我们举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
SOME HTML
<script>
document.write( 'bla' );
// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 5000 );
</script>
</body>
</html>
我在Firefox和Chrome中测试了它，两个浏览器在5秒后显示SOME HTML!!所以在javascript执行之后而不是在javascript执行之前。
I tested it in Firefox and Chrome and both browsers are showing "SOME HTML" after 5 seconds!! So after the javascript execution and not before the javascript execution.
这是什么意思：
- 在执行内联javascript之前，某些HTML必须在DOM中，因为它具有同步行为。
- 当javascript执行启动时，某些HTML未完成渲染，因为你无法在屏幕上看到它。
- 现在将发生javascript exection并且javascript的执行将阻止渲染。
- 在javascript执行之后，浏览器将完成渲染，它将首次在屏幕上显示内容。
- SOME HTML must be in the DOM, before executing the inline javascript, because it has synchronous behavior.
- When the "javascript execution" starts, "SOME HTML" is not done rendering yet, because you can not see it on the screen.
- Now the "javascript exection" will take place and the execution of javascript will block rendering.
- After the "javascript execution," the browser will finish rendering and it will show something on the screen for the first time.
在那篇文章中他们说：由于网络的第一个时代，浏览器将阻止进一步呈现页面。在我看来，这必须是：
In that article they are saying: Because of the "the first age of the web", the browser will block further rendering of the page. In my opinion this has to be:
将阻止页面进一步解析HTML
will block further "Parsing HTML" of the page
而不是
将阻止进一步呈现页面
will block further rendering of the page
这不仅仅是关于单词，因为你会看到完全不同的东西：会阻止进一步渲染。
It's not only about the words, because you would expect totally different things if you would see it like: "will block further rendering".
在我的例子中，在执行javascript之前，尚未呈现某些HTML。因此，如果它是关于渲染而不是直接关于html解析器THEN document.write将在某些HTML之前添加（并因此渲染）bla。我们都知道这不是那样的。
In my example SOME HTML has not been rendered yet, before "executing the javascript". So IF it was about "rendering" and not directly about the "html parser" THEN document.write would add (and so render) "bla" before SOME HTML. And we all know it's not working like that.
这部分是正确的：
网络的第一个时代，允许将字符串附加到解析器正在咀嚼的内容上，例如document.write
"the first age of the web" that allow strings to be appended onto the content the parser is chewing through, such as document.write
但他们给出的原因不在我看来：
But the reason they gave for it not in my opinion:
不幸的是，浏览器会阻止进一步呈现页面正在发生。这是因为来自网络的第一个时代的DOM API
Unfortunately, the browser blocks further rendering of the page while all this is happening. This is due to DOM APIs from "the first age of the web"
我的例子中没有理由停止渲染和在执行document.write之前不显示SOME HTML。就像那样，但由于其他原因（反正不是因为document.write）。所以它与渲染无关，但与html解析器无关。但是你不能只看到渲染和html解析作为相同的东西，并相互替换这些术语。通常html已经在DOM中了，但是在渲染相同的HTML之前它仍然需要一些时间。
There is no reason in my example, to stop rendering and not show "SOME HTML" already before executing the document.write. It is like that, but because of totally other reasons (anyway not because of the document.write). So it has nothing to do with "rendering", but everything with the "html parser". But you can not just see "rendering" and "html parsing" as the same things and replace those terms for each other. Often html is already in the DOM, but it still takes some time, before the same HTML has been rendered.
看起来谷歌一直在对待这样的事情。与上面相同，看起来他们在想：前面的HTML是在DOM中，所以我们说它也已经被渲染了。
It looks like Google is consistently treating things like that. Same as above, it looks like they are thinking: the preceding HTML is in the DOM, so let's say it also has been rendered yet.
实际上我的所有其他帖子都是关于这一点（其他情况，但在我看来，谷歌的想法相同）。他们不讨论在javascript执行之前的html渲染（只有在它之后发生的事情）。看起来他们在想：javascript之前的HTML是在DOM中，所以让我们说它也已经被渲染了。在我的帖子中，他们也混淆渲染与html解析。在这里查看更多关于它的帖子（如果你对它感兴趣的话）：
Actually all my other posts are also about that (other situations, but same thinking of Google in my opinion). They don't discuss rendering of html, preceding to javascript execution (only what is coming after it). It looks like they are thinking: HTML preceding to javascript, is in the DOM, so let's say it has also been rendered. In my post here, they are also "confusing rendering" with "html parsing". See more posts about it here (for if you're interested in it):
为什么浏览器在执行javascript之前并不总是完成前面HTML的渲染？
为什么浏览器并不总是完成前面的渲染HTML，在执行javascript之前？
现在你可能在想什么是阙是;）。问题是我想听听你的意见：你是否同意我对该文章中的引用的看法。如果没有，请提供一些（好的）论据。
And now you are probably thinking what the question is ;). The question is that i want to hear from you: wheter or not you agree with me about that quote in that article. And if not, please give some (good) arguments.
推荐答案
我认为报价是正确的，如果不完整的话。渲染确实被阻止了，但不是直接的;渲染依赖于解析器，直到javascript完成执行才解析。所以你是正确的，真正的问题是解析器被阻止，虽然渲染也被（间接）阻塞，因为它依赖于解析器。
I think the quote is correct, if not fully complete. Rendering is indeed blocked, but not directly; rendering depends upon the parser, which is directly blocked until the javascript finishes execution. So you are correct that the real issue is the parser being blocked, although the render is also being blocked (indirectly) due to its dependence on the parser.
在这段代码中片段，你可以看到第一个 div 被解析，但没有渲染;第二个 div 永远不会在代码段中解析，因为它正在等待javascript完成。
In this code snippet, you can see that the first div is parsed, but not rendered; the second div is never parsed in the snippet because it is waiting for the javascript to finish.
<div id="test1">SOME HTML</div>
<script>
document.write( 'bla' );
var parsedDiv = document.getElementById("test1");
alert(parsedDiv.tagName+": "+parsedDiv.textContent);
// Synchronous delay of 3 seconds
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 3000 ){
parsedDiv = document.getElementById("test2");
if(parsedDiv)alert(parsedDiv.tagName+": "+parsedDiv.textContent);
}
</script>
<div id="test2">SOME MORE HTML</div>
这篇关于后果javascript可以在代码中有document.write吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
