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

Ответы:

14

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

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

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

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

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

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

Гарет Фаррингтон
источник
1
Yahoo также распространяет плагин YSlow для Firefox, который анализирует вашу страницу в соответствии с указанными выше рекомендациями и дает вам табель успеваемости. См. Developer.yahoo.com/yslow
Алан
1
Существуют также методы, такие как асинхронная загрузка, которые можно использовать, если у вас есть элементы сайта, которые не требуют загрузки сценария при первоначальной визуализации страницы. И это, и размещение сценария ближе к нижней части страницы имеют ограничения; в некоторых случаях вам нужно загрузить JS в заголовок документа.
JasonBirch
7

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

Дезинтегратор
источник
1
Эй, ты украл CDNing; это должно означать делать что-то канадское! ;)
JasonBirch
jajajaja хороший один
дезинтегратор
7

Возможно, вы захотите посмотреть, как 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/

Джефф Этвуд
источник
3

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

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

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

JasonBirch
источник
1

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

Я добавил вопрос в 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 теста, вот результаты:

Нормальная настройка

Загрузка страницы css в голове и javascript внизу

Это просто обычная настройка, у нас есть 4 CSS-файла в заголовке и 3 CSS-файла внизу страницы.

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

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

Загрузка страницы с неблокирующим JavaScript

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

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

Загрузка страницы со всем неблокирующим

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

Вывод

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

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

Больше:

Саиф Бечан
источник
Разница заключается в расположении синей линии, которая, я предполагаю, когда страница начинает отображаться. С точки зрения конечного пользователя, это когда страница «загружается», как это происходит, когда они начинают видеть вещи. В первом примере рендеринг начинается после загрузки последнего JS-файла с отметки 900 мс. Во-вторых, это после загрузки таблиц стилей (~ 700 мс). В-третьих, это после того, как HTML был загружен (~ 500 мс). Я бы по-прежнему выбрал второй подход, так как вам не нужна загрузка CSS после рендеринга страницы.
Тим Фонтан