Я пытаюсь оптимизировать время загрузки сайта с большим количеством спагетти JS. Некоторые из них выглядят так:
<script>var x="foo";</script>
<script>var y="bar";</script>
Вместо кода системного программиста:
<script>
var x="foo";
var y="bar";
</script>
Итак, мне было интересно, действительно ли это на самом деле наносит вред? Помимо эстетики, объединение сценариев в один тэг script принесет пользу времени загрузки?
Когда браузер обнаруживает элемент script во время разбора HTML-страницы страницы, происходит следующее:
script в HTML.Таким образом, наличие нескольких элементов script замедляет рендеринг страницы. Чем меньше элементов script присутствует в HTML, тем быстрее будет отображаться страница.
Если ваш документ содержит скрипты с помощью src attrbute (например, <script src="http://example.com/myscript.js">), вы можете использовать атрибут async для задержки script обработка. Это функция, поддерживаемая в новых браузерах (например, Firefox 3.6 и браузеры на основе Webkit, выпущенные с сентября 2010 года). Но встроенные скрипты по-прежнему будут блокировать разбор, пока они не будут интерпретированы.
Поскольку загружается больше байтов, первый пример медленнее.
Однако я уверен, что вы никогда не сможете отличить незначительную микро-оптимизацию последнего примера и прежнего примера. Помимо организации, нет причин беспокоиться.
Тем не менее, ради организации, я определенно буду беспокоиться! Сохранение организованного кода ускорит время разработки. Сохранение всего вашего JavaScript в одном месте будет препятствовать запуску поиска фрагмента.
Я бы попытался перенести столько кода сначала во внешний файл и все остальное в подставку вашего документа.
<script> в нижний колонтитул страницы. Это создаст иллюзию более быстрой загрузки.Кстати, (и так же тривиально) наиболее оптимизированная версия вашего script (помимо использования внешнего файла) будет:
<script>
var x='foo', y='bar';
</script>
Существует разница между временем перцептивного загрузки и фактическим временем загрузки.
Первое является самым важным для конечного пользователя. Некоторые сайты никогда не загружаются полностью, потому что у них есть реклама, которая всегда продолжает обновлять и загружать новый контент - поэтому вы видите, что строка состояния все еще работает, даже если она похожа на завершение страницы.
Ваш вопрос кажется теоретическим, поэтому я попытаюсь теоретически ответить.
Если ваш первый случай может быть быстрее
Оптимальное время загрузки зависит от того, что делают два сценария и что требует ваш сайт. Если ваш сайт ориентирован на JS, то это означает, что макет, стиль и элементы HTML создаются/контролируются в основном JavaScript, тогда первый способ может быть быстрее. Вы хотите сделать все визуальные обработки и создания элементов в первом script. На самом деле, у вас может быть пустая HTML-страница и сайт, созданный исключительно JS (крайне неудобный), но возможно. Это почти никогда не бывает, но в этом случае все визуальные элементы и элементы должны быть размещены там. Второй script должен включать в себя весь другой код, который пользователь не заметил бы в течение секунды (анимация слайд-шоу, зависание, методы нажатия).
Не цитируйте меня на этом, но я думаю, это потому, что каждый script (в голове HTML) интерпретируется после его загрузки, прерывая необходимые и ненужные сценарии, может ускорить некоторую предварительную обработку.
Скорость сети/Интерпретация | Второй случай для большинства
Большинство сайтов не зависят от JavaScript, поэтому второй случай - это общий способ сделать что-то. Существуют причины размера/кэширования для взлома пользовательского кода, но для нестандартного кода, такого как различные фреймворки, есть причина, по которой не существует объединенной структуры jQuery/Prototype для людей, которые используют оба. Есть также некоторые ситуации, когда размещение встроенного кода (в теле) может быть более полезным.
В большинстве случаев предпочтительным является второй метод или метод, аналогичный тому, что перечислено в списке Стивена. Это происходит только потому, что вы уменьшаете служебные данные байта, которые передаются по сети; Кроме того, вы минимизируете количество символов, которые браузер должен переводить. Истинный переоптимизированный метод был бы <script type="text/javascript">x='foo',y='bar';</script> (нет var).
При вводе больше вещей (js в вашем случае) на странице увеличивается размер страницы, что окончательно замедляет производительность.
Вы должны комбинировать свой код в одном теге <script>, а также в файле js.
Вы можете использовать "Скорость Google" (аддон Firebug), который предложит вам о том, как вы можете улучшить производительность своего сайта:)
На самом деле лучше сделать это вторым способом, который у вас есть. Это упрощает ведение и чтение кода в этой форме. Другой способ - использовать внешние скрипты.
Причина, по которой вы иногда видите это в первую очередь, состоит в том, что сайт включает разные файлы в разное время.
вам следует попробовать использовать этот классный инструмент cuzillion. Это поможет вам найти мелкозернистые тонкие эффекты скорости, подобные тем, о которых вы упоминаете.
В вашем случае кажется, что существует очень маленький, но уже существующий эффект открытия нескольких раз тега.