несколько против одного тега сценария - PullRequest
Новая
       11

несколько против одного тега сценария

42 голосов
/ 23 июня 2011

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

Например: 

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

против 

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

Спасибо

Ответы [ 5 ]

41 голосов
/ 23 июня 2011

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

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

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

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

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

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

Некоторые другие соображения, которые следует учитывать:

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

Подробнее:

2 голосов
/ 23 июня 2011

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

У вас может быть столько тегов, сколько вы хотите в документе.

Теги обрабатываются по мере их поступления.

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

2 голосов
/ 23 июня 2011

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

0 голосов
/ 25 мая 2019

Я ИСПОЛЬЗУЮ несколько тегов. Один для слайд-шоу изображений и другой для слайд-шоу текстов, так что я могу разместить оба на одной веб-странице - слайд-шоу изображений и слайд-шоу текстов.

0 голосов
/ 23 июня 2011

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

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

...