Подтвердить что ты не робот

Множественные и одиночные теги script

Есть ли разница (производительность, лучшие практики и т.д.) между использованием одного тега script со встроенным кодом в нем или использованием нескольких тегов script с тем же кодом, распространенным по всему HTML?

Например:

<script>
    foo();
</script>
...
<script>
    bar();
</script>

против

<script>
    foo();
    bar();
</script>

Спасибо

4b9b3361

ОТВЕТЫ

Ответ 1

С встроенным script как то, что вы цитировали, вряд ли будет большая разница; однако каждый раз, когда парсер HTML-браузера встречает тег script, он:

  • Приходит к визгу
  • Создает строку текста в теге до тех пор, пока не увидит строку "</script>"
  • Отправляет текст, переводящий текст в интерпретатор JavaScript, при прослушивании вывода интерпретатор отправляет его, когда вы выполняете document.write
  • Ожидает завершения интерпретатора
  • Вставляет накопленный результат, полученный в поток синтаксического анализа.
  • Продолжает синтаксический анализ

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

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

Итак, суммируйте их так, как вы разумно можете. Если вы не можете разумно объединить пару, не беспокойтесь об этом слишком много до тех пор, пока не увидите реальную проблему.

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

Некоторые другие вещи, которые следует учитывать:

  • Наличие большого количества тегов script, разбросанных по всему HTML, может затруднить обслуживание на script
  • Разделение вашего HTML и script на отдельные файлы помогает ограничить степень, с которой они связаны, а также помощь в обслуживании
  • Ввод script в отдельный файл позволяет запускать этот файл через minifiers/компрессоры/упаковщики, сводя к минимуму размер вашего кода и удаляя комментарии, оставляя вас свободно комментировать исходный код, зная эти комментарии будет закрыт.
  • Помещение ваших скриптов во внешние файлы дает вам возможность разделить вещи по функциональности, а затем объединить их в один файл для страницы (сжатый/минированный/упакованный) для эффективной доставки в браузер

Подробнее:

Ответ 3

До этого момента весь код JavaScript был в одном теге, это не обязательно.

В документе может быть столько меток, сколько хотелось бы в документе.

Теги обрабатываются так, как они встречаются.

Надеюсь, что это поможет.

Ответ 4

Некоторые утверждают, что наилучшей практикой является объединение всех сценариев в одном блоке script или в одном файле script, загрузка только необходимого javascript и загрузка его как можно позже, чтобы не замедлить рендеринг html.

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

Ответ 5

Я использую несколько тегов. Один для слайд-шоу изображений, а другой для слайд-шоу текстов, так что я могу разместить оба на одной веб-странице - слайд-шоу изображений и слайд-шоу текстов.