Javascript 浏览器呈现网页的顺序是什么？为什么脚本阻塞会引起关注？_Javascript_Browser_Rendering

Javascript 浏览器呈现网页的顺序是什么？为什么脚本阻塞会引起关注？

javascript browser

Javascript 浏览器呈现网页的顺序是什么？为什么脚本阻塞会引起关注？,javascript,browser,rendering,Javascript,Browser,Rendering,考虑以下场景： <h1>Hello!</h1> <script src="cool1.js"></script> <script src="cool2.js"></script> <h2>Goodbye!</h2> <img src="boat.gif" alt="Big Boat"> 你好！再见！当下载cool1.js时，这是否意味着Hello已显示，但再见

考虑以下场景：

<h1>Hello!</h1>
<script src="cool1.js"></script>
<script src="cool2.js"></script>
<h2>Goodbye!</h2>
<img src="boat.gif" alt="Big Boat">

你好！
再见！

当下载

cool1.js

时，这是否意味着

Hello已显示，但再见cool1.js
不会显示？

什么时候下载cool2.js
（我知道JavaScript是单线程的，所以它必须等待cool1.js
完成执行）？boat.gif
何时下载并显示
提交人声称：
浏览器在任何时候都只能执行JavaScript或呈现UI
特定时间点。。。想想网页下载时会发生什么
到浏览器。页面已在下载时开始呈现，
然后遇到一个标记。此时，浏览器可以
不再继续渲染，因为JavaScript可能会影响UI，
所以它等待着
我不明白这一点，因为JavaScript不能修改之前的内容吗？

例如，如果cool1.js
将
中的内容更改为“早安”怎么办？
脚本块是一个问题，因为它会延迟（或延迟）页面元素在HTML文件中位于脚本之后的物理位置的可见性，因此延迟了查看者可以看到这些后面的页面元素的时间，并使显示整个页面的时间更长
在该区块中：
<h1>Hello!</h1>
<script src="cool1.js"></script>
<script src="cool2.js"></script>
<h2>Goodbye!</h2>
<img src="boat.gif" alt="Big Boat">

你好！
再见！

以下是你可以肯定地说的：
是的，在下载并运行内联脚本时，浏览器将阻止进一步呈现页面
你好
将位于DOM中，并在cool1.js
脚本运行之前可用
cool1.js
脚本将在cool2.js
之前运行，并且两者都将在DOM的其余部分可用之前运行
这两个脚本文件的下载和执行将延迟位于它们之后的网页其余部分的可见性。这就是为什么建议在内容之后放置尽可能多的javascript，或者使用某种延迟加载，以便在不等待脚本运行的情况下尽可能快地显示内容
Javascript无法在页面显示之前修改页面中的内容。如果脚本位于内容之后，则在javascript修改内容之前，内容可能已经显示出来。在这种情况下，脚本可以修改内容，但它可能已经以预修改状态显示。如果脚本在内容之前，则内容尚未在DOM中，脚本无法修改。这方面的一个技巧是，内容最初是隐藏的（通过内联样式或CSS规则），以便javascript可以修改它，然后使其可见
智能浏览器将根据浏览器中的连接限制，同时下载cool1.js、cool2.js（甚至可能还有boat.gif）。但是，cool1.js运行之后cool2.js才会运行，而boat.gif则在cool2.js运行之后才会放入DOM
boat.gif
可以与其他下载并行下载（这取决于浏览器），但在运行cool2.js
后一段时间才会显示。在运行cool2.js
之前，较旧的浏览器可能不会开始下载它
因此，关于优化网站性能的一般建议：
在页面内容之后加载尽可能多的脚本，或者对它们使用延迟或异步加载。这将防止您的内容在这些脚本等待加载和运行时被阻塞
在整个站点中使用通用脚本文件，以便浏览器能够高效地缓存它们
尽可能将多个脚本文件合并到一个更大的最小化脚本文件中，因为下载单个脚本文件比下载两个脚本文件更快
有关加载带有async
或defer
属性的脚本的许多详细信息，请参见此相关问题的答案：。
脚本块是一个问题，因为它会延迟（或延迟）页面元素在HTML文件中位于脚本之后的物理位置的可见性，因此延迟了查看者可以看到这些后面的页面元素的时间，并使显示整个页面的时间更长
在该区块中：
<h1>Hello!</h1>
<script src="cool1.js"></script>
<script src="cool2.js"></script>
<h2>Goodbye!</h2>
<img src="boat.gif" alt="Big Boat">

你好！
再见！

以下是你可以肯定地说的：
是的，在下载并运行内联脚本时，浏览器将阻止进一步呈现页面
你好
将位于DOM中，并在cool1.js
脚本运行之前可用
cool1.js
脚本将在cool2.js
之前运行，并且两者都将在DOM的其余部分可用之前运行
这两个脚本文件的下载和执行将延迟位于它们之后的网页其余部分的可见性。这就是为什么建议在内容之后放置尽可能多的javascript，或者使用某种延迟加载，以便在不等待脚本运行的情况下尽可能快地显示内容
Javascript无法在页面显示之前修改页面中的内容。如果脚本位于内容之后，则在javascript修改内容之前，内容可能已经显示出来。在这种情况下，脚本可以修改内容，但它可能已经以预修改状态显示。如果脚本在内容之前，则内容尚未在DOM中，脚本无法修改。这方面的一个技巧是，内容最初是隐藏的（通过内联样式或CSS规则），以便javascript可以修改它，然后使其可见
智能浏览器将根据浏览器中的连接限制，同时下载cool1.js、cool2.js（甚至可能还有boat.gif）。但是，在cool1.js运行之前，cool2.js不会运行，boat.gif也不会运行