Это практически хорошо, чтобы поместить файлы JS внизу веб-страницы? - PullRequest
7 голосов
/ 22 марта 2012

Широко рекомендуется размещать JS-файлы внизу страницы, чтобы сначала можно было загружать html-коды. В этом случае посетители увидят что-то, ожидая полной загрузки страницы. Однако я считаю, что это невыгодно по следующим причинам:

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

  2. Если прервать соединение во время загрузки (не загружая JS вообще), посетители пропустят некоторые функции веб-сайта (вероятно, очень важные); и они не поймут, что это проблема загрузки (для повторной загрузки страницы).

  3. Если серверный скрипт die (из-за ошибки) в самом конце скрипта до нижнего колонтитула (например, в PHP), посетители пропустят всю функциональность страницы (JS); но если загружать JS сверху, они пропустят только нижний колонтитул или половину страницы.

  4. Если сначала загружается JS, браузер будет загружать другие вещи (например, изображения) параллельно; но если загрузка JS продолжается, это может увеличить время загрузки. Поскольку файлы JS имеют большой размер (например, JQuery и JQuery UI), и загружены все мелкие элементы (например, изображения), и мы загружаем большой файл, последний в строке.

ОБНОВЛЕНИЕ: 5. Поскольку библиотека jQuery должна быть загружена перед кодами; если вы загружаете библиотеку jQuery в нижний колонтитул (например, footer.php), вы не можете добавлять пользовательские коды jquery для разных страниц (в теле).

Пожалуйста, поправьте меня, если я ошибаюсь! Выгодно ли помещать файлы JS в нижний колонтитул?

Ответы [ 7 ]

4 голосов
/ 22 марта 2012

Редактировать: я добавляю еще один пункт в ответ на хлопок, который я вижу в ушах людей на эту тему.

Дополнительный пункт # 5.Если вы серьезно обеспокоены поведением при сбое JS и под этим я подразумеваю, что люди, просматривающие с помощью JS выключенные, вам следует принять понятие прогрессивного улучшения.Например, вы можете создать аккордеонное меню, которое будет по умолчанию отображать всплывающее меню, да только с CSS, и затем удалить это поведение, изменив классы клавиш, когда JS включен.Таким образом, пользователи получают доступ к ссылкам без JS, если им нужно отключить их, но они получают улучшенное поведение во время работы JS.

Но что вы не должны пытаться обрабатывать, так это отсутствие целых файлов JS настраницы, которые должны иметь их, потому что страница была искажена на сервере.Обработка неожиданного - это одна вещь, но обработка сбоя при завершении построения HTML-файла перед его обработкой никогда не должна рассматриваться как приемлемый сценарий в производственном процессе, особенно если у вас есть реальный внутренний код на языке шаблонов (чего не следует делать)в ожидании, чтобы выплеснуть и дать потенциальным хакерам что-то потенциально интересное для взгляда.Неработающие страницы должны служить сообщениями об ошибках.

===============================

  1. Чрезвычайно неправильно.Каждый раз, когда вы используете JS для настройки исходного статического вида вашей страницы, вы делаете это неправильно.Следите за тем, чтобы разделение интересов и ваши страницы были гораздо более гибкими.Использование JS для настройки STATIC-стилей ваших страниц не современно, оно звучит басом, и вы можете сказать мобильным парням jQuery, о которых я говорил.Если вам абсолютно необходимо поддерживать IE6, а IE7 и IE8 скажите вашему клиенту, сколько будет стоить им вырезать закругленные углы поворота повсюду, если они откажутся принимать что-либо в качестве альтернативы абсолютной постепенной деградации для 5% своего клиента.base.

  2. Если ваши страницы без JS заранее загружаются так долго, у вас есть другие проблемы, которые необходимо решить.Сколько ресурсов вы загружаете?Какая безбожная предварительная обработка вашего PHP?Я перезваниваю или проектирую махинации.

  3. Вы говорите, что половина страницы с работающим JS является недопустимой, а не полностью неприемлемой?Не отпускайте этого клиента, кем бы он ни был.

  4. jQuery, когда свернутый размер примерно соответствует размеру JPEG среднего размера.

Примечание. Нельзя допускать, чтобы JS был на вершине.Некоторый специализированный код, такой как аналитика или нормализаторы холста, требуют этого.Но все, что не должно быть, должно быть внизу.Каждый раз, когда анализируется JS, весь процесс загрузки страницы и вычисления потока останавливается.Вытягивание вашего JS снизу улучшает воспринимаемое время загрузки страницы и должно также служить доказательством того, что кому-то в вашей команде нужен быстрый удар по заднице, чтобы выяснить, почему его код работает или что можно сделать с помощью 25-мегабайтного png-24.что они просто сжались, а не переформатированы.

3 голосов
/ 22 марта 2012

Теги скрипта в заголовке блокируют все остальные запросы.Например, если у вас есть 10 таких тегов:

<script src="http://images.apple.com/home/scripts/promotracker.js"></script>

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

