Действительно ли удобно размещать JS-файлы в нижней части веб-страницы?

В большинстве случаев рекомендуется, чтобы файлы 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-файлы в нижний колонтитул еще полезнее?

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

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

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

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

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

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

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

  4. jQuery, когда минимизируется размер среднего JPEG.

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

Теги сценария в заголовке блокируют все остальные запросы. Если вы скажете 10 тегов:

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

Посмотрите HeadJS здесь как образец решения.

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

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

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

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

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

вот пример:

 < !DOCTYPE html>        
Hello 3,
how
are
you?

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

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

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

3) Если страница die вы все равно получите полупустую страницу. С 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, minified & gziped. Сценарий JQuery-UI составляет 51 КБ. Это не так уж плохо, большинство плагинов должно быть еще меньше.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Смотрите: