Модеры! Закройте уже ветку с иконкой "Разрешено". А то тут уже бои начались
Хотя надобно бы почитать. Для общего развития...
Вы ещё не видели "боёв" на этом форуме. Именно эта дискуссия -- просто приветливый разговор о погоде. Эт нормально.
Но тему, быть может, нужно разделить на 2, если возникнет к ней дальнейший интерес.
И кстати можно поподробнее отличия defer от async и что лучше? Ибо в скриптах я немного плаваю )
Браузер сначала осуществляет препроцессинг, затем начинает обрабатывать структуру сайта с начала гипертекстовой разметки. При этом браузер выстраивает DOM древо, загружает ресурсы:
1. Обычный скрипт.Затем он натыкается на обычный скрипт, бросает всю остальную работу и ждёт, пока он загрузится. Когда скрипт загрузился, браузер исполняет код этого скрипта, после чего "снимается с паузы" и продолжает обрабатывать гипертекст.
2. Аттрибуты async и deferБраузер продолжает обрабатывать гипертекст, загружать другие ресурсы, а скрипт, имеющий один из данных аттрибутов загружает в фоновом режиме параллельно, при этом на время загрузки скриптов работа браузера не останавливается.
2.1. Аттрибут asyncКак только скрипт в фоновом режиме загрузился, браузер останавливается, переключается на этот скрипт, исполняет его код. После чего продолжает работу. Async может загрузиться в любой момент. При этом события DOM, такие как DOMContentLoaded и window.onload могут сработать до того, как загрузится скрипт.
Подводные камни:
a) существует огромная вероятность, что события DOM не сработают вообще, т.к. постфактум они не запускаются.
б) если несколько скриптов загружаются асинхронно с аттрибутом async, то порядок исполнения кода непредсказуем: исполнится раньше может тот скрипт, который следует дальше в гипертексте, если он загрузился раньше.
2.2. Аттрибут deferКак только скрипт в фоновом режиме загрузился, браузер ставит его в очередь на исполнение, при этом порядок исполнения нескольких скриптов с аттрибутом defer сохраняется. Более поздний скрипт не может исполниться раньше более раннего. Очередь запускается прямо перед событием DOMContentLoaded и только тогда. Поэтому все события DOM работают нормально.
Подводные камни:
а) Internet Explorer <= 9.0 может наплевать на порядок скриптов и исполнить код в произвольном порядке.
б) Библиотека jQuery отдаёт приоритет не стандартному событию DOMContentLoaded, а более позднему статусу загрузки документа -- это гениальная тупость. Поэтому
jQuery(document).ready(function(){}) может не срабатывать, если сам скрипт jQuery был загружен при помощи defer.
Область применения:async: в основном, внешние скрипты, которым пофигу, когда исполняться, например скрипты метрики и аналитикс.
defer: все остальные случаи с поправкой на используемые библиотеки. В принципе, никаких противопоказаний кроме этого нет и по-возможности, весь JS нужно грузить при помощи defer. На мобильниках со слабыми процами и невысокой скоростью инета это даёт очень много.