JS CSS в одном файле у меня на сайте

Я как-то писал о технике, которая позволяет совместить JS и CSS в одном файле, чтобы ускорить загрузку сайта. Написал два месяца назад, а руки реализовать то же на моём сайте дошли только сегодня ночью.

Особых трудностей не встретил, только убрал все комментарии из файлов с JavaScript руками и добавил удаление BOM из файлов, браузеры как-то нервно реагируют на них, встретив их не в начале файла, а мой редактор кода зачем-то их вставляет.

Схема, в общем-то, не изменилась — если файл .cssjs есть на диске, отдаём его средствами веб-сервера, если нет, собираем необходимое, кладём на диск и отдаём браузеру.

Вот ещё тонкость, обязательно нужно добавить новый mime-тип:
AddType */* .cssjs
Я-то думал, что он нужен только для FF 2.xx, ничего подобного, последние «Опера» и FF так же отказались работать без этого заголовка.


Оказалось, что последний «Хром» ни в какую не хочет рендерить CSS с таким типом, пришлось заменить на «text/css,*/*» на «text/css», предыдущий вариант не работал в IE9.

Надо посмотреть как отнесётся к этому второй FF, а пока, если у вас «Хром» или IE9 и показывает неправильно, обновите, пожалуйста, страницу, чтобы она не из кеша взялась, всё должно нормально отрендериться.

Посмотрим «в поле» насколько это стабильно работает.
22 июня 2011 12:02

Ivan Kataitsev (инкогнито)
22 июня 2011, 12:19

Хром 12 под Маком не работает.

Сергей (инкогнито)
22 июня 2011, 12:20

в последнем хроме так: http://imgur.com/XckVj

bolk (bolknote.ru)
22 июня 2011, 12:23

Спасибо, ребята, сейчас посмотрю!

Сергей (инкогнито)
22 июня 2011, 12:25

json: "application/json, text/javascript","*": "\x2A/*"}

bolk (bolknote.ru)
22 июня 2011, 12:33, ответ предназначен Сергею

К чему это, я не понял.

bolk (bolknote.ru)
22 июня 2011, 12:56

Ага, FF2.0 полёт нормальный: http://browsershots.org/screenshots/ccd190601b98bbcb24102aab29333ece

ЖЖитель (zhzhitel.livejournal.com)
22 июня 2011, 13:13

Chrome 14 - ОК.

bolk (bolknote.ru)
22 июня 2011, 14:09, ответ предназначен ЖЖитель (zhzhitel.livejournal.com):

Я уже починил для «Хрома».

bolk (bolknote.ru)
22 июня 2011, 14:47

В Dillo какие-то проблемы: http://api.browsershots.org/png/original/41/41505e73a44fd9cd8299e0f391c6ae7f.png
Надо глянуть.

zabytki.in.ua/ru/ (zabytki.in.ua/ru/)
22 июня 2011, 15:54

А я смотрю в FF3.6 и Хроумиме файл грузится дважды. Одновременно main.cssjs и main.cssjs#2. Первый за 31мс, второй за 287мс. В Опере - один раз.

bolk (bolknote.ru)
22 июня 2011, 16:02, ответ предназначен zabytki.in.ua/ru/:

А я смотрю в FF3.6 и Хроумиме файл грузится дважды. Одновременно main.cssjs и main.cssjs#2. Первый за 31мс, второй за 287мс. В Опере - один раз.
Очень вряд ли. Один из них — попадание в кеш.

Alex (инкогнито)
22 июня 2011, 18:50

IE9 - не работает вообще

bolk (bolknote.ru)
22 июня 2011, 18:58, ответ предназначен Alex

Спасибо! Сейчас попробую найти Windows.

IE8 работает: http://api.browsershots.org/png/original/a2/a298ed5a01e4eba48525c1a05bbef156.png

bolk (bolknote.ru)
22 июня 2011, 19:16, ответ предназначен Alex

Поправил.

Александр Карпинский (инкогнито)
22 июня 2011, 22:02

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

bolk (bolknote.ru)
22 июня 2011, 23:47, ответ предназначен Александру Карпинскому

То есть, к тому времени, когда JS понадобится, он уже будет загружен? Да, хорошее развитие идеи.

http://twitter.com/thenameisbusy (инкогнито)
23 июня 2011, 09:50, ответ предназначен bolk (bolknote.ru):

Евгений, а почему эту технику не протестировать на сайтах с большой посещаемостью?

У вас в Яндексе есть места где можно это сделать.

Например, так:

