Переместить jQuery в конец тега body? - PullRequest
Новая
       25

Переместить jQuery в конец тега body?

9 голосов
/ 03 августа 2009

Мой друг прочитал статью, в которой упоминалось, что перемещение всех файлов JavaScript в конец закрывающего тега body (</body>) улучшит производительность веб-страницы.

Я переместил все файлы JS в конец, кроме файлов JQuery и JS, которые прикрепляют событие к элементу на странице, как показано ниже; 

$(document).ready(function(){
    //submit data
    $("#create_video").click(function(){ //... });
});

но он говорит, чтобы переместить файл библиотеки jQuery в конец тега body.

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

Можно ли переместить файл библиотеки JQuery в конец страницы прямо перед закрытием тега body (</body>) ??

Спасибо

Ответы [ 7 ]

24 голосов
/ 03 августа 2009

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

Для ваших пользователей это означает, что они увидят пустой экран. Гораздо лучше, чтобы они увидели полную (ish) страницу, так как тогда она не выглядит застопорившейся.

16 голосов
/ 03 августа 2009

Функция $(document).ready говорит, что не следует запускать, пока не завершится создание экземпляра DOM - поэтому переместите его в следующий раз, когда тело в порядке, пока сначала загружается библиотека JQuery. Нетрадиционные и некоторые предположения могут больше не быть правильными, но все в порядке.

13 голосов
/ 03 августа 2009

Просто учтите, что файл jQuery JavaScript должен быть загружен до любого вызова функции $(...).

12 голосов
/ 21 февраля 2014

Используйте «Dom Ready Queue» для сбора функций, которые будут выполняться после загрузки jQuery и готовности DOM.

Пример: 

<html>
  <head>
    <script type="text/javascript">
      var domReadyQueue = [];
    </script>
  </head>
  <body>
  ...
  <div class="foo"></div>
  <script type="text/javascript">
    domReadyQueue.push(function($){
      $('.foo').doSomething();
    })
  </script>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript">
    jQuery(function(){
      while (domReadyQueue.length) {
        domReadyQueue.shift()(jQuery);
      }
    });
  </script>
  </body>
</html>
3 голосов
/ 03 августа 2009

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

Это связано с тем, что HTTP 1.1 рекомендует загружать только 2 элемента на одно имя хоста. И вы определенно хотели бы, чтобы ваш файл css был одним из первых загруженных файлов, а не javascript, который мог бы заставить сайт казаться медленнее (просто потому, что браузер еще не получил файл css и не уверен что он должен делать с HTML)

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

В качестве альтернативы, вы можете настроить второе имя хоста для размещения статического контента (например, css / scripts / images).

Но Google уже проделал тяжелую работу за вас, поэтому имеет смысл использовать его, если это подходит. : -)

3 голосов
/ 03 августа 2009

В - Почему я часто вижу JavaScript написано / включено до закрытия элемент body в (x) HTML-документе?

A - элементы DOM недоступны JavaScript, пока браузер не загрузил элементы HTML в DOM. Размещая JavaScript в конце (x) HTML-документ (до закрытия элемент тела), вы убедитесь, что скрипт вызывается, как только DOM построен / загружен и готов для манипуляции. Преимущество этого подход заключается в том, что код JavaScript выполняется сразу после того, как DOM построен и, возможно, до Событие onload сработает.

JavaScript начинающих споткнуться это постоянно размещая код, который манипулирует DOM в заголовке элемент (x) HTML-документа. это вызывает ошибку, потому что DOM имеет еще не был построен и, таким образом, еще не доступен для JavaScript, который проходит / манипулирует DOM.

С Методы выполнения JavaScript и загрузки в веб-браузерах

2 голосов
/ 03 августа 2009

Используйте ненавязчивый javascript (добавление слушателей событий к элементам вместо onclik = "..." и т. Д.). Поместите все ваши файлы .js внизу тега body, в первую очередь разместив основную библиотеку (в данном случае jQuery), и все будет хорошо. Вы можете использовать такой пакет, как bundle fu

Вы увидите значительное повышение производительности при загрузке вашей страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...