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

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

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

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

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

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

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

спасибо

9
javascript jquery xhtml

7 ответов

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

16

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

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

24

просто учтите, что файл jQuery JavaScript должен быть загружен до любой вызова .

13

используйте "очередь готовности Dom" для сбора функций, которые будут выполняться после загрузки 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>
11

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

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

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

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

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

3

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

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

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

от JavaScript выполнение и методы Onload в веб-браузерах

3

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

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

2