Поместите CSS и JavaScript в файлы или основной HTML?

Ответ 1

http://developer.yahoo.com/performance/rules.html#external

Yahoo (хотя у них много встроенных стилей и скриптов), рекомендуется сделать их внешними. Я полагаю, что скорость страницы Google, используемая для (или до сих пор?), Делает то же самое.

Это действительно логично, чтобы их разделить. Есть так много преимуществ для того, чтобы CSS и JS были отделены от HTML. Такие вещи, как управление логическими кодами, кеширование этих страниц, более низкий размер страницы (скорее всего, вам понадобится ~ 200 мс для кэшированного ресурса 400 КБ или задержка в 4000 мс от загрузки этих данных на каждой странице?), Варианты SEO (меньше дерьма для google, чтобы просмотреть, когда скрипты/стили являются внешними), проще минимизировать внешние скрипты (онлайн-инструменты и т.д.), может загружать их синхронно с разных серверов....

Это должно быть вашей основной целью на любом веб-сайте. Все стили, составляющие весь ваш сайт, должны быть в одном файле (или файлы для каждой страницы, затем объединены и уменьшены при обновлении), то же самое для javascript.

В реальном мире (не делая проект для себя, делая его для клиента или заинтересованного лица, который хочет получить результаты), единственный раз, когда нет смысла загружать другой ресурс javascript или другую таблицу стилей (и, следовательно, использовать встроенные стили /javascript ), если есть какая-то динамическая информация, которая находится на вид для каждого пользователя, за сеанс или за период времени, который не может быть выполнен как любой другой способ. Пример: когда мой сайт продвигается, мы выгружаем тег script с помощью небольшого объекта информации JSON. Поскольку мы не минимизируем и не объединяем несколько файлов, имеет смысл просто включить его в страницу. Конечно, есть другие способы сделать это, но это стоит 20 долларов, чтобы сделать это, тогда как это может стоить > 100 долларов, чтобы сделать это по-другому.

Возможно, Amazon/Facebook/Google и т.д. используют так много встроенного кода, поэтому их серверы не облагаются налогом. Я не слишком уверен в сравнительном анализе между запросом 1 МБ файла за один удар или запросом 10 100 КБ файлов (предположительно 1МБ/10 = 100 КБ для примера), но что будет быстрее? Потенциально 1MB файл, но меньшие запросы могут быть загружены синхронно, то есть каждый из этих 10 запросов может поступать из отдельного сервера/домена потенциально, тем самым уменьшая общее время загрузки.

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

Ответ 2

Поместите ваш .js в несколько файлов, затем упакуйте, минимизируйте и gzip в один файл.

Храните свой HTML в нескольких отдельных файлах.

Поместите свой .css в несколько файлов, затем упакуйте, уменьшите и gzip в один файл.

Затем вы просто отправляете один файл css и один файл js для кэширования клиента.

Вы не встраиваете их в свой HTML.

Если вы встраиваете их, любое изменение css или html или js заставляет пользователя загружать все три снова.

Основная причина, по которой основные веб-сайты имеют js и cs в своих файлах, заключается в том, что основной код сайта гниет. Крупные компании не поддерживают стандарты и передовые методы, они просто взламывают его, пока он не работает, а затем скажите "зачем тратить деньги на наш сайт, это работает, не так ли?".

Не смотрите на примеры живых веб-сайтов, потому что 99% всех примеров в Интернете показывают плохие практики.

Также для любви к Богу, Разделение забот, пожалуйста. Вы никогда не должны использовать встроенный javascript или встроенный CSS в html-страницах.

Ответ 3

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

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

Ответ 4

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

Ответ 5

Наша команда держит все в отдельности. Все ресурсы, подобные этому, входят в папку с именем _Content.

CSS переходит в _Content/css/xxx.js

JS переходит в _Content/js/lib/xxx.js (для всех пакетов библиотеки)

События и функции пользовательской страницы вызываются со страницы, но помещаются в основной файл JS в _Content/js/Main.js

Изображения перейдут в одно и то же место под _Content/images/xxx.x

Вот как мы это делаем, поскольку он сохраняет разметку HTML, как и должно быть, для разметки.

Ответ 6

Я думаю, что ставить css и js в основной html делает страницу загружаемой быстро.