Тег сценария - асинхронный и отложенный

У меня есть пара вопросов об атрибутахasync & Амп;defer для<script> тег, который, насколько я понимаю, работает только в браузерах HTML5.

На одном из моих сайтов есть два внешних файла JavaScript, которые в данный момент находятся над</body> тег; во-первых Источник от Google, а второй является локальным внешним скриптом.

With respects to site load speed

Is there any advantage in adding async to the two scripts I have at the bottom of the page?

Would there be any advantage in adding the async option to the two scripts and putting them at the top of the page in the <head>?

Would this mean they download as the page loads? I assume this would cause delays for HTML4 browsers, but would it speed up page load for HTML5 browsers? Using <script defer src=... Would loading the two scripts inside <head> with the attribute defer the same affect as having the scripts before </body>? Once again I assume this would slow up HTML4 browsers. Using <script async src=...

Если у меня есть два сценария сasync включен

Would they download at the same time? Or one at a time with the rest of the page? Does the order of scripts then become a problem? For example one script depends on the other so if one downloads faster, the second one might not execute correctly etc.

Наконец, лучше ли мне оставить все как есть до тех пор, пока HTML5 не станет более распространенным?

 Alohci30 мая 2012 г., 01:53
async новый (иш), ноdefer был частью IE с IE4.defer был добавлен в другие браузеры гораздо позже, но старые версии этих браузеров, как правило, гораздо меньше.
 SLaks30 мая 2012 г., 01:30
 sept0828 дек. 2016 г., 09:41
Теперь HTML5 стал очень популярным!
 vsync23 авг. 2018 г., 20:30
defer так же, как размещение сценариев наbottom HTML, который был распространен в течение многих лет.

Ответы на вопрос(7)

Решение Вопроса

</body>, Асинхронизация может использоваться со сценариями, расположенными там, в нескольких случаях (см. Обсуждение ниже). Задержка не будет иметь большого значения для сценариев, расположенных там, потому что работа по анализу DOM в значительной степени уже выполнена в любом случае.

Вот статья, которая объясняет разницу между асинхронным и отложенным:http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/.

Ваш HTML будет отображаться быстрее в старых браузерах, если вы сохраняете скрипты в конце тела прямо перед</body>, Таким образом, чтобы сохранить скорость загрузки в старых браузерах, не нужно размещать их где-либо еще.

Если ваш второй сценарий зависит от первого сценария (например, ваш второй сценарий использует jQuery, загруженный в первый сценарий), то вы не можете сделать их асинхронными без дополнительного кода для управления порядком выполнения, но вы можете сделать их отложенными, потому что отложенные сценарии будут по-прежнему выполняется по порядку, но только после того, как документ был разобран. Если у вас есть этот код и вам не нужны сценарии для запуска сразу, вы можете сделать их асинхронными или отложенными.

Вы можете поместить сценарии в<head> пометить и установить ихdefer и загрузка сценариев будет отложена до тех пор, пока DOM не будет проанализирован, и это обеспечит быстрое отображение страницы в новых браузерах, которые поддерживают отложенное выполнение, но это не поможет вам вообще в старых браузерах, и это действительно не быстрее, чем просто поставить сценарии прямо перед</body> который работает во всех браузерах. Таким образом, вы можете понять, почему лучше всего</body>.

Асинхронизация более полезна, когда вам действительно все равно, когда скрипт загружается, и от загрузки этого скрипта ничего не зависит от пользователя. Наиболее часто цитируемый пример использования асинхронного сценария - это аналитический скрипт, такой как Google Analytics, который вам не нужен, чтобы чего-то ждать, и он не требует срочного запуска, и он сам по себе, поэтому от него ничего не зависит.

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

 04 авг. 2014 г., 19:43
Вы сказали, что в сценарииhead и установив ихdefer не будет быстрее, чем положить их раньше</body>, но из того, что я прочитал, неверно. Подумайте об этом - если вы положите сценарии в<head>, то они начнут скачивать сразу, тогда как если они прямо перед</body> затем сначала загружаются все остальные элементы.
 04 авг. 2014 г., 19:49
