несколько или одиночные теги скрипта

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

Например:

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

против:

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

Спасибо


javascript html script-tag
person Assaf Shemesh    schedule 23.06.2011    source источник

Ответы (5)


arrow_upward
46
arrow_downward

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

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

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

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

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

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

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

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

Более:

person T.J. Crowder    schedule 23.06.2011
comment
Хорошая идея. Кроме того, если возникает проблема с выяснением того, где что находится в вашем коде, всегда возвращайтесь назад и пишите в надлежащей документации в виде комментариев, чтобы вы знали, что делает ваш код, особенно когда вы вернитесь к коду через несколько месяцев после того, как не работали с ним. - person OzzyTheGiant; 27.10.2015

arrow_upward
2
arrow_downward

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

person Babiker    schedule 23.06.2011

arrow_upward
2
arrow_downward

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

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

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

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

person Community    schedule 23.06.2011

arrow_upward
0
arrow_downward

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

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

person Till    schedule 23.06.2011

arrow_upward
-1
arrow_downward

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

person Edwin H Oudit    schedule 25.05.2019
comment
Пожалуйста, рассмотрите возможность предоставления более подробной информации - person Abdulrahman Falyoun; 25.05.2019
comment
Это не отвечает на вопрос, который касается производительности. Это также не предлагает никакого обоснования вашей позиции. - person isherwood; 07.11.2019