Задать вопрос
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...

А что если писать сайт вообще в одном файле?

Не примите вопрос как реальную задачу! Ни в коем случае)

Просто стало интересно после моего прошлого вопроса ( Имеет ли смысл объединять JS скрипты? ).

А что если всю верстку делать в одном файле?
И стили, и скрипты, и картинки (можно вообще в base64).

Понятно, что будет неудобно работать, но это допустим не важно. Привыкнется)))

Приведу пример: Есть сайт-одностраничник, на нем 200 строк JS, около 1000 строк CSS, ну и допустим 1000 строк HTML. Ни библиотек, ни скриптов дополнительных, чисто HTML, JS, CSS.
Можно ли (и нужно ли) сделать всю эту простыню в одном index.html файле?
И до кучи его минифицировать в одну строку)
Речь не идет про крупный проект, портал или магазин. Простой одностраничник)

Повторюсь, просто интересно, насколько такой вариант плох или хорош?
  • Вопрос задан
  • 2691 просмотр
Подписаться 8 Оценить 4 комментария
Решения вопроса 5
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Гугл примерно так и делает. посмотрите исходник страницы.

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

PS Для одностраничника вполне оправданно упаковать все в один файл. Кроме, пожалуй изображений в base64 =).
Ответ написан
Wolfnsex
@Wolfnsex Куратор тега CSS
Если не хочешь быть первым - не вставай в очередь!
Сказать по правде, Вы немного странно ставите вопрос... мне кажется, актуальнее было бы уточнить, о причинах, по которым нужно объединять файлы в один.

Понятно, что будет неудобно работать, но это допустим не важно. Привыкнется)))
Неудобно работать кому, Вам, или браузеру? Если браузеру, то за него не беспокойтесь, он парень сильный, справится. Если Вам - то есть сборщики проектов, коих как грибов в лесу. На крайняк можно написать свои 20 строк кода.

Речь не идет про крупный проект, портал или магазин. Простой одностраничник)
Вопрос звучит примерно как: "я тут приехал в какую-то деревню (город с населением 200тыс. человек), стоит ли там соблюдать правила дорожного движения и законы? Это же не миллионник и даже не мегаполис..."

Дело не в том, скольки-страничник сайт, а в причинах, которые послужили предпосылкой к объединению скрипто-стилевого мусора в один файл. Основных причин было несколько:

1. Большой файл грузится быстрее, чем много маленьких, по тому, что:
а) Обращение к дисковой системе происходит 1 раз
б) Исчезает промежуточный мусорный обмен трафиком между сервером, на загрузку каждого дополнительного файла

2. Особенность браузеров, работающих по поротоколу HTTP 1.0/1.1 заключается в том, что они не могут открывать более 16-32 соединений (если мне память не изменяет, точные цифры не помню). Это значит, что одновременно более 16-32 файлов скачиваться не будет. А теперь представьте, что у Вас на "одностраничнике" штук 300 спрайтов, на всякие соц. сети, иконки, стрелки и пр. лабуду, и каждый будет загружаться отдельно...

Я думаю, Вы уже знакомы с протоколом FTP... Попробуйте как-нибудь, ради интереса загрузить на сервер любую CMS, в которой 5-15тыс. файлов по FTP, в распакованном виде. А потом попробуйте упаковать все эти файлы в архив, с нулевым сжатием (TAR или ZIP без сжатия), загрузить на сервер и распаковать. Даже на самом "мёртвом" сервере, даже с учётом времени на распаковку, процедура с архивом обычно проходит в несколько (иногда десятков) раз быстрее, чем загрузка каждого файла по одному. В браузере разница не настолько критична, принцип тот же.

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

Так же, сжатие всех скриптов в один - позволяет решить проблему порядка загрузки, и добавить скрипту флаг async, что было довольно актуально для меня в ряде случаев. А CSS - тем более грузятся по порядку, т.к. это каскадные таблицы, и как бы Вы их там не вращали, браузер априори будет их читать линейно и так же линейно применять, именно в том порядке, в котором они были указаны к загрузке. И в этом случае, сочетание протокола HTTP/1.0|1.1 и отсутствие многократного дёргания сервера, довольно очевидно.
Ответ написан
Комментировать
Внешние JS/CSS кешируются, но это полезно если на сайт один человек заходит второй раз или ползает по страницам сайта, а когда одноразовые промо-странички, то может и имеет смысл, только опять тоже параллельной загрузки не будет.
Ответ написан
Комментировать
Если не ошибаюсь, такой подход плох с точки зрения производительности, а конкретно скорости загрузки. Когда файлы подключены через теги, то загрузка происходит асинхронно. Но опять же, это заметно, когда весь этот букет весит 1+мб.
Ответ написан
Комментировать
xPomaHx
@xPomaHx
1vs9
Я делал такое, неудобства использования нет никого тк все делает галп, у меня была папка с исходниками, и выдает 1 файл. Все стили скрипты инклюдилисьв страницу, а картинки и шрифты в base64.
Страница грузится нормально без каких то косяков, минус один она вся получиться 12мб. И сервисы типа google pagespeed отказываются хвать больше 8мб. Я не смог клиенту объяснить что пофиг на пейджспид страница гарантированы быстрее открывается чем без такого сжатия в 1 файл, но он отказался приказал по старому делать.
Я лично вообще не вижу каких то причин делать одностроничники не 1 файлом.
Если хотя бы 2 страницы тогда да лучше чтобы браузер отдельно кэшировал все картинки, но если на сайт тока 1 то можно закешировать всю страницу целиком и это будет быстрее работать.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Zifix
@Zifix
Barbatum
Я как-то раз слышал от знакомого фрилансера, что его наняли внести небольшие изменения на сайт, который оказался написан на Перле, в одном файле, включая веб сервер.
Ответ написан
@Norval
Если CSS и JS код вставлять в HTML, то для лендинга это нормально. Когда всего 1 страница. Если 2 и более - однозначно внешний файл стилей использовать стоит.
Картинки всегда подключаю тэгом IMG, хотя видел кодируют через base64...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы