Куда лучшее место должно поместить код JQuery (или отделить файл JQuery)? Страницы загрузят быстрее, если я поместил его в нижнюю сноску?
Все скрипты должны быть загружены последними
Почти в каждом случае лучше всего разместить все ссылки на ваш скрипт в конце страницы, непосредственно перед
Если вы не можете этого сделать из-за проблем с шаблонами и т.п., украсьте теги вашего скрипта атрибутом defer, чтобы браузер знал, как загрузить ваши скрипты после загрузки HTML:
<script src="my.js" type="text/javascript" defer="defer"></script>
Краевые случаи
Однако есть некоторые краевые случаи, когда вы можете столкнуться с мерцанием страницы или другими артефактами при загрузке страницы, которые обычно можно решить, просто поместив ссылки на ваш скрипт jQuery в тег без атрибута defer. Эти случаи включают в себя jQuery UI и другие аддоны, такие как jCarousel или Treeview, которые изменяют DOM как часть своей функциональности.
Дальнейшие предостережения
Есть некоторые библиотеки, которые должны быть загружены перед DOM или CSS, такие как полифильмы. Modernizr является одной из таких библиотек, которая должна быть помещена в головной тег.
Стандартная практика - поставить все ваши скрипты внизу страницы, но я использую ASP.NET MVC с несколькими плагинами jQuery, и я обнаружил, что все это работает лучше, если я Поместите мои сценарии JQuery в в разделе главной страницы.
В моем случае есть артефакты, которые происходят, когда страница загружена, если сценарии внизу находятся в нижней части страницы. Я использую плагин JQuery TreeView, и если сценарии не загружаются в начале, дерево будет представлять без необходимых классов CSS, наложенных на него плагином. Таким образом, вы получаете этот смешной беспорядок, когда страница первых нагрузок, за которыми следуют правильный рендеринг дерева. Очень плохо глядя. Установка плагинов JQuery в раздел главной страницы устраняет эту проблему.
Нимбуз обеспечивает очень хорошее объяснение вовлеченного вопроса, но я думаю, что окончательный ответ зависит от вашей страницы: что более важно для пользователя рано - скрипты или изображения?
Есть несколько страниц, которые не имеют смысла без изображений, но имеют только незначительные, несущественные сценарии. В этом случае имеет смысл ставить сценарии внизу, поэтому пользователь может видеть изображения раньше и начать иметь смысл страницы. Другие страницы полагаются на сценарию на работу. В этом случае лучше иметь рабочую страницу без изображений, чем неработающая страница с изображениями, поэтому имеет смысл ставить скрипты на вершине.
Другое, что следует учитывать, это то, что скрипты обычно меньше изображений. Конечно, это обобщение, и вы должны увидеть, относится ли это к вашей странице. Если это делает то, что мне это аргумент для того, чтобы сначала поставить их как правило (то есть. Если нет никаких веских причин для выполнения иначе), потому что они не будут задерживать изображения столько же, сколько изображения задерживают сценарии. Наконец, наверху намного проще иметь скрипт, потому что вам не нужно беспокоиться о том, будут ли они загружены, когда вам нужно их использовать.
Таким образом, в резюме я склонен вкладывать сценарии по умолчанию и считаю, что стоит ли двигать их на дно после завершения страницы. Это оптимизация - и я не хочу делать это преждевременно.
Большая часть кода jQuery выполняет на документе готов, что не происходит до конца страницы в любом случае. Кроме того, рендеринг страницы может быть задержан с помощью анализа / выполнения JavaScript, поэтому лучшая практика поставить все JavaScript внизу страницы.
Как раз перед - лучшее место в Network Developer Yahoo лучшие практики для ускорения вашего веб-сайта Эта ссылка , имеет смысл.
Лучшее, что нужно сделать, это тестировать самостоятельно.
Проблема, вызванная скриптами, заключается в том, что Они блокируют параллельные загрузки. То Спецификация HTTP / 1.1 говорит о том, что Браузеры загружают не более двух Компоненты параллельно на имя хоста. Если вы обслуживаете свои изображения из нескольких имена хостов, вы можете получить более двух Загрузки происходят параллельно. Пока Сценарий загружается, однако, браузер не начнется ни одного другого Загрузки, даже на разных хостов. В некоторых ситуациях это не Легко перемещать сценарии на дно. Если, например, сценарий использует document.write для вставки части Контент страницы, его нельзя переместить ниже на странице. Там также может быть навесные проблемы. Во многих случаях там способы обработать эти ситуации.
Альтернативное предложение, которое часто Приходит - это использовать отложенные скрипты. Атрибут отлога указывает на то, что Сценарий не содержит document.write, и это подсказка к браузеры, которые они могут продолжать рендеринг. К сожалению, Firefox. не поддерживает отложенный атрибут. В Internet Explorer сценарий может быть отложенным, но не так сильно, как желанный. Если скрипт можно отложить, Это также может быть перемещено на дно страница. Это сделает вашу сеть Страницы загружаются быстрее.
Редактировать: Firefox поддерживает атрибут отсрочка с версии 3.6.
Источники: