Question

我们的网站有一个异步加载的application.js：

<script async="async" src="//...application-123456.js"></script>

此外，我们有很多第三方脚本（1）被异步加载，（2）依次创建一个异步<script>标签，其中会调用更大的脚本。

举一个例子，这些第三方脚本之一是Google's gpt.js（您可以快速了解它是如何工作的。）

我们的问题是，虽然所有第三方脚本都按预期异步加载，但是application.js会使堆栈处于“排队”状态超过4秒。

我尝试更改脚本并使其像第三方一样加载：创建一个<script>元素，设置“src”属性并加载它：

<script async>
    (function() {
        var elem = document.createElement('script');
        elem.src = 'http://...application-123456.js';
        elem.async = true;
        elem.type = 'text/javascript';
        var scpt = document.getElementsByTagName('script')[0];
        scpt.parentNode.insertBefore(elem, scpt);
    })();
</script>

但没有改变。

然后我在我们网站的一个页面中研究了几乎不包含图像的网络级联，我看到排队时间几乎为零。 我在包含不同数量图片的网页上尝试了相同的实验，并发现排队时间在包含更多图片的网页中按比例增加。

我在Chrome's network cascade documentation中看到了这个：

排队时间：请求被渲染引擎推迟，因为它被认为比关键资源（例如脚本/样式）的优先级低。这通常发生在图像上。

是否可能由于某种原因浏览器将我们的application.js标记为“较低优先级”？我在网上看了一下，似乎没有人遇到排队时间的问题。有人有想法吗？

非常感谢。

Answer 1

浏览器使用预加载器来提高网络利用率。 This article解释了这个概念。

在您上面链接的Chrome Documentation中，它说明了有关排队的内容：

如果请求排队，则表明：


请求被延迟：渲染引擎，因为它被认为比关键资源（例如脚本/样式）的优先级低。这通常发生在图像上。

请求被暂停以等待不可用的TCP   即将释放的插座。请求被暂停，因为浏览器在HTTP 1上每个源只允许六个TCP连接。

制作磁盘缓存条目所花费的时间（通常很快。）

预加载器会快速检索轻量级资源，例如样式和脚本，然后将图像排队，因为正如上面的标准所示，每个源只允许6个TCP连接。因此，这可以解释总响应时间的延迟。

Application.js脚本在“排队”状态下被阻止，直到图像加载完毕

1 个答案: