Каков наилучший способ загрузки Javascript на страницу для оптимизации производительности?

Помимо минифинга, gziping и CDNING (новое слово?). Вам следует подумать о том, чтобы отложить загрузку. В основном это позволяет динамически добавлять сценарии и предотвращать блокировку, позволяя параллельные загрузки.

Есть много способов сделать это, этот я предпочитаю

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

Поместите это непосредственно перед закрывающим тегом тела и используйте AttachScript для загрузки каждого файла js.
Дополнительная информация здесь http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

Возможно, вам также захочется посмотреть, как Google загружает аналитику:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Поскольку это считается сценарием "наилучшей практики":
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

Пара людей из Google объявили о новом проекте с открытым исходным кодом на Velocity 2010 под названием Diffable. Diffable выполняет некоторую магию, чтобы постепенно публиковать только те части JS, HTML и CSS, которые изменились с версии, хранящейся в кэше пользователя, а не отправлять весь новый файл при выпуске новой версии.

Этот метод безумно крут и в настоящее время наиболее эффективен (и стоит затраченных усилий) на сайтах, где вы используете большая база кода JavaScript с небольшими частыми изменениями кода. Это особенно хорошо относится к таким приложениям, как Google Maps, которые выпускаются по крайней мере по одному выпуску каждый вторник, и в среднем около 100 новых выпусков в год. Это также имеет большой смысл в целом, как только локальное хранилище HTML5 станет более распространенным.

КСТАТИ, если вы не видели, как Майкл Джонс из Google говорил об изменениях (в геопространственном контексте), стоит посмотреть весь его доклад на GeoWeb 2009.

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

Я добавил вопрос в StackOverflow, я добавлю контент здесь, как только.

Единственное отличие состоит в том, что событие загрузки будет запущено немного раньше, но загрузка самих файлов останется прежней. Я также хочу добавить, что даже если загрузка даже запускается раньше с помощью неблокирующего скрипта, это делает это не означает, что файлы JS запускаются раньше. В моем случае обычная настройка получилась лучше всего

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

<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 css-файла внизу страницы.

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

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

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

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

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

Заключение

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

Или я что-то здесь упускаю?

Подробнее:

• Статья: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts /
• Вопрос: https://stackoverflow.com/questions/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body
• Вопрос: https://stackoverflow.com/questions/5765113/do-modern-browsers-still-limit-parallel-downloads
• Код: http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript /
• Код: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/