Поместить CSS и JavaScript в файлы или основной HTML? - PullRequest
16 голосов
/ 17 сентября 2011

Хотя всегда рекомендуется помещать код JavaScript и CSS в соответствующие файлы (например, .js и .css), большинство крупных веб-сайтов (таких как Amazon, facebook и т. Д.) Размещают значительную часть своих JavaScript и CSS. код непосредственно на главной странице HTML.

Где лучший выбор?

Ответы [ 6 ]

15 голосов
/ 17 сентября 2011

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

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

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

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

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

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

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

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

Также, ради бога, разделение проблем, пожалуйста.Вы не должны никогда использовать встроенный JavaScript или встроенный CSS в HTML-страницах.

9 голосов
/ 17 сентября 2011

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

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

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

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

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

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

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

1 голос
/ 08 мая 2012

Я думаю, что включение CSS и JS в основной HTML делает страницу быстрой загрузки.

1 голос
/ 17 сентября 2011

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

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

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

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

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

мы выкладываем его так, как он держит разметку HTML, как и должно быть, для разметки.

1 голос
/ 17 сентября 2011

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

1 голос
/ 17 сентября 2011

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

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

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