Параллельная загрузка файлов JS в HTML

У меня есть 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 пытается загружать ресурсы параллельно и, следовательно, он регистрирует ресурсы в API синхронизации ресурсов.

Фрагмент в 1.js

window.performance.setResourceTimingBufferSize(250);

на самом деле исполняется чуть позже. Следовательно, некоторые дополнительные ресурсы добавляются в буфер синхронизации ресурсов. Но не все из них добавлены.

Есть ли способ остановить параллельную загрузку ресурсов? Сначала загрузите первый ресурс, позвольте коду выполнить, а затем возобновите загрузку оставшихся ресурсов параллельно.

Источник

0 ответов

Для setResourceTimingBufferSize существует событие resourcetimingbufferfull. Говорят, что объекты PerformanceResourceTiming не должны быть удалены из буфера записи производительности.

var buffSize = 100

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

Когда буфер заполнен, он увеличивается на +100

Источник
Другие вопросы по тегам