在 HTML 中并行下载 JS 文件

Question

我有一个 HTML 文件，看起来像这样

 <html>
    <head>
        <script src="1.js"></script>
        <script src="2.js"></script>
        ...
        <script src="200.js"></script>
    </head>
 </html>

1.js 只包含一行

window.performance.setResourceTimingBufferSize(250);

默认情况下，Chrome中的资源缓冲区大小为150。

但是，当我看到所有资源都使用 Resource Timing API 时，资源的长度不是 200。它一直在 150 到 200 之间随机变化。

我知道为什么会这样。因为，Chrome 尝试并行下载资源，因此它在 Resource Timing API.

中注册资源

1.js

中的片段

window.performance.setResourceTimingBufferSize(250);

实际上稍后执行。因此，更多的资源被添加到资源定时缓冲区中。但是，并不是所有的都被添加了。

有没有办法停止并行下载资源？先下载第一个资源，让代码执行然后继续并行下载剩余资源。

Answer 1

还有resourcetimingbufferfull event to setResourceTimingBufferSize。据说没有 PerformanceResourceTiming 对象要从性能条目缓冲区中删除。

var buffSize = 100

if (window.performance && window.performance.addEventListener) window.performance.addEventListener('resourcetimingbufferfull', function(){
  buffSize += 100
  window.performance.setResourceTimingBufferSize(buffSize);
})

当缓冲区满时它增加 +100

在 HTML 中并行下载 JS 文件

Parallel downloading of JS files in HTML

javascript

asynchronous

google-chrome

resource-timing-api