Лучший способ загрузки внешних файлов JavaScript в ваш HTML-файл ✅

Если вы достаточно давно занимаетесь кодированием на JavaScript, то вы знаете, что существуют различные способы включения сценария в HTML-документ.

К сожалению, в силу возраста JavaScript, существует множество методов включения внешних файлов в веб — многие из них устарели.

Итак, какой же способ предпочтительнее?

Атрибут Defer 💪.

Позвольте представить вам атрибут defer. Он действует в теге HTML <script> и является идеальным решением для большинства сценариев.

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

Это дает три основных преимущества:

  • страница загружается быстрее ⚡
  • лучшая семантика по сравнению с размещением <script> в конце <body>
  • самое главное — предотвращение ошибок ❗.

О каких ошибках я говорю?

О тех, когда элементы не могут быть найдены (или являются null).

Мы все делали это раньше — пытались выбрать элемент HTML до того, как документ был разобран, что приводило к сообщениям об ошибках типа «невозможно получить доступ к X из null«.

Раньше для решения этой проблемы использовалось событие onload или, еще лучше, событие DOMContentLoaded. Теперь у нас есть атрибут defer.

Вот пример его использования:

<!DOCTYPE html>
<html>
    <head>
        <title>Website Title</title>
        <script src="js/main.js" defer></script>
    </head>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима
// src/main.js

// Only executes once the DOM has been parsed - no errors! 😏
const myInput = document.getElementById("myInput");
Войти в полноэкранный режим Выход из полноэкранного режима

Надеюсь, атрибут defer послужит вам на пользу 💪.

Запишитесь сейчас 👉 JavaScript DOM Crash Course

Вы можете найти полный курс по JavaScript DOM, в котором рассматриваются некоторые из тем, затронутых в этом посте, по ссылке ниже 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Приятного просмотра!

Оцените статью
devanswers.ru
Добавить комментарий