Много ли встроенных JS-скриптов замедляют время загрузки страницы?

Я пытаюсь оптимизировать время загрузки сайта с большим количеством спагетти JS. Некоторые из них выглядят так:

<script>var x="foo";</script>
<script>var y="bar";</script>

Вместо кода системного программиста:

<script>
    var x="foo";
    var y="bar";
</script>

Итак, мне было интересно, действительно ли это на самом деле наносит вред? Помимо эстетики, объединение сценариев в один тэг script принесет пользу времени загрузки?

Ответы

Ответ 1

Когда браузер обнаруживает элемент script во время разбора HTML-страницы страницы, происходит следующее:

  • Браузер приостанавливает обработку HTML.
  • Браузер инициирует экземпляр своего интерпретатора JavaScript.
  • интерпретатор JavaScript компилирует JavaScript и добавляет его в глобальный пул JavaScript в текущей странице.
  • Браузер продолжает разбор HTML, повторяя 2. и 3. столько раз, сколько есть элементов script в HTML.

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

Если ваш документ содержит скрипты с помощью src attrbute (например, <script src="http://example.com/myscript.js">), вы можете использовать атрибут async для задержки script обработка. Это функция, поддерживаемая в новых браузерах (например, Firefox 3.6 и браузеры на основе Webkit, выпущенные с сентября 2010 года). Но встроенные скрипты по-прежнему будут блокировать разбор, пока они не будут интерпретированы.

Ответ 2

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

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

Тем не менее, ради организации, я определенно буду беспокоиться! Сохранение организованного кода ускорит время разработки. Сохранение всего вашего JavaScript в одном месте будет препятствовать запуску поиска фрагмента.

Я бы попытался перенести столько кода сначала во внешний файл и все остальное в подставку вашего документа.

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

Кстати, (и так же тривиально) наиболее оптимизированная версия вашего script (помимо использования внешнего файла) будет:

<script>
    var x='foo', y='bar';
</script>

Ответ 3

Существует разница между временем перцептивного загрузки и фактическим временем загрузки.

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

Ваш вопрос кажется теоретическим, поэтому я попытаюсь теоретически ответить.

  • Если ваш первый случай может быть быстрее

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

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

  • Скорость сети/Интерпретация | Второй случай для большинства

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

    В большинстве случаев предпочтительным является второй метод или метод, аналогичный тому, что перечислено в списке Стивена. Это происходит только потому, что вы уменьшаете служебные данные байта, которые передаются по сети; Кроме того, вы минимизируете количество символов, которые браузер должен переводить. Истинный переоптимизированный метод был бы <script type="text/javascript">x='foo',y='bar';</script> (нет var).

Ответ 4

При вводе больше вещей (js в вашем случае) на странице увеличивается размер страницы, что окончательно замедляет производительность.

Вы должны комбинировать свой код в одном теге <script>, а также в файле js.

Вы можете использовать "Скорость Google" (аддон Firebug), который предложит вам о том, как вы можете улучшить производительность своего сайта:)

Ответ 5

На самом деле лучше сделать это вторым способом, который у вас есть. Это упрощает ведение и чтение кода в этой форме. Другой способ - использовать внешние скрипты.

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

Ответ 6

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

В вашем случае кажется, что существует очень маленький, но уже существующий эффект открытия нескольких раз тега.