為什么由於啟用了HTTP2協議，Chrome調試器中的請求仍在排隊？

Question

由於啟用了IIS的HTTP2協議，但是主要javascript文件的請求仍在排隊。 根據Chrome排隊的說明，我真的不知道是什么原因造成的。

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

隊列：

Answer 1

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），所以說實話不確定這有什么好處。 很迷茫...