В чем преимущество подключения JS скриптов через скрипт?

Question

[Muvka]

Собственно вижу у многих учителей такой способ, что в конце файла вставляется js скрипт, который подключает все остальные js скрипты. Подскажите - чем этот способ лучше, чем просто подключение скриптов перед закрывающим тегом body вручную? Вот пример:

<script>var scr = {"scripts":[
		{"src" : "libs/modernizr/modernizr.js", "async" : false},
		{"src" : "libs/jquery/jquery-1.11.2.min.js", "async" : false},
		{"src" : "libs/waypoints/waypoints.min.js", "async" : false},
		{"src" : "libs/animate/animate-css.js", "async" : false},
		{"src" : "libs/plugins-scroll/plugins-scroll.js", "async" : false},
		{"src" : "js/common.js", "async" : false}
		]};!function(t,n,r){"use strict";var c=function(t){if("[object Array]"!==Object.prototype.toString.call(t))return!1;for(var r=0;r<t.length;r++){var c=n.createElement("script"),e=t[r];c.src=e.src,c.async=e.async,n.body.appendChild(c)}return!0};t.addEventListener?t.addEventListener("load",function(){c(r.scripts);},!1):t.attachEvent?t.attachEvent("onload",function(){c(r.scripts)}):t.onload=function(){c(r.scripts)}}(window,document,scr);
	</script>

Comments

[Ankhena]

Для вот этого зверя https://developers.google.com/speed/pagespeed/insights/

Answer 1

[Griboks]

На самом деле, простое подключение лучше, нежели данный метод. На хабре недавно даже статья была, в которой выясняли, насколько быстрее будет загрузить один общий минимизированный закэшированный скрипт, чем подгружать много, пусть даже асинхронно.
Легче страница? Ага, как же. Вместо одной строчки вы написали десять.
Что за "async" : false? Тупой копипаст?

Answer 2

[Александр Таратин]

Ни в чем.
Переходите на webpack, для сборки и подгрузки скриптов и прочих ассетов.

Comments

[Muvka]

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

[Александр Ме]

Muvka, очень даже не сложно, использую Webpack для сайтов на Wordpress

Answer 3

[Павел Корнилов]

Всё намного проще, чем пытаются описать все, кроме Сталкера.
Преимуществ 2:
1. При подключении через HTML скрипт грузится синхронно, то есть блокирует загрузку документа, что при больших скриптах заметно. А описанный способ делает асинхронную загрузку скриптов.
2. Возможность выполнения какого-то кода обратным вызовом (callback).

ВСЁ.

Comments

[Muvka]

Ну вообще-то там тоже все скрипты синхронно грузятся, ибо async - false. А во вторых и без js можно прописать
<script src="" async></script>
Да и подгрузка всех скриптов идет перед закрывающим тегом body. Так что там нечего больше загружать из документа.

[Павел Корнилов]

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

Подгрузка скриптов в конце верстки не всегда удобна. При этом, если какой-то скрипт динамически формирует часть страницы, то подвисание будет заметно.

[Павел Корнилов]

MaxKorz, вы не правы. Да, выставляют, но при динамическом добавлении он всегда true.
Не могу привести навскидку ссылку на источники информации, но поверьте, я об этом читал.

Answer 4

[Stalker_RED]

Можете подключать и вручную. Когда-нибудь вам надоест, и вы это автоматизируете (но это не точно).

Comments

[Muvka]

Ну так проблема в том, что и в скрипте путь до файлов в массиве надо прописывать вручную :) Там нет никакой автоматизации.

[Stalker_RED]

Muvka, ээээ. а можно несколько ссылочек на тех учителей, у которых вы это увидели? Современные браузеры поддерживают async/defer, и смысл от таких подключалок остался один: автоматизация чего-нибудь. Ну типа не грузить лишние скрипты, когда они не нужны

[Muvka]

Stalker_RED, Я добавил в сам вопрос пример скрипта.

[Stalker_RED]

Muvka, там, похоже, предусмотрен вызов коллбэков.

Вот похожая штука, грузит скрипт и вызывает коллбэк, если он есть

function loadJS(src, callback) {
    var s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onreadystatechange = s.onload = function() {
        var state = s.readyState;
        if (!callback.done && (!state || /loaded|complete/.test(state))) {
            callback.done = true;
            callback();
        }
    };
    document.getElementsByTagName('head')[0].appendChild(s);
}

// пример использования
loadJS('/js/bootstrap-combobox-plugin.js', function() { 
  $('select.combobox').combobox()
});

Более навороченная версия - require.js

Answer 5

[Владимир Куц]

Во-первых обычно при разворачивании проекта внешние скрипты прогоняются через минификаторы. Во-вторых - скрипты кешируются. Это даёт дополнительное ускорение при загрузке страницы.