Проверьте HeadJS здесь в качестве примера решения.

2 голосов
/ 22 марта 2012

Вы должны думать в терминах: «Нужно ли DOM быть готовым, прежде чем я выполню какой-нибудь JavaScript».По сути, вы помещаете теги сценария внизу страницы, чтобы гарантировать готовность DOM.Если вы связываете свой стиль в заголовке и правильно стилизуете страницу, вы не должны получать «уродство».Во-вторых, если вы зависите от того, какие части страницы будут отображаться с помощью javascript для работы с объектами DOM, я бы использовал больше вызовов ajax для предотвращения этой проблемы.Лучший из двух миров.Страница загружается с тем, что вы можете, и затем вызовы ajax заставляют html заполнять другие части страницы.

1 голос
/ 23 марта 2012

Рекомендуется установить JS внизу страницы или выполнить асинхронную загрузку в том, что JS замедляет загрузку страницы.

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

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

Не забывайте, что независимо от того, насколько красива ваша страница, загрузка людей не займет много времени, она не будет ждать, а 2/3 секунды - это то, с чего начинаются проблемы.

  1. Современный дизайн, вероятно, может меньше зависеть от JS, чем когда-либо, - да, мы все еще нуждаемся в полифиллах, но по мере улучшения работы браузеров мы можем делать больше с помощью CSS

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

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

  4. НЕТ! JS блокирует поток пользовательского интерфейса и в некоторых случаях загружает, поэтому изображения будут задерживаться. Кроме того, поскольку JS использует соединения, тогда для параллельной загрузки доступно меньше соединений.

  5. Посмотрите статью @ samsaffron о поздней загрузке jQuery - http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

Если вы можете отложить загрузку JS, вам следует

1 голос
/ 22 марта 2012

У всех разные потребности, давайте пройдемся по вашему списку:

1) У меня никогда не было проблем с макетом или стилем страницы из-за JavaScript. Если у вас есть HTML и CSS в порядке, отсутствующий javascript будет близок к невидимому. Вы можете скрыть элементы в CSS и отображать их с помощью JavaScript, когда они будут готовы. Вы можете использовать jQuery's .show(); метод

вот пример:

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#def3ca; margin:3px; width:80px;
  display:none; float:left; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="showr">Show</button><button id="hidr">Hide</button>
  <div>Hello 3,</div><div>how</div><div>are</div><div>you?</div>
<script>
$("#showr").click(function () {
  $("div").first().show("fast", function showNext() {
    $(this).next("div").show("fast", showNext);
  });
});
$("#hidr").click(function () {
  $("div").hide(1000);
});
</script>
</body>
</html>

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

2) Это ошибка пользователя, вы не можете это контролировать, но вы можете проверить, есть ли необходимые функции, и попытаться перезагрузить их. Большинство плагинов предлагают какое-то подтверждение, запущены они или нет, так что вы можете запустить тест и попытаться перезагрузить их.

Вы также можете отложить загрузку файлов до тех пор, пока пользователь не потребует их, например, ждать их до focus на form, чтобы загрузить сценарии проверки, или прокрутить мимо определенной точки, чтобы загрузить код для вещей ниже «сгиба».

3) Если страница die s, вы все равно получите полупустую страницу. С PHP 5 вы можете лучше обрабатывать ошибки с exception s

if (!$result = mysql_query('SELECT foo FROM bar', $db)) {
        throw new Exception('You fail: ' . mysql_error($db));
}

и это

try
{
  // Code that might throw an exception
  throw new Exception('Invalid URL.');
}
catch (FirstExceptionClass $exception) 
{
  // Code that handles this exception
} 
catch (SecondExceptionClass $exception) 
{
  // you get the idea what i mean ;)
}

4) Если вы минимизируете свой скрипт, он не должен быть намного больше, чем изображения. JQuery - это миниатюрный 32KB & gziped. Сценарий JQuery-UI составляет 51 КБ. Это не так уж плохо, большинство плагинов должно быть даже меньше, чем это.

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

1 голос
/ 22 марта 2012

Я иногда рекомендовал размещать Javascript внизу страницы (прямо перед </body>), но только в тех случаях, когда начинающий программист не мог по-настоящему справиться с window.onload или <body onload...>, и это была самая простая адаптацияих код, чтобы заставить его работать.

Я согласен с вашими практическими недостатками, которые должны быть сбалансированы с замечанием Майкла о влиянии на время загрузки.В большинстве случаев [я отправляю] сценарии загрузки на <head> страницы выигрывает.

1 голос
/ 22 марта 2012

Я не очень хорошо знаком с тем, как помещать скрипты в нижний колонтитул, но вы, возможно, захотите изучить различные способы заставить страницу запускать JavaScript только ПОСЛЕ полной загрузки страницы.

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

Вы также можете скрыть часть или весь контент страницы, а затем просто сделать его видимым после того, как страница будет готова.Просто убедитесь, что вы скрываете его с помощью JS, чтобы браузеры, отличные от js, все еще могли его видеть.

См. Эти:

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