7 обязательных атрибутов
Здравствуйте, мои коллеги веб-разработчики!
Все мы ежедневно в значительной степени используем элементы ‹script› в веб-разработке. Даже я использую его в течение многих лет теперь.
Когда дело доходит до включения кода JavaScript в HTML-страницу, тег ‹script› — единственный способ сделать это. И каждый фронтенд-разработчик использует это. Но что меня шокировало, так это скрытые или малоизвестные возможности тега ‹script›, которые ни один тренер нигде не объясняет. Но они очень полезны, когда дело доходит до конкретных случаев использования HTML и рендеринга javascript.
За более чем 6 лет карьеры веб-разработчика я узнал то же самое, что и каждый студент понимает, когда дело доходит до изучения HTML или JavaScript. Но несколько лет назад, исследуя проблему, я узнал весь потенциал тега ‹script›.
Пару лет назад однажды я писал код поздно ночью, чтобы уложиться в срок. Я столкнулся с очень интересной проблемой, когда понял, что один из моих файлов JavaScript был очень тяжелым для загрузки на главной странице веб-сайта. И это снижало скорость загрузки страницы.
Я много исследовал и пришел к выводу, что теги ‹script› обладают некоторыми сверхспособностями, которые браузеры полностью понимают.
Поэтому, чтобы помочь веб-разработчикам, я пишу подробную статью о теге ‹script›, который кажется очень маленьким, но имеет множество вариантов использования, когда дело доходит до интерфейсных веб-страниц.
Итак, ниже приведены вопросы и сомнения, которые всегда возникали у меня, как у фронтенд-разработчика, в первые дни моей жизни. Каждый Front-End разработчик может иметь отношение к одному и тому же. Просто прочитайте эту статью до последней строки, чтобы дать волю своим сомнительным запросам и узнать все подробности о теге ‹script›.
Syntax <script> // JS code to be executed </script>
Сколько тегов ‹script› можно разместить на одной странице?
Вы можете разместить любое количество скриптов на одной HTML-странице. Скрипт можно поместить внутри тегов ‹body› и ‹head› в HTML.
Какой из них лучше подходит для размещения ‹script› — ‹body› или ‹head›?
Всегда лучше размещать ‹script› непосредственно перед закрывающим тегом body (например, ‹/body›), а не разделом ‹head›.
HTML-страницы загружаются в веб-браузере сверху вниз. Итак, если мы поместим наш ‹скрипт› в ‹head›, то потребуется время, чтобы загрузить страницу, и HTML-элемент не появится на экране, пока ‹script› не загрузится полностью. Это не очень хороший пользовательский опыт, поскольку заставляет пользователя ждать без необходимости. Если скрипт будет наконец, то теги HTML будут легко отображаться и не будут заблокированы «скриптом».
Кроме того, если в скрипте будет ошибка, то пользователь не получит ошибку во время рендеринга других элементов.
Стандартный код скрипта внутри HTML
Атрибуты тега ‹script›
1. источник
Используя атрибут src, вы можете встроить внешний файл javascript. Значение атрибута src должно быть типа URL. Расширение внешнего файла должно быть в формате js.
<script src=”my-js-code.js”></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
2. тип
Атрибут type указывает значение типа скрипта. Он указывает тип носителя файла сценария (тип MIME).
Вот список типов, которые используются в качестве значения атрибута типа:
- текст/JavaScript
- приложение/ecmascript
- приложение/JavaScript
- текст/vbscript
Пример:
<script src=”my-js-code.js” type=”text/JavaScript”></script>
С помощью атрибута type браузер определяет тип файла, для которого будет выполняться сценарий. Однако в HTML5 тип больше не требуется.
3. Асинхронный
Это логический атрибут, который можно использовать только для внешних скриптов.
В общем, скрипт скачивается и выполняется сразу. Таким образом, он блокирует синтаксический анализ до тех пор, пока скрипт не будет полностью выполнен.
Но если в теге script присутствует «async», то скрипт загружается параллельно при разборе веб-страницы и выполняется, как только он становится доступным.
Пример:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" async></script>
Преимущества асинхронного режима:
- Скрипты с асинхронностью сразу отображают содержимое страницы — асинхронность не блокирует его.
- Другие скрипты не ждут асинхронных скриптов, а асинхронные скрипты их не ждут.
4. Отложить
Как и async, defer загружает скрипт параллельно при анализе страницы, но, в отличие от async, он выполняет загруженный скрипт после завершения анализа страницы. Этот атрибут в основном предназначен только для внешних скриптов.
Пример:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" defer></script>
Преимущества отсрочки:
- Скрипты с defer никогда не блокируют страницу.
- Скрипты с defer всегда выполняют скрипт, когда DOM готов, чтобы избежать ошибок или конфликтов.
На практике defer используется для скриптов, которым необходимо сначала выполнить весь DOM. А асинхронность используется для независимых скриптов, таких как счетчики или реклама. И их относительный порядок выполнения не имеет значения.
5. перекрестное происхождение
Браузеры не поддерживают ресурсы, загруженные из источника, отличного от текущей страницы, и выдают ошибки HTTP CORS. Используя атрибут перекрестного происхождения, мы можем запросить ресурс из другого домена.
corssorigin инструктирует браузер проверять заголовки Access-Control и выполнять обычный доступ CORS.
Пример:
<script crossorigin="anonymous|use-credentials" src=”https://code.jquery.com/jquery-3.3.1.min.js”>
- anonymous – выполняется запрос из разных источников. Учетные данные не отправляются
- use-credentials – выполняется запрос из разных источников. Отправляются учетные данные (например, файл cookie, сертификат, базовая аутентификация HTTP)
6. честность
Этот атрибут позволяет браузеру проверять извлеченный скрипт, чтобы убедиться, что код никогда не будет загружен, если исходный код был изменен.
Он использует хеш-значение, которое должен содержать файл скрипта. Браузер загружает файл, затем проверяет его, чтобы убедиться, что он совпадает с хешем в атрибуте целостности. Если он совпадает успешно, то используется только файл, в противном случае файл блокируется.
Пример:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script>
7. номодуль
Этот атрибут указывает, что сценарий не должен выполняться в браузерах, поддерживающих модульные сценарии.
Пример:
<script type="module" src="my-js.js"></script> <script nomodule src="js-bundle.js"></script>
В современных пользовательских агентах, поддерживающих модульные сценарии, элемент сценария с атрибутом nomodule будет игнорироваться, а элемент сценария с типом «модуль» будет выбран и оценен.
Надеюсь, вы читаете эту статью до этой строки. Я чертовски уверен, что вы можете относиться ко всем вышеперечисленным сомнениям, а также нашли полезные атрибуты с тегом ‹script›.
Я надеюсь, что это повысит ценность вашего обучения, и теперь вы лучше понимаете возможности и потенциал «сценария». Если да, пожалуйста, ставьте лайки, комментируйте и делитесь знаниями со своими коллегами, чтобы распространять знания…
Спасибо… :)
