Question

我正在阅读“高性能网站”，在第6章中，作者写了关于下载脚本如何阻止其他下载的文章，因此，最佳做法是将所有脚本放在文档的末尾。

我在Chrome中加载了一个随机页面，从开发人员工具中，我看到几个js并行下载。这里发生了什么？现代浏览器是否已经发展，限制不再存在？或者我错过了什么？

P.S。我仍然不太明白浏览器在加载页面时如何下载/解析html / javascript / css。是否有任何好的博客文章/资源解释一般原则？

+++++++ EDIT ++++++

从书中引用：

在下载脚本时实际上禁用了并行下载，浏览器不会即使在不同的主机名上，也可以启动任何其他下载。此行为的一个原因是脚本可能使用document.write来更改页面内容，因此浏览器会等待确保页面布局正确。

我的Chrome开发工具： My Chrome devtools

Answer 1

重新安排资源的加载有两个不同的原因;实际装载时间和明显装载时间。

提前放置样式表链接意味着它将在页面内容加载时加载，因此浏览器在加载时不会显示内容。这使得页面看起来加载速度更快，即使总加载时间仍然相同。

如何加载脚本会影响实际加载时间，因为浏览器一次只能从每个主机请求有限数量的资源。如果浏览器从您的服务器加载多个脚本，可能会延迟加载某些图像。早期的浏览器一次只能有两个资源的限制，虽然最近的版本可能一次加载更多的资源，但仍然存在限制。

此外，尽管脚本将并行加载，但脚本的解析仍然是阻塞的。即使已经加载了下一个脚本，也不会在前一个脚本完成之前对其进行解析。

本书所说的已经过时，现代浏览器有预加载器，允许在使用它们的代码被解析之前加载资源。

Answer 2

是和否。

＆LT;脚本＆GT;标签会阻止。

脚本标记还有一个ASYNC属性。

有许多方法可以异步添加脚本。这是我的最爱：

document.createElement('script');
script.src = url;
getElementsByTagName('head')[0].appendChild(script);

Answer 3

您可以参考此页taligarsiel。

将脚本文件放在页面末尾并将CSS放在头脑中总是很好的做法。

一旦浏览器显示您的页面，浏览器首先会将您的CSS呈现在页面中以显示页面。

Answer 4

构建网站以提高性能时，始终需要考虑下载量。有些javascripts很小，很容易获得，有些可能很大或者有滞后或有其他内置细节，有时需要更长时间下载，并且可能妨碍其他资源的下载并且性能非常显着。

在页面末尾加载javascripts和jqueries的一个原因是为了确保在运行脚本之前所有必需的资源都可用。（如果搜索资源在尝试运行时丢失，某些脚本甚至会中断）在某些情况下，它还可以允许其他资源以较少的干扰加载，并允许访问者在javascript加载并在后台运行时阅读或查看内容

但是有些情况下脚本必须在头部，但如果没有，最好在底部。