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

Есть ли способ загрузить мой JavaScript-код на страницу, чтобы он загружался быстрее?

Есть несколько вещей, которые вы можете сделать:

1. Загрузите HTML и CSS перед JavaScript. Это дает браузеру все необходимое для размещения страницы и ее рендеринга. Это создает у пользователя впечатление, что страница является быстрой. Разместите теги или блоки скриптов как можно ближе к закрывающему тегу тела.

2. Подумайте об использовании CDN. Если вы используете любую из популярных библиотек, таких как JQuery, многие компании (например, Google, Yahoo) используют бесплатные CDN, которые вы можете использовать для загрузки библиотек.

3. Загрузите код из внешнего файла вместо встроенного скрипта. Это дает браузеру возможность кэшировать контент JS и не загружать его вообще. Последовательная загрузка страниц будет быстрее.

4. Включите сжатие zip на веб-сервере.

У Yahoo есть отличная страница предложений, которая может помочь сократить время загрузки страницы.

Помимо Minifing, 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>

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

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

<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, я добавлю содержание здесь aswel.

Разница лишь в том, что событие загрузки будет запущено немного раньше, но загрузка самих файлов останется прежней. Я также хочу добавить, что даже если onload даже запускается раньше с неблокирующим скриптом, это не означает, что 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/
• Вопрос: /programming/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body
• Вопрос: /programming/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/