Html — Использование атрибута defer


Содержание

Атрибуты async и defer

Не могу разобраться с атрибутами defer и async.

Занимаюсь по https://learn.javascript.ru
автор:
Атрибут async
Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении 28.02.2020, 22:39

Как корректно заменить async: false на async: true
Проблема в том, что данный код устарел, блокирует браузер на время выполнения скрипта и выдает.

Render blocking vs asyns vs defer usage
Почитал про эти три варианта, и в конце статьи советуют следующее: Я не совсем понимаю, почему.

Книга Async JavaScript?
Здравствуйте. Вопрос конечно тривиальный, но есть ли у кого книга «Async JavaScript», автор Тревор.

Async для подключения скриптов
проверил свой сайт на сервисе https://developers.google.com/speed/pagespeed/insights было 73/100.

Атрибут defer, window.status, циклы
1) Почему у меня не работает атрибут defer элемента ? В учебнике написано, что этот атрибут.

01.03.2020, 01:32 2 01.03.2020, 09:13 [ТС] 3

А при чем тут объем? время выполнения цикла разное. Я так понимаю, что когда посреди html встречается script, то браузер обязан дождаться его выполнения а уж потом дальше загружать страницу под этим скриптом.

Да выполняю локально, что от этого меняется? и чем мешают расширения в браузере

01.03.2020, 13:11 4

Потому что скрипт сначала загружается, а потом выполняется.

Я подставил один цикл в конец несжатого файла библиотеки jquery, а другой подставил в конец несжатого файла библиотеки underscore. Потом поменял alert на console.log. Все работает так как и описано в спецификации или там где вы читали об async и defer.

Кроме этого браузер кеширует скрипты, поэтому идеальные условия ваших тестов тоже не сохранились)

01.03.2020, 18:20 [ТС] 5

1)Буду использовать удаление кеш!
2)Как и вы поместил цикл(только один и оставил alert) в конец jquery, underscore

Сначала без атрибутов:

1) firefox: отрабатывает как доктор прописал(сначала показывается первый параграф, отрабатывает jquery и underscore
2) Chrome: отрабатывает jquery, underscore и только потом показывается оба параграфа( ff на мой взгляд более правильно)
3) IE: отрабатывает jquery, показывается первый параграф, отрабатывает underscore и показывается второй р (тоже не совсем корректно)


Теперь добавлю атрибут async:

1)firefox снова на коне! Как доктор прописал! Скрипты работают независимо от загрузки страницы, плюс первый загрузился underscore, т.к. он меньше
2)chrome: Полная лажа. Загружается сначала jquery затем underscore и только потом показываются параграфы.
3)IE: точно также как и в chrome

Теперь попробую с defer:

1)firefox снова красавец. Подождал загрузки страницы, затем строго по порядку отработали скрипты.
2)chrome: снова лажа. Параграфы появляются только после отработки скриптов
3)IE: аналогично chrome

В чем подвох? Я же делаю также , как по вашим словам делали вы. Повторяю КЭШ чистил перед каждым примером.

Добавлено через 2 минуты
В обеих библиотеках использовал

HTML Атрибут defer

Атрибут defer (от англ. «defer» ‒ «откладывать») откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.

Примечание: Атрибут defer применяется только для внешних скриптов, которые загружаются с использованием атрибута src .

