Подтвердить что ты не робот

JavaScript - голова, тело или jQuery?

Этот вопрос - это просто очистить некоторые вещи. Некоторые вещи, подобные этому, были заданы раньше, и это сводит их все к одному вопросу: где должен идти JavaScript в документе HTML или, что более важно, имеет ли это значение? Итак, одна из вещей, о которых я прошу, делает

<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>

вообще отличаются (с точки зрения функциональности) от

<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>

Что еще более важно, я хочу сосредоточиться на JS, который каким-либо образом изменяет или использует элементы из DOM. Поэтому я знаю, что если вы помещаете что-то вроде document.getElementById("test").innerHTML = "Hello world!" до <element id="test"></element> в свое тело, то оно не будет работать, поскольку тело загружается сверху вниз, сначала загружая загрузку JS, а затем пытается манипулировать элемент, который еще не существует. Поэтому он должен, как и выше, либо перейти в <head>, либо непосредственно перед тегом </body>. Вопрос в том, что, помимо организации и сортировки, имеет значение, какой из них выбран, и если да, то каким образом?

Конечно, есть и третий метод - путь jQuery:

$(document).ready(function(){ /*Code goes here*/ });

Таким образом, не имеет значения, где в теле вы размещаете код, поскольку он будет выполняться только при загрузке. Вопрос здесь в том, стоит ли импортировать огромную библиотеку JS только для использования метода, который может быть заменен точным размещением ваших скриптов? Я просто хотел бы немного разобраться здесь, если вы хотите ответить, вперед! Резюме: где должны быть разные типы скриптов - голова или тело, и/или это имеет значение? Действительно ли jQuery стоит только для готового события?

4b9b3361

Ответ 1

Наиболее рекомендуемый метод - поставить его перед тегом </body>. Статья об эффективности Yahoo также предполагает, что кроме YSlow и Страница Speed ​​ добавляет Yahoo и Google соответственно.

Цитата из статьи Yahoo, связанной выше:

Проблема, вызванная скриптами, заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP/1.1 предполагает, что браузеры больше не скачивают чем два компонента параллельно для имени хоста. Если вы обслуживаете свои изображения из нескольких имен хостов вы можете получить более двух загрузок в параллели. Однако при загрузке script браузер не будет запускать любые другие загрузки даже на разных именах хостов.

Когда вы помещаете скрипты в тег <head>, браузеры идут на них, тем самым удерживая другие вещи на удержании, пока не загрузятся скрипты, которые пользователи будут воспринимать как медленную загрузку страницы. Вот почему вы должны положить скрипты внизу.

Что касается:

$(document).ready(function(){/*Code goes here*/});

Он запускается, когда DOM доступен и готов к манипулированию. Если вы поместите свой код в конец, вам это не обязательно понадобится, но обычно это необходимо, потому что вы хотите что-то сделать, как только DOM будет доступен для использования.

Ответ 2

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

Обычно рекомендуется помещать теги script в самый конец тега body, например, непосредственно перед </body>. Таким образом, все элементы DOM над script будут доступны (см. Ссылки ниже). Одно из предостережений заключается в том, что может быть краткий момент, когда ваша страница была хотя бы частично обработана, но ваши сценарии не обрабатывались (пока), и если пользователь начинает взаимодействовать со страницей, они могут сделать что-то, чтобы поднять событие, которое ваш script еще не успел подключиться. Поэтому вам нужно знать об этом. Это одна из причин прогрессивного улучшения, которая заключается в том, что страница будет работать без JavaScript, но лучше работать с ней. Если вы делаете страницу/приложение, которое просто не будет работать без JavaScript вообще, вы можете включить некоторые встроенные script в верхней части тега body (например, <script>minimal code here</script>), которые перехватывают любые события пузырьков на document.body и либо ставит их в очередь для действий при загрузке script, либо просто просит пользователя ждать.

Использование таких функций, как jQuery ready, прекрасно, но не обязательно необходимо за пределами библиотек (например, если вы контролируете, где будут теги script, вам обычно не нужно его использовать; если вы пишете подключаемый модуль jQuery, который должен что-то делать при загрузке [что относительно редко, обычно они просто ждут вызова), вы обычно делаете).

Дополнительная информация:

Ответ 3

Можно параллельно загрузить javascripts, выполнив что-то вроде этого:

(function () {
    var ele = document.createElement('script');
    ele.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
    ele.id = "JQuery";
    ele.onload = function () {
        //code to be executed when the document has been loaded
    };
    document.getElementsByTagName('head')[0].appendChild(ele);
})();

В примере он загружает мини-JQuery v1.7.2 из Google, это хороший способ загрузить JQuery, так как загрузка его из Google похожа на использование CDN, и если пользователь был на странице, которая использовала тот же файл, он мог бы быть кешированным, и поэтому его не нужно загружать

Об этом здесь есть действительно хороший технический совет Google http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp