1

Здравствуйте! Подскажите разницу между использованием атрибутов "defer/async" при загрузке кода, и использованием AJAX? На странице "Хабрахабра" объясняется разница, что

При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.

Обобщим достоинства AJAX: Возможность создания удобного Web-интерфейса Активное взаимодействие с пользователем Частичная перезагрузка страницы, вместо полной Удобство использования

AJAX использует два метода работы с веб-страницей: изменение Web-страницы не перезагружая её, и динамическое обращение к серверу.

хабрахабр:

Объяснение от javascript.ru

Кардинально решить эту проблему помогут атрибуты async или defer:

Атрибут async Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится.

Атрибут defer Поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия от async.

Первое – браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.

То есть, в таком коде (с async) первым сработает тот скрипт, который раньше загрузится: Javascript.ru

Вопрос: 1. В чем состоит принципиальная разница в скорости загрузки? 2. Чем предпочтительней пользоваться при: а)создании сайта-страницы? б)создании сайта-магазина?

2
  • Я вообще не припоминаю случаев, чтобы AJAX'ом загружали программный код. Догрузку других JS-файлов я встречал разве что в виде вставки script-тегов в страницу. UPD: ну, я видел какие-то костыли для частичного обновления страницы, для которых браузер отправляет серверу запрос и получает в ответ какой-то JS, который просто eval'ится... но это редкий и очень гадкий способ.
    – user181100
    16 авг 2017 в 15:13
  • Спасибо за ответ. На курсе джаваскрипта, мне популярно объяснили что все современные сайты строятся в коде через ajax и только так достигается асинхронная оптимизация. про defer/acync и речи не было. Вычитал об этом в javascript.ru,. так как (на данном уровне) не вижу и не понимаю принципиальной разницы при загрузке, решил спросить у знающих людей. Для меня, так проще указать в коде слово defer/async и не париться, но лектор не согласен, говорит что только так и надо писать через ajax.
    – Uri Shlomy
    16 авг 2017 в 17:48

1 ответ 1

1

В чем состоит принципиальная разница в скорости загрузки?

Смотря о чем конкретно идет речь. Если мы говорим о скорости загрузки скрипта (а вдруг) то его скорость загрузки от аттрибута не зависит.

Если мы говорим о скорости загрузки всех скриптов, то поскольку они будут грузится параллельно, мы загрузим их быстрее. И сайт сможет начать работать быстрее.

Если мы говорим о скорости загрузки страницы, то и страницы в целом загрузится быстрее за счет более быстрой загрузки скриптов.

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

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

  • не начнутся грузиться другие скрипты,
  • не будет анализоваться тот дом, что идет после скрипта
  • соответственно дом не будет строиться.
  • стили не будут применяться.

И если для SPA приложений важен только первый пункт (потому что все остальное все равно очень зависит от внешних скриптов) то для более классических сайтов последнии пункты тоже важны. Фактически мы получим ситуацию, когда пользователь увидит контект, хотя формально страница все еще не будет загружена. Что положительно влияет на user experience.

Поэтому появилась асинхронная загрузка внешних скриптов. Как минимум она позволяет грузить несколько скриптов параллельно, сохраняя или не сохраняя порядок их выполнения.

Чем предпочтительней пользоваться при

В общем то не очень важно что у вас. Здесь стоит отталкиваться от:

  • Если вам важен порядок выполнения скриптов, то defer
  • Если не важен, то async.

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

2
  • Спасибо за ответ. Все же не понял из объяснения разницы в применении двух этих подходов. В хабре сказанно, с одной стороны так, с другой эдак, где то лучше через ajax, где то через async/defer... в чем же разница при асинхронной загрузке?
    – Uri Shlomy
    16 авг 2017 в 17:53
  • @UriShlomy AJAXом грузят не скрипты, им грузят данные. Это кардинально разные вещи. В статье нет речи о том, что бы загружать скрипты AJAX.
    – Drag13
    16 авг 2017 в 18:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.