Существует несколько вариантов выполнения внешнего скрипта, подключенного к HTML документу:

  • если в теге script указан атрибут async — скрипт будет выполняться асинхронно с загрузкой сраницы;
  • если в теге script указан атрибут defer — выполнение скрипта будет отложено до тех пор, пока вся страница не будет загружена полностью;
  • если в теге script указаны одновременно атрибуты defer и async — скрипт будет выполняться асинхронно с загрузкой сраницы, т.е. атрибут defer будет игнорирован;
  • если в теге script нет атрибуов defer и async — браузер будет ожидать выполнения внешнего скрипта, а уже после этого отобразит ту часть документа, которая находится под ним (по умолчанию).

    Синтаксис

    Значения

    Данный атрибут является логическим атрибутом. Может указываться либо без значения, либо с пустым значением, либо со значением defer .

    Вопрос по html, w3c, javascript &#8211 Откладывание JavaScript — что такое правильный HTML синтаксис defer или defer = «defer»

    Каков правильный синтаксис для использования атрибута defer в вашем javascript?


    Я видел, как это делается двумя способами:

    Из опыта [и ссылки, которую я не могу найти], я более склонен использовать второй вариант, но я просто дважды проверилофициальный сайт W3C и кажется, что вариант 1 правильный.

    2.4.2 Булевы атрибуты

    Ряд атрибутов являются логическими атрибутами. Наличие логического атрибута в элементе представляет истинное значение, а отсутствие атрибута представляет ложное значение.

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

    так defer правильно, и так defer=»defer» а также defer=»DeFeR» а также defer=»»

    Некоторые атрибуты играют роль логических переменных (например, selected атрибут для OPTION элемент). Их появление в начальном теге элемента означает, что значение атрибута равно «true». Их отсутствие подразумевает значение «ложь».

    В HTML логические атрибуты могут отображаться в свернутом виде — значение атрибута отображается отдельно в начальном теге элемента. Таким образом, selected может быть установлен записью:

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

    Однако, если вы используете XHTML, вы должны использовать вторую форму, поскольку XHTML следует синтаксису XML, где атрибуты всегда должны иметь значение.

    Если бы вы использовали XHTML, то вы быдолжны использовать более длинную версию.

    HTML 5также позволяет обе версии и удаляет рекомендацию использовать один поверх другого (поскольку для совместимости с XHTML, который используется как text / html, все современные браузеры могут обрабатывать оба синтаксиса).

    которые указывают, как должен выполняться скрипт. Атрибуты defer и async не должны указываться, если атрибут src отсутствует.

    Атрибут defer

    Во время выполнения сценария может вызываться метод document.write() для динамического добавления содержимого в документ. Поэтому когда HTML — анализатор встречает сценарий, он должен прекратить разбор документа и ожидать, пока сценарий не завершит свою работу. Стандарт HTML 4 определяет атрибут defer для тега

    Однако в XHTML значение этого атрибута должно быть указано:

    К настоящему моменту Internet Explorer был единственным браузером, использующим атрибут defer. При этом задержка выполняется, только когда тег

    В какой_то момент вам может потребоваться с помощью метода document.write() или свойства innerHTML вывести некоторый другой сценарий (обычно в другое окно или фрейм). Тогда для завершения генерируемого сценария потребуется вывести тег . Здесь необходима осторожность – HTML — анализатор не пытается понять JavaScript — код, и встретив строку «/script» даже внутри кавычек, он предположит, что это закрывающий тег выполняемого в данный момент сценария. Чтобы обойти это препятствие, разбейте тег на части и запишите его, например, в виде выражения » «, как показано в следующем фрагменте:

    Цукерберг рекомендует:  Php - Некоторые задачи по php

    f1.document.write(» «);

    В качестве альтернативы можно экранировать символ слэша / в теге с помощью символа обратного слэша:


    В XHTML сценарии заключаются в секцию CDATA и потому проблема с закрывающим тегом никак не проявляется.

    Нестандартные атрибуты тега

    Дата добавления: 2015-08-01 ; просмотров: 365 ; ЗАКАЗАТЬ НАПИСАНИЕ РАБОТЫ

    Можно ли использовать атрибуты async и defer в теге HTML-скрипта?

    Я хотел бы загрузить следующий код JavaScript, используя как defer, так и async:

    поскольку defer поддерживается Internet Explorer 5.5+, как вы можете видеть вCanIUse.com, я хотел бы изящно вернуться к использованию defer, если async недоступен. Асинхронный я думаю, что лучше использовать, когда он доступен, но не поддерживается до Internet Explorer 10.

    поэтому мой вопрос: Является ли приведенный выше код допустимым HTML? Если нет, то можно ли создать эту ситуацию с помощью JavaScript, изящно возвращаясь к использованию defer на скрипте, когда асинхронность недоступна?

    3 ответов

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

    вопрос в том, чего бы вы ожидали от него? Если оба асинхронные и отложить присутствуют я ожидал бы, что сценарий будет отложен и будет выполняться только после DOMContentLoaded, когда браузер простаивает, но если я правильно читаю спецификацию, это выглядит как отложить игнорируется, если асинхронные устанавливается и скрипт загружается асинхронно, поэтому будет выполняться, как только он будет доступен, что вполне может быть до DOMContentLoaded и может блокировать другие ресурсы.

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

    да, его действительный HTML, и он будет работать, как ожидалось.

    любой совместимый с W3C браузер распознает асинхронные атрибут и относиться к скрипту должным образом, тогда как legacy IE версии распознают отложить.

    Так как оба атрибута являются boolean не обязательно присвоить любое значение.

    Можно ли использовать атрибут defer вместо window.onload?

    Читаю на htmlbook
    «Атрибут defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.»

    Речь идет о загрузке структуры страницы или всего контента вообще?

    • Вопрос задан более трёх лет назад
    • 229 просмотров

    На htmlbook статья не совсем корректна. Вот еще некоторое описание.

    There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

    Руководство для прохождения интервью по фронтенду

    Что это такое?

    В отличие от типичного собеседования с разработчиками ПО, на собеседованиях фронтенд-разработчиков меньше внимания уделяется алгоритмам. Большая часть вопросов касается специфичных знаний и компетенций в таких областях, как HTML, CSS, JavaScript.

    Несмотря на то, что существуют ресурсы, призванные помочь в подготовке к собеседованию, они сильно отличаются по полноте материалов от тех же ресурсов для разработчиков ПО. Среди того, что существует на сегодняшний день, наиболее полезным может быть сборник вопросов Front-end Developer Interview Questions. К сожалению, на многие вопросы я не смог найти в сети полные и удовлетворяющие ответы. Поэтому в документе ниже я постарался самостоятельно ответить на них. Будучи открытым репозиторием, этот проект может жить и развиваться благодаря сообществу, поскольку интернет эволюционирует.

    Нужна более общая подготовка?

    Вас может заинтересовать Tech Interview Handbook, в котором содержится информация для прохождения общих технических интервью, в частности описаны алгоритмы, даны ответы на вопросы по софт-скиллс. Также есть Interview Cheatsheet!

    Вопросы по HTML

    Ответы на вопросы из списка Front-end Job Interview Questions — HTML Questions. Комментарии с предложениями по улучшению и дополнению приветствуются!

    Что делает DOCTYPE?

    — это сокращение от « document type» (тип документа). Он объявляется в HTML для того, чтобы различать стандартный режим или режим совместимости ( quirks mode). Его наличие говорит браузеру работать со страницей в стандартном режиме.

    Мораль истории — просто добавляй в начало страницы.

    Ссылки

    Как поддерживать страницу на нескольких языках?

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

    Когда к серверу делается HTTP-запрос, то браузер пользователя обычно отсылает информацию о предпочитаемом языке в заголовке Accept-Language . Сервер может использовать эту информацию, чтобы вернуть версию документа на подходящем языке, если такая возможность есть. В возвращенном HTML-документе обязательно должен быть указан атрибут lang у тега , к примеру .

    На бэкенде HTML-разметка будет содержать плейсхолдер i18n , а контент для конкретного языка будет хранится в YML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.

    Ссылки

    На что обратить внимание при разработке мультиязычных сайтов?


    • Используй атрибут lang в HTML.
    • Перенаправляй пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
    • Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из под контроля.
    • Ограничение длины слов и предложений. Некоторый контент может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
    • Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
    • Форматируете даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в Америке или «31 мая 2012» в большинстве стран Европы.
    • Не склеивайте переведенные строки. Не пишите что-то вроде «Сегодняшняя дата » + date . Эта фраза будет выглядеть коряво на языках с другим порядком слов. Вместо этого используйте параметры шаблона.
    • Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.

    Ссылки

    Для чего отлично подойдут data-атрибуты?

    До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали data -атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов, на странице или в приложении.

    На сегодняшний день использование data -атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM при помощи связывания данных через библиотеку или фреймворк.

    Ссылки

    Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?

    1. Семантика. Позволяет более точно описать из чего состоит контент.
    2. Связанность. Позволяет общаться с сервером новыми и инновационными способами.
    3. Офлайн и хранилище. Позволяют страницам хранить данные локально на клиентской стороне и более эффективно работать в офлайне.

    4. Мультимедиа. Ставит создание видео и аудио на первое место в вебе.
    5. 2D- и 3D-графика и эффекты. Позволяет расширить возможности презентации.
    6. Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
    7. Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
    8. Стилизация. Позволяет создавать более сложные темы оформления.

    Ссылки

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

    Добавление атрибутов defer и async к WordPress скриптам

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

    Начиная с версии 4.1, был представлен новый фильтр script_loader_tag , который, предоставляет простой способ добавить атрибуты async/defer без ковыряний в заднем проходе.

    Как использовать

    Добавьте предложеный код в functions.php:

    Если вы хотите использовать атрибут defer , то просто замените в сниппете async=»async на defer=»defer» .

    Где взять идентификатор обработчика my-js-handle ? Его вы можете подсмотреть в коде подключения скриптов внутри темы или плагина при помощи функции wp_register_script() и wp_enqueue_script() (первый аргумент):

    Добавления к нескольким скриптам сразу

    Что делать, если надо добавить атрибут defer сразу к нескольким скриптам? Собрать все идентификаторы обработчиков в массив и пройтись по ним циклом в том же хуке:

    Для атрибута async код будет выглядеть аналогично, за исключением девятой строки, где надо просто заменить defer=»defer» на async=»async .

    JavaScript :: Порядок выполнения внешних скриптов


    Порядок выполнения скриптов по умолчанию

    В общем случае по умолчанию все скрипты начинают выполняться последовательно один за другим, в порядке следования элементов ‘script’ в коде документа. И пока очередной скрипт выполнен не будет, содержимое тела документа, которое идет после текущего элемента ‘script’ , отображено на странице не будет. Так в примере №1 первым всегда будет выполняться скрипт, который идет в исходном коде выше. Затем выполнится второй скрипт и в конце появится содержимое абзаца.

    Пример №1. Порядок выполнения скриптов по умолчанию

    Использование скриптовых элементов

    Есть два скриптовых элемента. Первый, script , позволяет определять скрипты и контролировать их выполнение. Второй, noscript , позволяет определить, что произойдет, если браузер не поддерживает скрипты или они отключены.

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

    Элемент script

    Элемент script позволяет включать скрипты в ваши страницы: эти скрипты могут быть либо определены внутри документа или находиться во внешних файлах. Наиболее часто используемый тип скриптов – это скрипты JavaScript; и этому типу я уделю основное внимание, но браузеры поддерживают и другие скриптовые языки, в том числе те, что остались от браузерных войн, которые я описал в главе 1. В таблице 7-17 описан элемент script . Вы можете использовать один элемент script для каждого скрипта, который необходимо определить или импортировать.

    Таблица 7-17: Элемент script

    Элемент script
    Тип элемента Метаданные/фразовый
    Разрешенные родительские элементы Любой элемент, который может содержать метаданные или фразовые элементы
    Локальные атрибуты type , src , defer , async , charset
    Содержание Выражения скриптового языка или пусто, если указана внешняя библиотека JavaScript
    Стиль тегов Требуются открывающий и закрывающий теги; теги пустых элементов не допускаются даже при подключении внешней библиотеки JavaScript
    Новый в HTML5 Нет
    Изменения в HTML5 Атрибут type является необязательным в HTML5; были добавлены атрибуты async и defer ; атрибут HTML4 language является устаревшим в HTML5
    Соглашение по стилям Нет

    Тип этого элемента меняется в зависимости от того, где он используется. Элементы script , определенные в элементе head , являются метаданными, но элементы script , определенные в других элементах (таких как body или section ) являются фразовыми элементами.

    В следующих разделах я покажу вам, как использовать элемент script для достижения различных эффектов. В таблице 7-18 описаны атрибуты, которые определяет элемент script .

    Таблица 7-18: Локальные атрибуты элемента script

    Атрибут Определение
    type Указывается тип скрипта, на который ссылаются или который определен. Этот атрибут может быть опущен для скриптов JavaScript.
    src Задает URL-адрес для внешнего скриптового файла. См. следующие примеры.
    defer
    async
    Определяет, как будет выполнен скрипт. См. следующие примеры. Эти атрибуты могут быть использованы только в сочетании с атрибутом src .
    charset Задает кодировку внешнего скриптового файла. Этот атрибут может быть использован только в сочетании с атрибутом src .

    Определение внутреннего скрипта

    Самый простой способ определить скрипт – это сделать это внутри документа. Это обозначает, что вы включаете JavaScript выражения в HTML страницу. В листинге 7-17 представлен пример.

    Листинг 7-17: Определение внутреннего скрипта

    Если вы не используете атрибут type , браузер будет считать, что вы используете JavaScript. Этот простой скрипт добавляет текст в HTML документ. По умолчанию скрипты выполняются сразу же, как только они встречаются на странице. Вы можете увидеть результат выполнения этого скрипта на рисунке 7-8, где текст из скрипта отображается в окне браузера до элемента р , содержащегося в body .

    Рисунок 7-8: Результат выполнения простого скрипта

    Загрузка внешней скриптовой библиотеки


    Вы можете разделить скрипты по отдельным файлам и загружать их, используя элемент script . Эти файлы могут быть как простыми (как предыдущий пример) или сложными (например, мощные библиотеки, такие как jQuery). Чтобы продемонстрировать внешний скрипт, я создал файл с именем simple.js , содержание которого показано в листинге 7-18.

    Листинг 7-18: Содержание скриптового файла simple.js

    В этом файле содержится одно выражение, похожее на то, которое я использовал во внутреннем скрипте. В листинге 7-19 показано, как можно использовать атрибут src в элементе script для ссылки на этот файл.

    Элемент script должен быть пустым, если он использует атрибут src . Вы не можете использовать один и тот же элемент script для определения внутреннего и внешнего скриптов.

    Листинг 7-19: Загрузка внешнего скрипта с использованием атрибута src

    Значение атрибута src – это URL файла скрипта, который вы хотите загрузить. Я создал файл simple.js в том же каталоге, что и HTML файл, так что я могу использовать в этом примере относительный URL. Вы можете увидеть результат выполнения скрипта на рисунке 7-9.

    Рисунок 7-9: Результат выполнения внешнего скрипта

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

    Отсрочка выполнения скрипта

    Вы можете в определенной степени управлять выполнением скрипта при помощи атрибутов async и defer . Атрибут defer сообщает браузеру, что он не должен выполнять скрипт, пока страница не загрузится и не обработается. Чтобы понять, какую пользу может принести атрибут defer , можно взглянуть на проблему, которую он решает. В листинге 7-20 показано содержание скриптового файла simple2.js , в котором содержится одно выражение.

    Листинг 7-20: Содержание скриптового файла simple2.js

    Я разберу различные части этого выражения в части IV данной книги, а сейчас достаточно знать то, что когда этот скрипт запустится, он найдет элемент со значением атрибута id равным applecode и изменит внутренний текст этого элемента на cherries . В листинге 7-21 показан HTML документ, который ссылается на скриптовый файл при помощи элемента script .

    Листинг 7-21: Ссылка на скриптовый файл

    При загрузке предыдущей HTML страницы, вы не получите желаемого результата, как показано на рисунке 7-10.

    Рисунок 7-10: Проблема со временем выполнения скрипта

    По умолчанию браузер, когда сталкивается с элементом script , прекращает обработку HTML документа, загружает скриптовый файл и выполняет его содержание. И только после того, как завершится выполнение скрипта, браузер возобновляет обработку HTML. Это обозначает, что браузер загрузит и выполнит выражения из simple2.js , прежде чем обработает остальную часть HTML и обнаружит элемент code . Скрипт не найдет элемент, который он ищет, и поэтому никаких изменений не последует. После того как скрипт завершит свою работу, браузер продолжит разбирать (парсить) HTML и найдет элемент code . Но это уже слишком поздно для скрипта, который не будет выполняться снова. Один из очевидных путей решения этой проблемы – это вставка элемента script в конец документа, как показано в листинге 7-22.

    Листинг 7-22: Решаем проблему со временем выполнения скрипта, передвигая элемент script в конец документа

    При этом подходе принимается во внимание то, как браузер реагирует на элемент script , и гарантируется, что скрипт не загрузится и не выполнится пока элементы, в которых заинтересован скрипт, не будут обработаны. Как вы можете видеть на рисунке 7-11, вы получите тот результат, который вы ждете от выполнения скрипта.

    Рисунок 7-11: Результат выполнения скрипта, примененный к элементу a

    Такой подход является вполне допустимым, но в HTML5 можно добиться того же эффекта при помощи атрибута defer . Когда браузер встречает элемент script , в котором присутствует атрибут defer , он откладывает загрузку и выполнение скрипта, пока не будут обработаны все элементы в HTML документе. В листинге 7-23 показан элемент script , который использует атрибут defer .

    Листинг 7-23: Использование элемента script с атрибутом defer

    Загрузка этой страницы в браузер приводит к тому же результату, как и перемещение элемента script в конец страницы. Скрипт может найти элемент code и изменить текстовое содержание, что приводит к тому же результату, что вы видели на рисунке 7-11.

    Вы можете использовать атрибут defer только для внешних скриптовых файлов. Это не будет работать для внутренних скриптов.

    Асинхронное выполнение скриптов

    Вы можете решить различные проблемы с помощью атрибута async . Как я упоминал ранее, по умолчанию браузер, когда сталкивается с элементом script , прекращает обрабатывать страницу, в то время как он загружает и выполняет скрипт. Каждый элемент script выполняется синхронно (то есть, ничего не происходит, пока скрипт загружается и выполняется) и по очереди (т.е. в том порядке, в котором они определены).

    Синхронное и последовательное выполнение имеет смысл, поскольку таким способом скрипты обрабатываются по умолчанию, но есть несколько скриптов, для которых это не требуется, и вы можете повысить производительность за счет использования атрибута async . Хорошим примером является отслеживающий скрипт. Эти типы скриптов могут, например, сообщить, какие сайты вы посещаете, чтобы рекламодатели могли составить ваш профиль и найти вас, основываясь на ваших привычках просмотра страниц, или они могут собирать статистику посещений с сайтов аналитики. Такие скрипты являются автономными и не склонны взаимодействовать с элементами в HTML документе. Задержка обработки страницы, пока вы ждете, когда загрузится и даст ответ серверу скрипт такого рода, не имеет вообще никакого смысла.

    При использовании атрибута async браузер загружает и выполняет скрипт асинхронно, в то время как он продолжает обрабатывать другие HTML элементы, в том числе другие элементы script . Если использовать этот атрибут для правильного вида скриптов, вы можете значительно улучшить общую производительность. В листинге 7-24 показано использование атрибута async с элементом script .

    Листинг 7-24: Использование атрибута async

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

    Элемент noscript

    Элемент noscript позволяет отображать контент для пользователей, которые отключили JavaScript или которые используют браузер, не поддерживающий его. В таблице 7-19 описан элемент noscript .

    Таблица 7-19: Элемент noscript

    Элемент noscript
    Тип элемента Метаданные/фразовый/потоковый
    Разрешенные родительские элементы Любой элемент, который может содержать метаданные, фразовые или потоковые элементы
    Локальные атрибуты Нет
    Содержание Фразовые или потоковые элементы
    Стиль тегов Требуются открывающий и закрывающий теги
    Новый в HTML5 Нет
    Изменения в HTML5 Нет
    Соглашение по стилям Нет

    Как и с элементом script , тип элемента noscript зависит от того, где он расположен в документе.

    Несмотря на то, что в наши дни осуществляется широкая поддержка JavaScript, есть еще некоторые специализированные браузеры, которые не поддерживают его. Даже когда браузер применяет JavaScript, пользователь может отключить его; во многих крупных корпорациях работает правило без-JavaScript для работников компании. Элемент noscript позволяет вам работать с этими пользователями, то есть вы можете отобразить для них содержание, для работы с которым не требуется JavaScript, или, по крайней мере, объяснить, что они не могут использовать ваш сайт или страницу, если не включен JavaScript. В листинге 7-25 показано, как используется элемент noscript для отображения простого сообщения.

    Листинг 7-25: Использование элемента noscript

    Вы можете увидеть результат использования элемента noscript на рисунке 7-12. Для достижения этого результата, я отключил поддержку JavaScript в Google Chrome и загрузил HTML из листинга.

    Рисунок 7-12: Результат использования элемента noscript

    Обратите внимание, что оставшаяся часть страницы обрабатывается как обычно, и содержание элементов по-прежнему отображается.

    Вы можете добавить несколько элементов noscript на страницу, так чтобы они соответствовали отдельным функциональным областям, которые требуют наличия скриптов. Этот подход является наиболее полезным для обеспечения резервной разметки, которая не зависит от JavaScript.

    Альтернативный подход состоит в перенаправлении браузера пользователя на другой URL, если он не поддерживает JavaScript. Это можно сделать путем размещения элемента meta внутри элемента noscript , как показано в листинге 7-26.

    Листинг 7-26: Использование элемента noscript для перенаправления браузера пользователя

    Цукерберг рекомендует:  Трансформации CSS3 без псевдо-класса hover
  • Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих