Комментарий: асинхронная загрузка может быть понята как неблокирующая одновременная обработка. В прошлом мы использовали различные методы JavaScript для этого. Теперь Webkit реализовал асинхронный атрибут тега сценария для HTML5. Заинтересованные друзья могут узнать об этом.
(Примечание переводчика: асинхронная нагрузка можно понимать как неблокирующая одновременная обработка.)Одна из причин, по которой я взволнован HTML5, заключается в том, что он реализует много долгожданных функций в отрасли. Нам всегда нужно отображать пустые подсказки в поле ввода, но все они реализованы в JavaScript. Мы также хотим, чтобы весь блок был кликабельным, который также реализован с использованием JavaScript.
Webkit теперь реализует асинхронное асинхронное свойство тега скрипта для HTML5. В прошлом мы использовали различные уловки JavaScript для этого, но теперь новые свойства делают его относительно простым в предотвращении блокировки.
асинхро
Как я упоминал ранее, добавление асинхронного атрибута очень просто:
<!-Укажите Async и Onload обратный вызов->
<script async src = "sitescript.js"> </script>
Фактически, если ваш дизайн структуры JavaScript и HTML является разумным, то 90% случаев ваши элементы сценария могут быть загружены асинхронно.
Определение - HTML -атрибуты
Браузер Safari добавляет дополнительный атрибут DEF
<!-Укажите DEFE, эффект похож на Async->
<script defer src = "sitescript.js"> </script>
Разница между асинхронным и отложением
Официальный блог Webkit объясняет разницу между Async и Defer
------------------------------------
При обычных обстоятельствах, если браузер встречается с внешним сценарием при анализе исходного файла HTML, процесс анализа будет приостановлен, а запрос будет отправлен для загрузки файла скрипта. DOM SARSING будет продолжать выполняться после того, как сценарий будет полностью загружен и выполнен. например:
<script src = myblockingscript.js> </script>
Во время процесса загрузки браузер заблокирован от выполнения других полезных задач, включая анализ HTML, выполнение других сценариев и отображение макета CSS. Хотя сканеры Webkit Preload могут обнаружить многопоточное чтение на этапе загрузки, для некоторых страниц все еще существует большая сетевая задержка.
Существует много методов для улучшения скорости отображения страницы, но все они требуют дополнительных навыков, специфичных для кода и браузера. Теперь скрипт не должен придется выполнять сценарии синхронно, добавляя атрибуты асинхронных или отложений. Пример заключается в следующем:
<script async src = "myasyncscript.js"> </script>
<script defer src = "mydeferscript.js"> </script>
Ни асинхровый, ни сценарий аннотации не будет загружены немедленно без приостановки диапазона HTML. Обе обратные вызовы событий поддержки Onload для решения инициализации, которая требует выполнения скрипта.
Разница между ними заключается в разнице в исполнении:
Асинхронный скрипт будет выполнен сразу после загрузки файла скрипта, и его время выполнения должно быть до того, как событие загрузки окна будет запускается. Это означает, что несколько асинхровых сценариев, вероятно, не выполняются в том порядке, в котором они появляются на странице.
Напротив, браузер гарантирует, что несколько сценариев отсрочки выполняются в порядке их возникновения на странице HTML, и что время выполнения проходит до завершения разрешения DOM, и запускается событие Domcontent, загруженное документа.
Ниже приведен пример, который займет 1 секунду для загрузки и 1 секунду, чтобы разобрать другие операции. Мы видим, что вся загрузка страницы заняла около 2 секунд.
Тот же пример, но на этот раз мы указали атрибут сценария DEFE. Потому что при загрузке сценария отсрочки другие операции могут выполняться параллельно, так что он примерно в 1 раза быстрее.
------------------------------------
Какие браузеры поддерживают асинхронность и отложены
Также упоминается в статье, указанной выше:
В дополнение к новой версии браузера, основанной на Webkit, Firefox в течение длительного времени поддерживает свойства отсрочки и нагрузки и добавил асинхровый атрибут с FF3.6. IE также поддерживает атрибут DEFE, но не поддерживает асинхронный атрибут. Начиная с IE9, атрибут Onload также будет поддерживаться.
Aynsc потрясающий!
Я был так рад видеть внедрение Webkit Async. Блокировка является огромным узким местом для производительности для каждого веб -сайта, и возможность напрямую указывать файлы скриптов Асинхронная загрузка, несомненно, ускорит веб -страницы.