@Nate - это не заставит ваш документ загружаться быстрее, что является моей целью. Вы правы в том, что это могло бы улучшить загрузку сценария раньше, но это также могло бы замедлить загрузку документа и его содержимого, потому что вы используете часть пропускной способности и используете одно из ограниченных подключений, которые браузер устанавливает с данным сервер для загрузки сценария, в то время как он также пытается загрузить ваш контент.
 19 сент. 2013 г., 01:13
Defer должен по-прежнему запускать их по порядку, но запускать до dom-contentloaded. Разве это не означает, что положить его в голову будет быстрее, так как он может начать их загрузку ДО ТОГО, как анализируется тело html?
 Adam30 мая 2012 г., 01:57
Большое спасибо, что нашли время, чтобы объяснить это мне ... признателен. !!
 09 дек. 2014 г., 03:33
& quot; Если ваш второй сценарий зависит от первого сценария ... тогда вы не можете сделать их либо асинхронными, либо отложенными & quot; - это не соответствует действительности, с отложенным выполнением по порядку.

async а такжеdefer загрузит файл во время анализа HTML. Оба не будут прерывать парсер.

The script with async attribute will be executed once it is downloaded. While the script with defer attribute will be executed after completing the DOM parsing.

The scripts loaded with async does n't guarantee any order. While the scripts loaded with defer attribute maintains the order in which they appear on the DOM.

использование<script async> когда скрипт ни на что не опирается. когда сценарий зависит от использования.

Лучшее решение было бы добавить в нижней части тела. Там не будет никаких проблем с блокировкой или рендерингом.

UPDATE

Ответ был исправлен на основе комментариев.

 30 мар. 2015 г., 17:01
Async не будет останавливать анализатор
 14 дек. 2015 г., 18:45
Но не блокирует ли он синтаксический анализатор после его загрузки и последующего выполнения? Я думаю, это то, что имел в виду navyakumar.
 22 февр. 2016 г., 14:53
Async блокирует парсер
 29 нояб. 2018 г., 09:06
Просто хочу кое-что прояснить здесь, здесь происходят две вещи: 1. Загрузка ресурса 2. Выполнение ресурса. Загрузка ресурса в обоих случаях (асинхронный и отложенный) не блокируется, то есть они не блокируют синтаксический анализ html, в то время как выполнение в асинхронном режиме блокирует синтаксический анализ, и в случае отсрочки выполнение происходит после анализа разметки html, следовательно, не блокирует в этом случае.

async а такжеdefer Скрипты начинают загружаться немедленно, без остановки анализатора, и оба поддерживают опциональныйonload Обработчик для решения общей необходимости выполнить инициализацию, которая зависит от сценария.

Разница междуasync а такжеdefer центрируется, когда скрипт выполняется. каждыйasync Сценарий выполняется при первой возможности после завершения загрузки и до события загрузки окна. Это означает, что возможно (и вероятно), чтоasync Сценарии не выполняются в том порядке, в котором они встречаются на странице. В то время какdefer Сценарии, с другой стороны, гарантированно выполняются в порядке их появления на странице. Это выполнение начинается после того, как синтаксический анализ полностью завершен, но до того, как документDOMContentLoaded событие.

Источник & amp; Более подробная информация:Вот.

асинхронные и отложенные

enter image description here

Async scripts are executed as soon as the script is loaded, so it doesn't guarantee the order of execution (a script you included at the end may execute before the first script file )

Defer scripts guarantees the order of execution in which they appear in the page.

Ссылка на эту ссылку:http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

 12 дек. 2018 г., 15:25
@writofmandamus выглядит какasync Выиграет. Увидетьstackoverflow.com/questions/13821151/…
 14 нояб. 2017 г., 23:15
