Який найкращий спосіб завантажити 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>

Розташуйте це безпосередньо перед закриттям тегу тіла та використовуйте AttachScript для завантаження кожного js-файлу.
Більше інформації тут http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

Ви можете подивитися, як 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 оголосили про новий проект з відкритим кодом на швидкості 2010 під назвою Diffable . Diffable виконує деяку магію, щоб поступово публікувати лише ті частини JS, HTML та CSS, які змінилися після версії, яка зберігається в кеші користувача, а не надсилати весь новий файл, коли виходить нова версія.

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

До речі, якщо ви не бачили, як Майкл Джонс говорив про зміни від Google (в геопросторовому контексті), варто переглянути всю його основну примітку на GeoWeb 2009 .

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

Я додав запитання до StackOverflow, я додам зміст сюди aswel.

Єдина відмінність полягає в тому, що подія завантаження буде запущена трохи раніше, але завантаження самих файлів залишається колишньою. Я також хочу додати, що навіть якщо завантаження навіть запускається раніше із сценарієм, що не блокує, це не означає, що файли 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/