Где лучше всего поместить JavaScript / Ajax в документ? - PullRequest
Новая
       1

Где лучше всего поместить JavaScript / Ajax в документ?

1 голос
/ 06 октября 2011

Извиняюсь за тупой вопрос, но мне нужны эксперты, чтобы уточнить.

Из трех мест для размещения Javascript, head, $(document).ready или body, где было бы лучше всего поместить ajax, который использует множество $GET функций?

Например, я использую функцию JavaScript под названием execute_send(), но я не уверен, где будет лучше всего ее разместить. Ниже приведена ошибка:

Problem at line 67 character 22: 'execute_send' was used before it was defined. function execute_send() {

Также как размещение влияет на время загрузки страницы?

Ответы [ 4 ]

9 голосов
/ 06 октября 2011

В общем, если по какой-то причине вам это не нужно в другом месте, поместите все свои JS последними в тело.Браузер не будет работать до тех пор, пока он не проанализирует ваш JS, поэтому желательно сначала разрешить загрузку страницы.См. http://developer.yahoo.com/performance/rules.html

В качестве примера того, когда вы, возможно, захотите поместить JS в голову: у вас может быть некоторый код A / B-тестирования, который вы хотите запустить до того, как страница даже отрендерится - в этом случае,код должен идти в голову, потому что вы действительно хотите, чтобы он запускался как можно скорее.

4 голосов
/ 06 октября 2011

Как сказал @Том Блейк, в общем, лучшее место - внизу <body> (+1 за это) - но я немного остановлюсь на этом:

Причина этого заключается в том, что браузер загружает страницу и должен прекратить загрузку и проанализировать JavaScript при его обнаружении. Так что, если у вас есть все ваши сценарии, например, в <head>, будет задержка загрузки всего содержимого в <body>

Обратите внимание, что это задержка загрузки - отдельно от фактического выполнения скрипта. Нечто подобное $(document).ready() имеет дело с тем, когда выполняется скрипт, а не с тем, когда он загружается.

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

  1. Поместите все свои сценарии внизу <body>, чтобы загрузка не-JS-ресурсов, таких как изображения, не задерживалась.

  2. Объедините ваши скрипты в один файл, так что серверу придется делать меньше запросов на ресурсы (вы увидите, что это называется «минимизация HTTP-запросов»)

  3. Сократите свои скрипты, чтобы уменьшить их общий размер, что ускоряет время загрузки

  4. Поместите любой код, зависящий от DOM (например, обработчики кликов, манипулирование HTML и т. Д.) Внутри $(document).ready() (или эквивалентный метод для библиотеки JS, используемой на странице).

1 голос
/ 30 октября 2012

Та же тема: что за плюсы и минусы: положить javascript в голову и положить прямо перед телом

В прошлом у меня возникали некоторые проблемы с jquery, если при инициализации он не был 'загрузчиком', поэтому мы решили вставить его в <head>.

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

Для остальных javascripts, все до закрывающего тега </body>.

Чтобы объяснить, почему страница будет загружаться быстрее: это не так.

Браузеры являются однопоточными, поэтому понятно, что во время выполнения скрипта браузер не может начать другие загрузки. Но нет причин, по которым при загрузке скрипта браузер не может начать загрузку других ресурсов. Именно это и сделали новые браузеры, в том числе Internet Explorer 8, Safari 4 и Chrome 2.

Разница видна, если ваши ресурсы в теге <body> будут загружаться / показываться последовательно. Когда браузер загружает <script src=...js>, весь файл должен быть загружен, прежде чем браузер сможет получить другой ресурс. Так что это иллюзия, потому что браузер будет загружать / выводить больше «видимого» контента перед «javascripts».

Чтобы визуализировать все это: firebug> Net (вкладка)

0 голосов
/ 06 октября 2011

Как уже говорилось, $(document).ready - это не место. (Для jQuery $(document).ready просто гарантирует, что DOM полностью загружен (готов к работе) перед выполнением любого скрипта.) Вы должны поместить свой JavaScript в <head> или <body>.

Однако размещение всех ваших JavaScript-скриптов и скриптов JavaScripts в нижней части раздела <body> - это best для загрузки производительности. «Прогрессивный рендеринг» и «Параллельная загрузка» заблокированы для всего ниже сценариев. Если ваши сценарии являются последними на странице, вы ничего не блокируете.

Эта статья объясняет это более подробно.

Пример: 

<html>
      <head>
        <!-- MY HEAD CONTENT - LOAD ALL CSS -->
      </head>

      <body>

        <!-- MY HTML CODE -->

            <!-- START javascript -->
            <script type="text/javascript" src="/ajax/jquery/jquery-1.6.2.min.js"></script>
            <script type="text/javascript" src="/ajax/jquery/plugins/jquery.random_plugin.js"></script>
            <script type="text/javascript" src="/includes/some_other_scripts.js"></script>
            <script type="text/javascript" language="JavaScript">
            //<![CDATA[
                $(document).ready(function(){
                    // my jQuery/JavaScript code
                });
            //]]>
            </script><!-- END javascript -->
      </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...