Външни скриптове, редът на изпълнение

Това поведение се нарича "синхронни". Като правило, това е съвсем нормално, но има една важна последица.

Ако сценарият - външен, че докато браузърът няма да го изпълни, тя няма да се покаже част на страницата отдолу.

Това означава, че в такъв документ, докато не бъде зареден и изпълнен big.js. съдържание Тя ще бъде скрита:

И тук въпросът - наистина ли го искаш? Това е, дали останалата част от страницата не може да се докаже, преди да заредите сценария?

Има ситуации, в които не просто не искат закъснение, но това е още по-опасно.

И какво, ако сървърът за зареждане на външен скрипт е претоварен? Посетителят в този случай може да се чака много дълго време!

Ето един пример, с подобен сценарий (на стойност изкуствено забавяне, за да изтеглите):

Можете да поставите всички тези скриптове в долната част на страницата - това ще намали проблема, но не се отървете от него напълно, ако няколко скриптове. Да предположим, че в края на страница 3 на сценария, а първият от тях се забавя - оказва се, другите две ще се чака - много лошо.

Браузърът също идва на скриптове, намиращи се в долната част на страницата, те ще бъдат заредени само когато цялата страница да се зареди. И това не винаги е правилно. Така например, на гишето посещава най-точно работата, ако нейното натоварване по-рано.

Ето защо, "да се постави на скриптове под" - не най-доброто решение.

За да се реши този проблем фундаментално ще помогне атрибути асинхронен или разсрочат:

С подкрепата на всички браузъри, освен IE9-. Сценарий за да се управлява напълно асинхронно. Това означава, че когато открие

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

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

А в таком коде (с defer ) первым сработает всегда 1.js. а скрипт 2.js. даже если загрузился раньше, будет его ждать.

Поэтому атрибут defer используют в тех случаях, когда второй скрипт 2.js зависит от первого 1.js. к примеру – использует что-то, описанное первым скриптом.

Второе отличие – скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.

Например, если документ достаточно большой…

…То скрипт async.js выполнится, как только загрузится – возможно, до того, как весь документ готов. А defer.js подождёт готовности всего документа.

Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.

async вместе с defer

При одновременном указании async и defer в современных браузерах будет использован только async. в IE9- – только defer (не понимает async ).

Атрибуты async/defer – только для внешних скриптов

Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src .

При попытке назначить их на обычные скрипты , те ще бъдат игнорирани.

Същият пример с асинхронен:

Когато стартирате ще видите, че цялата страница е била показана веднага, а сигнал от външен скрипт ще се появи по-късно, когато сценарият е заредена.

Тези качества са за дълго време ", за да"

Преди да включите външен маркер

Специални атрибути асинхронен и да отложи използва за докато не се зареди външен скрипт - браузъра, за да се покаже на останалата (след него) на страницата. Без тях, това не се случва.

Разликата между асинхронен и се отложи. отложи атрибут запазва относителната последователност на скриптове и асинхронен - ​​не. В допълнение, се отложи винаги изчаква, докато цялата HTML-документ ще бъде готов и асинхронен - ​​не.

Решавам пъзели, за да се уверите, че сте разбрали всичко правилно.