// /*
window.onload = function() {
var body = document.getElementsByTagName('body')[0];

var test = document.createElement('div');
test.innerHTML = ' ';
test.className = 'cssjs-test';

body.appendChild(test);

if (test.offsetHeight !== 0) {
//fail, sending UA on server
}

body.removeChild(test);
}
"*/{"/*"}
.cssjs-test {
display: none;
}
*/

bolk (bolknote.ru)
23 июня 2011, 10:08, ответ предназначен http://twitter.com/thenameisbusy

Потому что на серьёзных проектах не место для экспериментов над пользователями.

bolk (bolknote.ru)
23 июня 2011, 10:11, ответ предназначен http://twitter.com/thenameisbusy

А, я понял что имеется ввиду, когда прочитал внимательно.

Как я уже убедился, эта техника достаточно хрупкая, может поломаться в релизе какого-нибудь нового браузера. Что же тогда, все сервисы «Яндекса» переделать к этому релизу? Это очень ресурсоёмко.

http://twitter.com/thenameisbusy (инкогнито)
23 июня 2011, 10:14, ответ предназначен bolk (bolknote.ru):

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

bolk (bolknote.ru)
23 июня 2011, 10:25, ответ предназначен http://twitter.com/thenameisbusy

Предположим невероятное, что я сошёл с ума и использую какой-то топовый проект «Яндекса» в своих личных целях — захотелось мне, понимаешь, оттестировать какой-то сомнительный код на продакшне :) Не дай бог мне, конечно, дойти до такой степени отчаяния.

Так кто мне позволит-то? :) У этих проектов есть свои авторы: разработчики, менеджеры, маркетологи и прочие ребята, которые за него болеют. А я тут собираюсь увеличить время загрузки страницы только из-за того, что мне так захотелось? :)

http://twitter.com/thenameisbusy (инкогнито)
23 июня 2011, 10:35, ответ предназначен bolk (bolknote.ru):

А вдруг разработчики некого сервиса Яндекса захотят (теоретически) добавить несколько невинных строчек кода на продакшн от которого, в принципе, никакого криминала не случится, а вот польза будет? Почему в личных целях, разве компания не заинтересована?

bolk (bolknote.ru)
23 июня 2011, 10:39, ответ предназначен http://twitter.com/thenameisbusy

Это сколько мне сервисов надо обойти? http://www.yandex.ru/all
Почему в личных целях, разве компания не заинтересована?
Нет, конечно. Я же говорю: технология потенциально глючная.

Александр Карпинский (инкогнито)
23 июня 2011, 10:51, ответ предназначен bolk (bolknote.ru):

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

bolk (bolknote.ru)
23 июня 2011, 11:05, ответ предназначен Александру Карпинскому

Да, я идею понял. Хорошая идея.

bolk (bolknote.ru)
23 июня 2011, 11:07, ответ предназначен Александру Карпинскому

Если проведёте какие-то эксперименты, киньте ссылку, не сочтите за труд.

Alex (инкогнито)
23 июня 2011, 17:13

Евгений, IE9 заработал.

bolk (bolknote.ru)
23 июня 2011, 17:36, ответ предназначен Alex

Спасибо!

Александр Карпинский (инкогнито)
23 июня 2011, 23:31, ответ предназначен bolk (bolknote.ru):

В общем, способ работает, им действительно можно заставить грузить в Опере скрипты параллельно. Но, например в Хроме они начинают просто грузиться 2 раза, а в Фаерфоксе мало того, второй раз еще происходит последовательно :) Не как мне не удается их заставить закешировать файлы намертво и второй раз за ними не бегать.

bolk (bolknote.ru)
23 июня 2011, 23:59, ответ предназначен Александру Карпинскому

Но, например в Хроме они начинают просто грузиться 2 раза, а в Фаерфоксе мало того, второй раз еще происходит последовательно :) Не как мне не удается их заставить закешировать файлы намертво и второй раз за ними не бегать.
Не факт, что они действительно грузятся второй раз. В FF надёжнее всего смотреть через livehttpheaders, а не через firebug. В «Хроме» хорошего способа не знаю.

Александр Карпинский (инкогнито)
24 июня 2011, 08:07

Ошибки быть не может, я же загружаю js.php
http://pastie.org/2114550
Ну и результат замеряю незамысловато.
http://pastie.org/2114558

bolk (bolknote.ru)
25 июня 2011, 00:28, ответ предназначен Александру Карпинскому

Для «Хрома», кстати, предназначен «#2» (http://bolknote.ru/2011/04/19/~3185/).

bolk (bolknote.ru)
25 июня 2011, 00:30, ответ предназначен Александру Карпинскому

Директивы «store» у Cache-control нет (http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9), есть «public».

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)