Поместите javascript и css inline в один миниатюрный html файл, чтобы повысить производительность?

Типичный веб-сайт состоит из одного файла index.html и множества файлов javascript и css. Чтобы повысить производительность веб-сайта, можно:

  • Измените файлы javascript и css, чтобы уменьшить размеры файлов.
  • Объединить файлы javascript в один файл и аналогичные для файлов css, чтобы уменьшить количество запросов на сервер. Для обычно используемых (и общих) библиотек, таких как jquery, имеет смысл оставить их внешними, позволяя браузеру кэшировать библиотеку и повторно использовать ее в разных веб-приложениях.

Мне интересно, стоит ли вставлять объединенный javascript и css файл в один файл html, что еще больше сократит количество запросов. Будет ли это улучшать производительность вашего сайта? Или он будет работать в обратном порядке, что делает невозможным кэширование браузера?

ОТВЕТЫ

Ответ 1

Объединение ваших файлов CSS и JS в один файл уменьшит количество запросов и ускорит загрузку. Но, как прокомментировано, это не имеет большого смысла, если у вас нет сайта на одну страницу, и время загрузки этой страницы очень критично. Поэтому вам лучше отделить CSS от Javascript, на мой взгляд.

Здесь вы можете узнать больше о теме:

Высокопроизводительные веб-сайты

Ответ 2

Это не очень хорошая идея по следующим причинам:

  • Вам не понравится кеш

  • Вы загрузите ненужные ресурсы на всех своих страницах.

  • У вас будет трудное время при разработке вашего сайта из-за больших файлов с несвязанными ветвями кода.

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

Ответ 3

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

Ответ 4

Эти инструменты могут помочь вам. Превращает вашу веб-страницу в один HTML файл со всем встроенным - идеально подходит для проявлений appcache на мобильных устройствах, которые вы хотите уменьшить эти HTTP-запросы.

https://github.com/remy/inliner

Ответ 5

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

Однако размещение всех файлов Javascript в одном является контекстуальным. Скорее всего, вы можете использовать библиотеки jQuery и соответствующие плагины. Это может вызвать конфликтующие проблемы между плагинами. Итак, прежде чем попробовать все сразу, попробуйте слить несколько файлов одновременно и проверить, не появляется ли ошибка.