Я хотел бы, чтобы они позволилиdefer для встроенных сценариев (т.е.src="" сценарии), чтобы избежать необходимости оборачивать все вwindow.addEventListener('DOMContentLoaded, handler) Перезвоните.
 25 мая 2018 г., 12:24
@Prasanth Bendra: не могли бы вы мне помочь? Можете ли вы объяснить, как это, если я положуdefer & Амп; & APOS; асинхронный & APOS; как тогда как это будет работать ..?
 11 нояб. 2017 г., 22:10
Действительно, изображение стоит тысячи слов (или 396)
 26 июл. 2017 г., 23:59
Таким образом, в этом примере не будет<script defer> и `& lt; script async defer & gt; дать тот же результат?

async, defer

В HTML5 вы можете указать браузеру, когда запускать код JavaScript. Есть 3 варианта:

<script       src="myscript.js"></script>

<script async src="myscript.js"></script>

<script defer src="myscript.js"></script>

Without async or defer, browser will run your script immediately, before rendering the elements that's below your script tag.

With async (asynchronous), browser will continue to load the HTML page and render it while the browser load and execute the script at th,e same time.

With defer, browser will run your script when the page finished parsing. (not necessary finishing downloading all image files. This is good.)

 21 нояб. 2013 г., 18:52
Вы не ответили на вопросы: S
 26 окт. 2016 г., 07:57
Примечание: нет никакой гарантии, что скрипты будут работать в порядке, указанном с помощью Async. & quot; Поэтому, если ваш второй сценарий зависит от первого сценария, избегайте Async. & quot;
 23 авг. 2018 г., 20:28
async - Сценарии выполненыmoment они были загружены, без учета их порядка в файле HTML.
 03 нояб. 2013 г., 11:45
коротко и просто.
 12 сент. 2015 г., 16:01
Требуется шаблон blogger.comasync="" прежде чем он подтвердит и сохранит изменения шаблона.

что поведение defer и async зависит от браузера, по крайней мере, на этапе выполнения. ЗАМЕЧАНИЕ: отсрочка распространяется только на внешние скрипты. Я предполагаю, что асинхронность следует той же схеме.

В IE 11 и ниже порядок выглядит следующим образом:

async (could partially execute while page loading) none (could execute while page loading) defer (executes after page loaded, all defer in order of placement in file)

В Edge, Webkit и т. Д. Атрибут async игнорируется или помещается в конец:

data-pagespeed-no-defer (executes before any other scripts, while page is loading) none (could execute while page is loading) defer (waits until DOM loaded, all defer in order of placement in file) async (seems to wait until DOM loaded)

В более новых браузерах атрибут data-pagespeed-no-defer запускается перед любыми другими внешними сценариями. Это для сценариев, которые не зависят от DOM.

ПРИМЕЧАНИЕ. Используйте defer, если вам нужен явный порядок выполнения ваших внешних скриптов. Это говорит браузеру выполнить все отложенные сценарии в порядке размещения в файле.

В сторону: размер внешних javascript-скриптов имел значение при загрузке ... но не влиял на порядок выполнения.

Если вы беспокоитесь о производительности ваших скриптов, вы можете рассмотреть возможность минимизации или простой их динамической загрузки с помощью XMLHttpRequest.

 20 апр. 2018 г., 11:38
data-pagespeed-no-defer is an attribute используетсяserver side PageSpeed module,data-pagespeed-no-defer Атрибут сам по себе не имеет никакого эффекта в любом браузере.

как оба будут работать. Надеюсь, эта ссылка будет полезна ...

Async

Когда вы добавляете атрибут async в свой тег сценария, произойдет следующее & # xAD; low & # xAD; ing.

<script src="myfile1.js" async></script>
<script src="myfile2.js" async></script>
Make par­al­lel requests to fetch the files. Con­tinue pars­ing the doc­u­ment as if it was never interrupted. Exe­cute the indi­vid­ual scripts the moment the files are downloaded.

Defer

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

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>
Make par­al­lel requests to fetch the indi­vid­ual files. Con­tinue pars­ing the doc­u­ment as if it was never interrupted. Fin­ish pars­ing the doc­u­ment even if the script files have downloaded. Exe­cute each script in the order they were encoun­tered in the document.

Ссылка :Разница между асинхронным и отложенным

Ваш ответ на вопрос