ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / атрибуты defer и async при подключении javaScript
21 сообщений из 21, страница 1 из 1
атрибуты defer и async при подключении javaScript
    #39264480
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
Добрый день уважаемые! Читал описание этих атрибутов. В описании сказано что и async и defer работают паралельно с загрузкой страницы. А уж тем более defer, который ждет пока весь HTML будет готов. Я попробовал это на своем примере.
Подключил скрипт.
Код: javascript
1.
2.
3.
for(var i = 0; i < 1000000000; i++){
		}
		alert("Скрипт выполнился");


к документу
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<!DOCTYPE HTML>
<html>
<head>
	<title>несколько defer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
	</style>
	<script defer src="defer.js"></script>
</head>
<body>
	Эта информация выведется сразу
	<br>Эта информация появилась после выполнения скрипта.
</body>
</html>



Итог:- alert и HTML документ загрузились одновременно, я же ожидал что появится сначала HTML а потом появится alert
Подскажите пожалуйста в чем я неправ?
...
Рейтинг: 0 / 0
29.06.2016, 10:34
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264484
Фотография DarkMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DarkMaster
Участник
vdekameron,


А как ты думаешь загружаются и выполняются скрипты?-)

http://frontender.info/script-loading/
...
Рейтинг: 0 / 0
29.06.2016, 10:40
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264529
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
DarkMasterА как ты думаешь загружаются и выполняются скрипты?-)
Я же написал как я думаю. Так как прочитал что должно сработать, так и думаю.
Вот выдержка из статьи которые вы скинули(это о загрузке 2 скриптов с атрибутом defer): - "браузер скачает оба скрипта параллельно и выполнит их прямо перед тем, как сработает событие DOMContentLoaded, в правильном порядке."

А вот выдержка из другого источника https://learn.javascript.ru/onload-ondomcontentloaded:-
"Если в документе есть теги <script>, то браузер обязан их выполнить до того, как построит DOM. Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов.
Исключением являются скрипты с атрибутами async и defer, которые подгружаются асинхронно."
...
Рейтинг: 0 / 0
29.06.2016, 11:38
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264536
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
vdekameron,

Я думаю что если используется атрибуты defer или async то сначала должна произойти загрузка HTML содержимого а уж потом выполниться скрипт, который при этом не должен мешать рендерингу.

Вот тут это явно видно на примере. https://learn.javascript.ru/external-script
...
Рейтинг: 0 / 0
29.06.2016, 11:41
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264556
Фотография DarkMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DarkMaster
Участник
vdekameron,

Async - говорит скрипту, что порядок его выполнения не важен, браузер его подхватит сразу. Если defer - скрипт выполнится после парсинга, но до DomComplete.

Если уж надо, чтобы скрипт выполнялся после загрузки основного контента - стоит смотреть на OnLoad у документа.
...
Рейтинг: 0 / 0
29.06.2016, 11:50
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264559
Фотография DarkMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DarkMaster
Участник
DarkMasterЕсли уж надо, чтобы скрипт выполнялся после загрузки основного контента - стоит смотреть на OnLoad у документа.

Ну или внедрять скрипт на лету.
...
Рейтинг: 0 / 0
29.06.2016, 11:54
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264597
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
DarkMasterНу или внедрять скрипт на лету.
Имеется в виду document.createElement("script") ???
...
Рейтинг: 0 / 0
29.06.2016, 12:37
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264605
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
vdekameron,

Автор показывает данный пример http://plnkr.co/edit/?p=preview и объясняет это так:-При запуске вы увидите, что вся страница отобразилась тут же, а alert из внешнего скрипта появится позже, когда загрузится скрипт.

Вот поэтому у меня и путаница возникла. У него же все получилось. Сначала загрузилась страница и появилось HTML содержимое, а уж потом выполнился javascript
...
Рейтинг: 0 / 0
29.06.2016, 12:46
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264620
Фотография DarkMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DarkMaster
Участник
vdekameron,

Тут еще и браузеры вносят лепту - кто в лес, кто по дрова. IE тот же разных версий async/defer понимает поразному.

P.S. Да, имелся в виду createElement("script").
...
Рейтинг: 0 / 0
29.06.2016, 13:07
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264635
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
DarkMasterНу или внедрять скрипт на лету.

Вот и так попробовал...(вообще говоря использование async или внедрение скрипта на лету должно работать одинаково...таки да)

Код: javascript
1.
2.
3.
4.
var p = document.querySelector("p");
var script = document.createElement("script");
script.innerHTML = "for(var i = 0; i < 1000000000; i++){}; alert('Сработал скрипт')";
document.body.insertBefore(script, p);



но результат тот же. Все же я не понимаю почему у меня не выходит...Везде пишут что использование async или тем более defer должны работать асинхронно...то есть если скрипт тяжелый то страница себе загружается а скрипт уж когда загрузится тогда загрузится....но на моем примере почему то это не работает
...
Рейтинг: 0 / 0
29.06.2016, 13:21
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264663
Фотография DarkMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DarkMaster
Участник
vdekameron,

async и defer - только для внешних скриптов. Ты же делаешь внутренний.
...
Рейтинг: 0 / 0
29.06.2016, 13:55
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264675
Фотография DarkMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DarkMaster
Участник
vdekameron,

Кстати, что ты хочешь сделать? Чтобы скрипт выполнился до загрузки страницы или уже после? Если после - повесь его на OnLoad() - должно нормально отработать.
...
Рейтинг: 0 / 0
29.06.2016, 14:03
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264691
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
DarkMasterasync и defer - только для внешних скриптов. Ты же делаешь внутренний.

https://learn.javascript.ru/external-script

