Question

我发现了一些有趣的浏览器行为（Chrome），我希望能够深入了解。

我的html文档有以下结构（我对域名一直很谨慎）

 // Hosted on http://www.example.com
 <html>
    <head>
      <link href="http://cdn.com/css1.css">
      <link href="http://cdn.com/css2.css">
      <link href="http://cdn.com/css3.css">
    </head>
    <body>

      <img src="http://cdn.com/img1.jpg">
      <img src="http://cdn.com/img2.jpg">

      <script src="http://www.example.com/local-js-1.js" async></script>
      <script src="http://www.example.com/local-js-2.js" async></script>
      <script src="http://another-cdn.com/ext-js-1.js" async></script>
      <script src="http://another-cdn.com/ext-js-2.js" async></script>
    </body>
 </html>

但在下载本地javascript文件之前，Chrome会等到CSS文件下载完毕。它（chrome）不等待那些javascript文件是外部的。我认为这可能是一个资源数量问题，但我没有从index.html文档和那两个本地javascript文件以外的根域下载任何文件。

如果我不包含外部javascript文件，或者外部文件包含在本地文件之前，则确实如此。

本地和外部都包含在一起，如上面的HTML中所述： Both local and external included together as described in the HTML above

仅限本地文件：注意如何请求两个图像，如果我刷新页面，它们将以随机顺序显示，并且它们首先包含在这里的事实是偶然的......显然它们都在等待同意之前请求： Only Local files : Notice how the two images are requested first

我更喜欢本地文件与CSS文件同时下载（从与CSS文件相同的CDN提供它们导致上述相同的行为...可能是因为Chrome只从同一个文件下载了一些资源域名一次）所以我不必为额外CDN的DNS查询付费，所以我的问题是＆＃34;为什么不同时下载我本地引用的文件下载外部文件？＆＃34;

Answer 1

为了记录，我无法完全重现你的场景......也许JSbin会有所帮助。无论如何，我发现所有脚本，无论是同一个域还是其他域都阻止了Chrome和Firefox中的下载。（但Firefox，它的瀑布上有一个阻塞指示器，所以你可以告诉解析没有被阻止）

关于“为什么Chrome会这样做？”这个问题的答案。虽然我无法回答问题的这一部分，但我的猜测是它可能只是一个尚未优化的条件......显然，对象如何加载的所有依赖关系都很难解开。例如，在调查过程中，我发现这个4年前的Firefox漏洞仍处于打开状态：https://bugzilla.mozilla.org/show_bug.cgi?id=693725

关于“我如何解决它？”这个更有趣的问题，我发现这个简单的代码行尽可能早地下载所有CSS和脚本文件，并且异步应用：

<link
  rel="stylesheet"
  type="text/css"
  media="later"
  onload="this.onload=null;this.media='screen'"
  href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"
 />

我在Chrome，Firefox和IE11中检查了上述内容，并且所有内容都开始并行启动，并成功应用了工作表中的CSS规则

CSS文件后的本地脚本下载，但不是外部文件

1 个答案: