Не нравятся результаты поиска? Попробуйте другой поиск!

Как добавить атрибуты async / defer в генерируемый движком код подключения JS?


     29.03.2013    jQuery    4273

вопрос
При включении в админке сжатия JS - DLE генерирует следующий код, который подключает JS из библиотеки:
<script type="text/javascript" src="/engine/classes/min/index.php?charset=utf-8&amp;g=general&amp;1"></script>


Вопрос: Как добавить в это код атрибуты async / defer? Т.е. получить в итоге:
<script type="text/javascript" src="/engine/classes/min/index.php?charset=utf-8&amp;g=general&amp;1" async defer></script>


Как вариант, подскажите как можно добавлять подобные атрибуты, например всем кодам подключения JS?
Спасибо!

Ответил: Silver-Weber


Ответ в первом комментарии (Nick - 29 марта 2013 12:55 - #12590)

Комментарии пользователей (16)

Nick
6

95 | 70

Nick - 29 марта 2013 12:55 - Юзер

Открываем engine/modules/functions.php

Где-то на 1100-1200 строках есть (для случая, когда сжатие выкл):
$js_array[] = "<script type=\"text/javascript\" src=\"{$config['http_home_url']}{$value}\"></script>";


Меняем на
$js_array[] = "<script async=\"async\" type=\"text/javascript\" src=\"{$config['http_home_url']}{$value}\"></script>";



Для случая, когда сжатие включено:
$js_array[] = "<script type=\"text/javascript\" src=\"{$config['http_home_url']}engine/classes/min/index.php?charset={$config['charset']}&amp;g=general&amp;9\"></script>";

        if ( count($js) ) $js_array[] = "<script type=\"text/javascript\" src=\"{$config['http_home_url']}engine/classes/min/index.php?charset={$config['charset']}&amp;f=".implode(",", $js)."&amp;9\"></script>";


Меняем на

$js_array[] = "<script async=\"async\" type=\"text/javascript\" src=\"{$config['http_home_url']}engine/classes/min/index.php?charset={$config['charset']}&amp;g=general&amp;9\"></script>";

        if ( count($js) ) $js_array[] = "<script async=\"async\" type=\"text/javascript\" src=\"{$config['http_home_url']}engine/classes/min/index.php?charset={$config['charset']}&amp;f=".implode(",", $js)."&amp;9\"></script>";


Примечание:
1) Первый вариант (когда без сжатия) пробовал, работает. Второй лично не пробовал, написал на ходу, работать должен.
2) Разберитесь в спецификации async defer (http://bryk.ru/blog/seo/asynchronous-javascript.html), это разные вещи и вместе их использовать не надо.

Silver-Weber
7 | 5

Silver-Weber - 1 апреля 2013 09:34 - Юзер

Спасибо большое! Очень помогли.

nowheremany
193

1660 | 1292

nowheremany - 1 апреля 2013 10:16 - Эксперт

По умолчанию JS и так асинхронны. Зачем это дополнительно прописывать? Синхронные JS вообще полный абзац для сайта.

Благодарность принимаю тут Связь

Silver-Weber
7 | 5

Silver-Weber - 1 апреля 2013 14:59 - Юзер

Вот тут почитайте (посмотрите): http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

Silver-Weber
7 | 5

Silver-Weber - 1 апреля 2013 15:01 - Юзер

***Комментарий удален***

Silver-Weber
7 | 5

Silver-Weber - 1 апреля 2013 15:02 - Юзер

Тфу ты, что за херь к УРЛам добавляеться?

nowheremany
193

1660 | 1292

nowheremany - 1 апреля 2013 15:38 - Эксперт

Явно прописывать такие вещи лично я не рекомендовал бы. Т, к. это не кроссбраузерное решение

Благодарность принимаю тут Связь

Nick
6

95 | 70

Nick - 1 апреля 2013 17:02 - Юзер

Цитата: nowheremany
Явно прописывать такие вещи лично я не рекомендовал бы. Т, к. это не кроссбраузерное решение

"async / defer" — это часть HTML 5, а проблема поддержки html 5 разными браузерами — это уже другой вопрос.

Silver-Weber
7 | 5

Silver-Weber - 1 апреля 2013 19:00 - Юзер

Да и Google лично (с помощью PageSpeed) рекомендует - "
Отложите синтаксический анализ javascript".
Только вот я, видимо таки, не до конца понял отличия "async / defer". Прописываю вышеупомянутой строке defer - просит отложить синтаксический анализ, прописываю async - все ок. Хотя мне логика работы defer показалась более приемлемой. Прописываю async defer (вместе) - тоже как бы все ок. На чем остановиться?

Nick
6

95 | 70

Nick - 1 апреля 2013 19:46 - Юзер

Silver-Weber,
Как нам говорят на http://www.w3schools.com/tags/att_script_async.asp, async — это логический атрибут. Если Вы используете и async и defer одновременно в одном вызове js, то скорей всего будет использоваться тот, который указан последним.

А google скорей всего Вам советует немного другой способ:

(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://site.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();


где http://site.com/script.js — Ваш скрипт.

Silver-Weber
7 | 5

Silver-Weber - 1 апреля 2013 20:09 - Юзер

1.
Цитата: Nick
Если Вы используете и async и defer одновременно в одном вызове js, то скорей всего будет использоваться тот, который указан последним.

Однако, указав <script async defer ***></script>, PageSpeed доволен, указа async - тоже, указав defer - нет. Т.е. все таки учитывает async, при том, что он указан не последним.

2. Верно, Google рекомендует такой вариант.

Опять же вопрос - как быть и на чем остановиться?

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 1 апреля 2013 22:33 - Админ

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

Каков вопрос - таков и ответ. Просто помните об этом.

Nick
6

95 | 70

Nick - 2 апреля 2013 09:29 - Юзер

Цитата: Silver-Weber
2. Верно, Google рекомендует такой вариант.Опять же вопрос - как быть и на чем остановиться?

Используйте вариант, который рекомендует google. Такой метод подключения js используют многие крупные сервисы, начиная от кнопочки твиттера, заканчивая google аналитикой.
Как бы сказал в этой ситуации товарищ nowheremany: "Это кроссбраузерное решение".

Silver-Weber
7 | 5

Silver-Weber - 19 апреля 2013 00:20 - Юзер

Всем спасибо за советы!

wulv
131 | 49

wulv - 19 апреля 2013 00:41 - Юзер

Читал-читал, так и не понял, что надо сделать, чтобы не выдавало это?
При начальной загрузке страницы выполняется синтаксический анализ javascript в объеме 1,1Мб. Чтобы ускорить отображение страницы, отложите синтаксический анализ javascript.

Петрушка
7 | 1

Петрушка - 17 января 2016 20:10 - Юзер

Спасибо Nick, это была последняя палка в колёсах моего свехзвукового сайта!)

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 06.05.2013 severnake  jQuery
 07.02.2014 Бахтияр_Османов  jQuery