0

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

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

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

举个例子，这些第三方脚本之一是Google 的 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 的网络级联文档中读到了这个：

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

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

非常感谢。

4

1 回答 1

0

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

在您上面链接的Chrome 文档中，它说明了以下关于排队的内容：

如果请求排队，则表明：

  • 该请求被以下原因推迟：渲染引擎​​，因为它的优先级低于关键资源（例如脚本/样式）。这经常发生在图像上。
  • 该请求被搁置以等待即将释放的不可用 TCP 套接字。该请求被搁置，因为浏览器在 HTTP 1 上的每个源仅允许六个 TCP 连接。
  • 制作磁盘缓存条目所花费的时间（通常非常快。）

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

于 2016-05-05T12:24:07.253 回答