Если Вы работали над оптимизацией загрузки страницы, Вы знаете, насколько дорогостоящая каждая загрузка ресурса. Чем больше число внешних ресурсов, к которым Вы обращаетесь, тем больше время требуется для загрузки страницы.
Как правило, веб-страницы обращаются ко многим внешним CSS и файлам JS и следовательно подвергаются многим загрузкам ресурса. Совет от гуру оптимизации в необходимости объединить все файлы CSS и все до одного файлы JS, чтобы уменьшить число ресурсов до двух. Это, без сомнения, поможет сократить время загрузки страницы.
Если Вы все же считаете что эти две загрузки не являются лучшим решениям, я с Вами соглашусь. В этой статье мы рассмотрим способ объединения CSS с JS и сведем количество загрузок к одной. Я обнаружил этот способ, отчаянно пытаясь оптимизировать страницы в Microsoft Office Live
Техника основана на том как CSS и анализатор JS ведут себя в IE и Firefox.
<!--) в содержании CSS, символ игнорируется.<!--) в содержании JS, символ рассматривают подобный комментарию линии (//), и следовательно остальная часть строки после символа комментария HTML игнорируетсяРассмотрим на примере
<!-- /*
function t(){}
<!-- */
<!-- body { background-color: Aqua; }Когда анализатор CSS будет разбирать вышеупомянутый код, символы комментария HTML будут пропущенны, и код станет эквивалентным коду ниже...
/*
function t(){}
*/
body { background-color: Aqua; }Как Вы видите, анализатор CSS видит только код CSS, а код скрипта закомментирован (/* ... */).
Когда анализатор JS станет разбирать код, символы комментария HTML будут интерпретированы в комментарии строки (//), и следовательно код станет таким...
// /*
function t(){}
// */
// body { background-color: Aqua; }Как Вы видите анализатор JS видет только код скрипта, а все остальное закоментрованно.
Что бы ссылаться на этот ресурс можно использовать теги SCRIPT и LINK в вашей страницы. Например:
<link type="text/css" rel="stylesheet" href="test.jscss" /> <script type="text/javascript" language="javascript" src="test.jscss"></script>
Заметьте эти два тега ссылаются на один тот же ресурс и следовательно он загрузиться всего один раз, и будет интерпретирован и как стили и как скрипты.
И напоследок, есть еще одна вещь, о которой Вы должны заботиться — content type ответа — необходимо ставить */* чтобы дать подтверждение Firefox, что содержание может быть обработано как что-либо подходящее.