为什么中的请求仍在排队，因为HTTP2协议已经启用？

Question

因为我已经启用了IIS的HTTP2协议，但是主要javascript文件的请求仍然在排队。根据Chrome对排队的解释，我真的不知道这是什么原因。

您可以在这里查看：https://app.youjustgo.com/zh/

排队：

​

Answer 1

HTTP/2意味着可以一次下载更多的资产--而不是它们将被下载。

浏览器对于下载什么以及何时下载有不同的启发。

例如，如果CSS文件需要图像，那么在下载和处理CSS文件(例如忽略预加载)之前，无法请求该图像。因此，在这种情况下，CSS和映像不会并行下载，尽管HTTP/2允许这样做。

另一个问题是<script>标记可以更改页面的内容，因此除非显式标记为async (或defer)，否则就是“呈现阻塞”。这意味着，在运行JavaScript标记之前，页面下的任何<script>都不会运行。现在，浏览器可以预先扫描并下载未来的脚本，只是在需要时才运行它们，如果需要的话，如果需要的话，如果以后不需要脚本的话，可能会浪费下载的时间。这取决于浏览器，也许Chrome认为这样做不值得。

看看你的具体网站，你的主页看起来基本上只有脚本标签。您可以研究如何使用异步或延迟并行进行更多的下载，但是如果您想要真正的性能改进，您可能应该回到用JavaScript编写HTML，然后用JavaScript对其进行增强的基础知识，而不是用JavaScript对其进行编码。

我也不知道你的CSS预压有什么意义？

  <link rel='preload' href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' as="style" onload="this.onload=null;this.rel='stylesheet'" />
  <link rel='preload' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.0.2/mapbox-gl-directions.css'  as="style" onload="this.onload=null;this.rel='stylesheet'" />
  <link rel="preload" href="https://npmcdn.com/angular2-toaster@2.0.0/toaster.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
  <link rel="preload" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"  as="style" onload="this.onload=null;this.rel='stylesheet'"/>
  <link rel="preload" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>

预加载的目的是让浏览器无法立即看到的资产(如上面的图像示例)允许它更早地开始下载。在这里，您使用它预加载CSS。唯一的优点是它不会呈现阻塞，然后使用onload函数来显示它。然而，CSS通常是呈现阻塞的原因--否则你的内容看起来没有样式。而且因为它是预加载的，所以它被请求为高优先级( CSS无论如何都会被请求)，所以不确定这会给您带来什么好处，老实说。很困惑..。