google-chrome - 为什么在启用 HTTP2 协议后 Chrome 调试器中的请求仍在排队？

HTTP/2 意味着可以一次下载更多资产——而不是这样。

浏览器对下载内容和时间有各种启发式方法。

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

另一个问题是<script>标签可以改变页面的内容，所以除非它被明确标记为async（或defer）它是“渲染阻塞”。<script>这意味着在标签运行之前，页面下方的任何 JavaScript 都不会运行。现在，浏览器可以提前扫描并下载未来的脚本，并且在需要时才运行它们，如果需要的话，如果随后实际上不需要脚本，则存在浪费下载的轻微风险。这取决于浏览器，也许 Chrome 认为不值得这样做。

查看您的特定站点，您的主页看起来基本上仅由脚本标签组成。您可以研究使用async 或 defer以允许并行进行更多下载，但如果您想要真正的性能改进，您可能应该回到使用 CSS 编码 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），所以说实话，不确定这会给你带来什么好处。很困惑...

google-chrome - 为什么在启用 HTTP2 协议后 Chrome 调试器中的请求仍在排队？

问题描述

解决方案

推荐阅读