Встроенный JavaScript - это хорошо или плохо?

В настоящее время я перешел с WordPress на Yii Framework, и внешний разработчик перестраивает мой сайт.

Одна вещь, которую я замечаю, заключается в том, что каждый раз, когда он вызывает AJAX / jQuery способом Yii, он вставляет встроенный JavaScript на веб-странице. Хотя кажется, что код JavaScript находится ниже нижнего колонтитула, он все еще встроен.

В целом, кажется, что код JavaScript чаще размещается внутри веб-страницы. Я всегда думал, что JavaScript-скрипты должны быть как можно больше размещены в JavaScript-файлах. Это грядущая «новая» тенденция? Или я все еще должен пытаться хранить код JavaScript в отдельных файлах?

Встроенный JavaScript увеличивает время загрузки страницы, что не очень хорошо. При обращении к .jsфайлу, по крайней мере, это могут быть параллельные вызовы, и время загрузки контента уменьшается. Да, бывают ситуации, когда можно поместить JavaScript непосредственно в HTML-код, но вам лучше не загружать его как можно больше.

Имейте в виду, что время загрузки страницы (то есть HTML), а не все вызовы ресурсов влияют на показатели, влияющие на ранжирование (хотя для PageRank или в результатах поиска это не имеет значения). Дело в том, что это влияет на производительность сайтов для SEO, однако это проявляется.

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

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

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

Не обязательно плохо иметь JavaScript в вашем HTML-файле, но вы должны сделать это.

Это является плохим , если у вас есть большое количество JavaScript используется на нескольких страницах. В этом случае JavaScript должен быть во внешнем, сжатом и кэшируемом файле, и если ваш сайт имеет очень большой трафик, вы должны использовать CDN.

Однако, если у вас небольшое количество JavaScript, сохранение его во внешнем файле может быть сведено на нет тем, что вам нужно сделать дополнительный HTTP-запрос для его получения. В этом случае было бы более эффективно сохранить JavaScript на вашей странице.

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

В конечном итоге вы должны сопоставить размер JavaScript с дополнительными затратами на выполнение дополнительных HTTP-запросов. По большей части, для «среднего» сайта, это, вероятно, не будет иметь большого значения, просто поместив его во внешний файл.

Я разработчик Yii и могу вам сказать, что Yii не имеет к этому никакого отношения . Это полностью на стороне разработчика , независимо от того, поместил ли он или она код Javascript в отдельный файл и зарегистрировал его на странице HTML (просмотр) с помощью CClientScript::registerScriptFileметода, или поместил его непосредственно для просмотра кода (HTML) и зарегистрировал его с помощью CClientScript::registerScriptметода.

Согласно вашему ответу, большинство (профессиональных?) Разработчиков Yii решительно голосуют за первый подход, то есть сохранение как можно большего количества кода Javascript в отдельных файлах. Таким образом, это, безусловно, не новая тенденция кодирования, а скорее плохая практика разработчиков. По крайней мере, так это выглядит в сообществе Yii.

РЕДАКТИРОВАТЬ : На самом деле я забыл о самом важном аргументе. Yii (как и большинство других профессиональных PHP-фреймворков) построен на основе шаблона проектирования MVC (фактически - архитектурного шаблона). И тот же шаблон можно использовать во фронтэнде: HTML-код - это модель (данные), CSS - это вид (декоратор), а Javascript - это контроллер. Все они помещаются в отдельные файлы , .jsа .cssфайлы - минимизированы, запутаны и сжаты в лучшем сценарии.

Когда вы создаете свое приложение Yii, вы можете сломать шаблон MVC и сохранить все в одном файле. Вопрос в том, стоит ли это делать, каковы преимущества (нет?) И к чему это вас приведет? Вы можете использовать ту же самую аргументацию, когда спрашиваете, сохранять ли код JS встроенным или нет?

На самом деле это зависит от цели веб-страницы, которую вы разрабатываете:

Я использую небольшое количество встроенного JavaScript, в то время как я предпочитаю использовать внешние файлы JavaScript, если он большой.

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

Ответ на самом деле зависит от того, что делается.

Если вы заметили встроенный JavaScript, который используется по всему сайту (например, виджет, который отображается внутри заголовка на всех страницах сайта), то было бы целесообразно переместить его в «общий» файл JavaScript.

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

С другой стороны, если JavaScript - это просто набор параметров конфигурации / инициализации, например:

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});

где по какой-то причине было невозможно переместить код во внешний файл JavaScript (например, когда параметры изображения поступают из базы данных), я бы оставил его встроенным. Сказав это, я бы выбрал сторонние плагины, которые являются "ненавязчивыми" (или конвертируют их как таковые).

Эти ответы не попадают в цель. Посмотрите на встроенное кэширование .

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

Вместо того, чтобы отправлять клиенту целую связку общих функций Javascript в файле .js, которые не имеют контекста, пока не будут предоставлены данные (данные, которые могут храниться на сервере и требовать передачи туда и обратно), мы можем «запечь» контекст / данные как часть функции Javascript. Это экономно, потому что это означает, что вы отправляете функциональные возможности / данные вместе и отправляете только функциональные возможности / данные, которые могут понадобиться клиенту в данный момент, вместо отправки всего приложения при первой загрузке страницы. Это также означает, что вам не нужно подвергать все свое приложение легкой загрузке и обратной переработке при загрузке первой страницы, потому что вы вводите только небольшие части функциональности, которые могут понадобиться каждому отдельному клиенту в данный момент. Не уверен, насколько хорошо это предвещает SEO, но я уверен, что он может быть оптимизирован соответственно.

Рассмотрим случай, когда конечный пользователь пишет страницу в некотором программном обеспечении CMS с помощью редактора WYSIWYG. Как этот пользователь собирается добавить новые функции на страницу, если у них нет доступа к вашим исходным файлам .js на сервере? Они переключаются на вкладку HTML и используют встроенный Javascript.

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

Ссылки:

• Встроенное кэширование
• Оптимизация динамического JavaScript с помощью встроенного кэша
• Объяснение JavaScript виртуальных машин в JavaScript - встроенные кэши
• Почему я должен избегать встроенных сценариев? (см. ответ MainMa & user1389596)

Обычно встроенный JS-код плох, как говорили другие до меня.

Но я думаю о случае использования, где встроенный JS лучше .

Подумайте о CMS, которая вставляет управляемую JS галерею. Галерея может быть сделано в jQuery. Он идентифицируется атрибутом id, который не только уникален на странице, но и уникален для всего сайта. В этом случае - я думаю - встроенный JS был бы лучше, потому что код JS используется только на одной странице, и у вас нет накладных расходов HTTP