авторДля продвинутого читателя, который знает, что теги <script> можно добавлять на страницу в любой момент при помощи самого javascript, заметим, что скрипты, добавленные таким образом, ведут себя так же, как async. То есть, выполняются как только загрузятся, без сохранения относительного порядка.
...
Рейтинг: 0 / 0
29.06.2016, 14:17
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264693
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
DarkMasterКстати, что ты хочешь сделать? Чтобы скрипт выполнился до загрузки страницы или уже после? Если после - повесь его на OnLoad() - должно нормально отработать.

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

http://plnkr.co/edit/?p=preview
...
Рейтинг: 0 / 0
29.06.2016, 14:19
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264694
Фотография DarkMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DarkMaster
Участник
vdekameron,

У тебя скрипт без src.

Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src.
При попытке назначить их на обычные скрипты <script>…</script>, они будут проигнороированы.
...
Рейтинг: 0 / 0
29.06.2016, 14:22
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39264715
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
DarkMasterУ тебя скрипт без src.

Я ничего против этого не имею) Я лишь имел в виду то, что если скрипт без src то ВЕДЕТ себя ТАК ЖЕ как если бы был src и атрибут async
...
Рейтинг: 0 / 0
29.06.2016, 14:40
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39265028
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
vdekameronDarkMasterУ тебя скрипт без src.

Я ничего против этого не имею) Я лишь имел в виду то, что если скрипт без src то ВЕДЕТ себя ТАК ЖЕ как если бы был src и атрибут async
Что Вы подразумеваете под ТАК ЖЕ?
...
Рейтинг: 0 / 0
29.06.2016, 20:57
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39265137
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
skyANAЧто Вы подразумеваете под ТАК ЖЕ?

Добрый день.

То есть, выполняются как только загрузятся, без сохранения относительного порядка.
...
Рейтинг: 0 / 0
30.06.2016, 07:15
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39265161
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
vdekameronskyANAЧто Вы подразумеваете под ТАК ЖЕ?

Добрый день.

То есть, выполняются как только загрузятся, без сохранения относительного порядка.
А разве скрипты без src должны как-то иначе выполняться? И что такое "сохранения относительного порядка"?

P.S.: Было бы здорово, если бы Вы, перед тем как ссылку с Plunker-а сюда вставить, Save там нажимали, чтобы мы смогли посмотреть, что Вы там понаписали :)
...
Рейтинг: 0 / 0
30.06.2016, 08:30
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39265169
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
skyANAА разве скрипты без src должны как-то иначе выполняться?

Я не говорил что они должны иначе выполняться) Просто человек не понял что я написал, я пояснил.

skyANAИ что такое "сохранения относительного порядка"?

Это значит:- сначала выполняется меньший по размеру скрипт, даже если он будет не первый по порядку.
...
Рейтинг: 0 / 0
30.06.2016, 09:10
| Ответить | Цитировать | Написать  
атрибуты defer и async при подключении javaScript
    #39411295
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
Помогите пожалуйста найти в спецификации async и defer.... не получается найти.
Я все-таки хочу разобраться.

Занимаюсь по https://learn.javascript.ru
авторАтрибут async
Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении <script async src="..."> браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится.


По факту на примере:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<!DOCTYPE HTML>
<html>
<head>
	<title>async</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	<p> ..... Параграф 1.....</p>
	
	<!-- 2) Скрипты с атрибутами async-->
	<script async src="bigWithAsync.js"></script>
	<script async src="smallWithAsync.js"></script>
	
	<p>.......Параграф 2.......</p>
</body>
</html>



1) chrome - пока оба скрипта не загрузятся содержимое параграфов не отображается. Плюс еще к этому, выполняется первый bigWithAsync.js, хотя в этой же статье:
авторПервым выполнится small.js, так как скрипты из-за async ведут себя совершенно независимо друг от друга, страница тоже от них не зависит.

2) firefox - тут вообще каша полная. Страница загружается одновременно с выполнением bigWithAsync.js, затем выполняется smallWithAsync.js и снова bigWithAsync.js(( а скрипта то всего два!
3) IE - страница загружается сразу но все-равно bigWithAsync.js загружается первым, хоть он и дольше, затем smallWithAsync.js
4) Opera повел себя абсолютно также как и chrome

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

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


По факту на примере:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<!DOCTYPE HTML>
<html>
<head>
	<title>defer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	<p> ..... Параграф 1.....</p>
	
	<script defer src="bigWithDefer.js"></script>
	<script defer src="smallWithDefer.js"></script>
	
	<p>.......Параграф 2.......</p>
</body>
</html>



1) chrome - Снова нет асинхронности! Отрабатывает аналогично async(страница загружается только тогда, когда выполняется сначала bigWithDefer.js потом smallWithDefer.js
2) firefox - Тут картина получше но все равно не асинхронно. Страница загрузилась одновременно с загрузкой bigWithDefer.js, затем сработал smallWithDefer.js
3) IE - Все четко как и описано автором.
4) Opera - Точно также как chrome

На всякий случай используемые скрипты:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
for(var i = 1; i < 10000000; i++){
	i = i - .3;
	if(i > 9999999) alert("Выполнился маленький скрипт с аттр async");
}

for(var i = 1; i < 10000000; i++){
	i = i - .8;
	if(i > 9999999) alert("Выполнился большой скрипт с аттр async");
}



ну и для defer аналогичные

P/S Люди что говорит спецификация по этому поводу??? Ведь она должна вносить однообразие, которого просто нет!
...
Рейтинг: 0 / 0
27.02.2017, 23:34
| Ответить | Цитировать | Написать  
21 сообщений из 21, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / атрибуты defer и async при подключении javaScript
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]