Неблокирующий javascript и css в современных браузерах. Это все еще необходимо?

Я немного играю с некоторой неблокирующей загрузкой JavaScript. Это означает, что у меня есть небольшой фрагмент JavaScript в моем head и загружать все мои внешние файлы во время выполнения. Я даже немного потрудился загружать CSS без блокировки.

Я вижу, что статьи, которые я могу найти, немного устарели, поэтому я хочу знать, все ли это все еще актуально.

Теперь сначала скрипты, они выглядят так:

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles здесь просто объект, который содержит все URL-адреса для всех файлов.

Я выполнил 3 теста, вот результаты:

Обычная настройка

Это обычная настройка, у нас есть 4 css файла в голове и 3 js файла в нижней части страницы.

Теперь я не вижу ничего блокирующего. Я вижу, что все загружается одновременно.

Неблокирующий JS

Теперь, чтобы сделать это немного дальше, я сделал ТОЛЬКО js файлы, не блокирующие. Это с помощью script выше. Я вдруг вижу, что мои файлы css блокируют загрузку. Это странно, потому что в первом примере это ничего не блокирует. Почему css внезапно блокирует нагрузку?

Все неблокирующие

Наконец, я проверил, где все внешние файлы загружаются неблокируемым способом. Теперь я не вижу никакой разницы с нашим первым методом. Они оба выглядят одинаково.

Заключение

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

Или я что-то пропустил?

Дополнительно:

Ответ 1

Да, в сегодняшних браузерах файлы, на которые делается ссылка, загружаются неблокирующими способами. Но есть различия:

готовое событие появляется раньше, если вы добавите "вещи, которые вам не нужно ждать" для динамической загрузки, как вы можете видеть из времени синей полосы. Таким образом, действия на странице могут начаться раньше.
сценарии, загруженные из текста на странице (в отличие от динамической загрузки), выполняются по порядку. Поэтому они должны ждать друг друга, если кто-то загружается дольше. Динамически загруженные сценарии, по-другому, выполняются как можно скорее, если не положить элемент .async=false в script.

Итак, в современных браузерах разница только семантическая (статическая загрузка имитирует старый последовательный путь, динамика гораздо более параллельна).

Ответ 2

Это зависит от того, сколько файлов вы хотите загрузить в одно и то же время. В вашем случае вы используете 3 файла JavaScript. У разных браузеров разные границы, поэтому это означает, что когда у вас есть, например, 7 файлов JavaScript в Frefox 7th будут загружены после завершения 6, так как Firefox имеет ограничение на 6 параллельных загрузок.

Использование сценариев или загрузка зачисток перед тегом по-прежнему является хорошим подходом. Попробуйте повторить свой тест с большим количеством файлов JavaScript, например, около 10.