Внутренний vs внешний JavaScript: когда и что использовать?

Быстрый ответ

Встроенный JavaScript великолепно работает для выполнения небольших и точечных задач. Например:

<!-- Полезен для обработки единичного события. Это быстро, но использовать встроенные скрипты чрезмерно не стоит. -->
<button onclick="console.log('Простое действие — и результат очевиден')">Нажми меня</button>

Внешний JavaScript существенно повышает производительность и облегчает структурирование кода в сложных проектах. Например:

<!-- Это что-то вроде Бэтмена среди скриптов: вводит порядок в HTML-Готэм, избавляя от хаоса встроенных скриптов. -->
<script src="batman.js"></script>

Оценка компромиссов

Производительность страницы против времени загрузки

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

Подробнее об этом расскажет наш спикер на видео

Масштабирование и поддержка

С ростом проекта, управление встроенными скриптами становится сложнее. Внешние скрипты легче поддаются долгосрочной поддержке и масштабированию кода.

Преимущества кеширования браузером

Встроенные скрипты невозможно закешировать в браузере. Внешний JavaScript выигрывает в экономии HTTP-запросов и ускорении загрузки страниц, так как после первой загрузки он сохраняется в кеше браузера.

Ситуации, когда лучше использовать встроенные/внешние скрипты

• Инициализация настроек: Для установки начальных конфигурационных параметров, актуальных для конкретной страницы, применение встроенных скриптов более целесообразно.
• Простые обработчики событий: Встроенный код подходит для реализации базовых сценариев, например, для отображения или скрытия элементов и базовой стилизации.
• Загрузка библиотек и фреймворков: Основные библиотеки, такие как jQuery, или фреймворки, например, React.js, следует подключать внешним образом для более эффективного использования кеширования и упорядочивания кода.
• Условная загрузка скриптов: Загрузку скриптов в зависимости от действий или ввода данных пользователем удобнее реализовать с помощью внешних файлов.

Визуализация

Встроенный JS подобен маленькому гаечному ключу (🔧), который решает мелкие проблемы. Внешний JS — это полный набор инструментов (🧰). Выбор зависит от задачи и цели 🛠️✨!

Лучшие практики и рекомендации

Встроенные скрипты

• Простота что надо: Применяйте встроенный JavaScript как первый инструмент для решения простых задач.
• Растим борьбу с дублированием: Ежели вам часто приходится повторять одни и те же встроенные скрипты, пора перенести их во внешние файлы.

Внешние скрипты

• Модульность: Выполняйте код модульно и разделяйте его на отдельные файлы для улучшения упорядоченности.
• Используйте современные инструменты: Используйте инструменты вроде webpack для сжатия скриптов и ускорения загрузки.
• Async и Defer: Атрибуты async и defer в теге <script> помогают управлять порядком загрузки и предотвращают блокировку парсинга DOM.

Доступность

• Дополнять, не заменять: JavaScript должен дополнять HTML, а не вытеснять его, гарантируя доступность сайта всем пользователям.
• Ориентация на пользователя: Удобство клиента должно оставаться приоритетом; убедитесь, что ваши скрипты не разрушают общую интеграцию с сайтом.

Встроенный против внешнего: Практическое применение

Встроенный JavaScript – Минимализм уходит в прошлое?

Использование встроенных скриптов снижается и ограничивается простейшими задачами или сценариями, требующими быстрого прототипирования. С развитием HTTP/2 и улучшенной способностью загрузки многих файлов параллельно, внешние скрипты становятся все популярнее.

Внешний JavaScript – Избранник будущего

Одностраничные Приложения (SPA) и сложные веб-структуры требуют использования внешнего JavaScript. Помимо создания более аккуратных и чистых кодовых баз, благодаря минификации и объединению файлов, он способствует масштабируемости и поддержке проектов.

Полезные материалы

1. Что такое JavaScript? – Изучение веб-разработки | MDN – Основы скриптования, включая встроенные скрипты.
2. Должен ли код JQuery находиться в шапке или в подвале? – Stack Overflow – Обсуждение лучших практик скриптования.
3. HTML script defer Attribute – W3Schools – Пояснение атрибута defer и его влияния на выполнение JavaScript.
4. Лучшие практики для ускорения вашего веб-сайта – Yahoo Developer Network – Различия в производительности встроенного и внешнего JavaScript.
5. Удаление JavaScript, блокирующего отрисовку | PageSpeed Insights | Google для разработчиков – Как минимизировать задержки при загрузке, вызванные JavaScript.
6. WebAIM: Доступный JavaScript – Обзор доступного JavaScript – Рекомендации по созданию доступного JavaScript.