是否在构建CSSOM之前推迟执行JavaScript？ [英] Is JavaScript execution deferred until CSSOM is built or not?
问题描述
自从我读到/学习CSSOM以来，直到今天，我才清楚这个问题的答案。我似乎无法找到最初的文章，但它通过示例非常清楚地解释了JavaScript执行是推迟到CSSOM是从所有< style> 和查询）。< link> 中的标签< head> （基于<$ c $的非申请者除外） c> @media
或者至少那是我当时所做的，直到今天我没有理由怀疑它。
The answer to this question has been clear to me ever since I read/learned about CSSOM, until today. I can't seem to be able to find the initial article, but it explained quite clear, with examples, that JavaScript execution is deferred until CSSOM is built from all <style> and <link> tags in <head> (except those not applying, based on @media queries).
Or at least that's what I made of it at the time and I had no reason to doubt it until today.
这似乎可以通过来自Google的Web Fundamentals / Performance的子章节：
...浏览器延迟脚本执行和DOM构建，直到完成下载和构建CSSOM。
... the browser delays script execution and DOM construction until it has finished downloading and constructing the CSSOM.
然而，这个声明受到了友好聊天的严重挑战他在这个下与另一个SO用户一起回答我提供的，其中他提出以下证明相反：
However, this statement was seriously challenged by a friendly chat on the subject with another SO user under this answer I provided, in which he proposed the following to prove the opposite:
<head>
<script>document.write("<!--");</script>
<style> body { background-color: red; } </style>
-->
</head>
好的，让我们确定一下。让我们将< style> 替换为
Ok, so let's make sure. Let's replace the <style> with
<link rel="stylesheet" type="text/css" href="test.php" />
...并且make test.php 挂了几秒钟：
... and make test.php hang for a few seconds:
<?php
sleep(10);
header('Content-Type: text/css');
?>
/* adding styles here would be futile */
如果我是对（并且 js 执行推迟到构建CSSOM之前），页面挂起空白10秒，然后再构建CSSOM并执行< script> ; 将评论< link /> out并允许该页面呈现。
If I am right (and js execution is deferred until CSSOM is built), the page hangs blank for 10 seconds, before building CSSOM and before executing the <script> that would comment the <link /> out and would allow the page to render.
如果他是对的，js会在满足时运行，< link /> 请求永远不会离开，因为它现在是评论。
If he is right, the js is ran as it's met and the <link /> request never leaves, because it's a comment by now.
惊喜：
- 页面立即渲染。 他是对的！
- 但
< link />请求离开，浏览器标签显示加载图标10秒。 我也是对的！还是我？我很困惑，这就是我...
- the page renders right away. He's right!
- but the
<link />request leaves and the browser tab shows a loading icon for 10 seconds. I'm right, too! Or am I? I'm confused, that's what I am...
有人能对此有所了解吗？发生了什么事？
是否与 document.write 有关？
是否需要做加载 .php 文件而不是 .css ？
Could anyone shed some light into this? What is going on?
Does it have to do with document.write?
Does it have to do with loading a .php file instead of a .css?
如果它有任何区别，我在Chrome上测试了Ubuntu。
If it makes any difference, I tested in Chrome, on Ubuntu.
我很擅长链接可信（重新）源或提供雄辩的示例/测试以备份您可能考虑提供的任何答案。
I kindly ask linking a credible (re)source or providing an eloquent example/test to back-up any answer you might consider providing.
推荐答案
这句话是真的，但这意味着如果你先放置你的样式表，然后放一个脚本，脚本在下载和解析样式表之前不会执行。看到这个例子：
This quote is true, but it means that if you place your style sheet first, and a script after it, the script will not execute until the style sheet is downloaded and parsed. See this example:
test.php ：
<?php
sleep(5);
header('Content-Type: text/css');
echo 'body {background-color: red;}';
index.html ：
<link rel="stylesheet" href="test.php">
<script>console.log('done');</script>
console.log 电话不会执行直到背景颜色变为红色。
The console.log call won't be executed until background color changes to red.
这导致得出的结论是，所有样式表都没有构建一次CSSOM，但这是一个渐进的过程 - 当浏览器遇到样式表，下载它，解析，然后移动。也可能浏览器首先列出所有CSS资源，并将它们添加到下载队列，甚至在执行任何脚本之前。这可以解释为什么即使 link 标记被脚本注释也会发出请求。
This leads to the conclusion that building CSSOM isn't done once for all style sheets, but it's a gradual process – when browser encounters a style sheet, it downloads it, parses, and moves next. Also probably browser first makes a list of all CSS resources and adds them to the download queue, even before executing any scripts. That would explain why the request is made even though the link tag is commented by a script.
这篇关于是否在构建CSSOM之前推迟执行JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
