Если Вы работали над оптимизацией загрузки страницы, Вы знаете, насколько дорогостоящая каждая загрузка ресурса. Чем больше число внешних ресурсов, к которым Вы обращаетесь, тем больше время требуется для загрузки страницы.
Как правило, веб-страницы обращаются ко многим внешним CSS и файлам JS и следовательно подвергаются многим загрузкам ресурса. Совет от гуру оптимизации в необходимости объединить все файлы CSS и все до одного файлы JS, чтобы уменьшить число ресурсов до двух. Это, без сомнения, поможет сократить время загрузки страницы.
Если Вы все же считаете что эти две загрузки не являются лучшим решениям, я с Вами соглашусь. В этой статье мы рассмотрим способ объединения CSS с JS и сведем количество загрузок к одной. Я обнаружил этот способ, отчаянно пытаясь оптимизировать страницы в Microsoft Office Live
Техника основана на том как CSS и анализатор JS ведут себя в IE и Firefox.
• Когда анализатор CSS сталкивается с символом комментария HTML (<!--) в содержании CSS, символ игнорируется.
• Когда анализатор JS сталкивается с символом комментария HTML (<!--) в содержании JS, символ рассматривают подобный комментарию линии (//), и следовательно остальная часть строки после символа комментария HTML игнорируется
Рассмотрим на примере
Когда анализатор CSS будет разбирать вышеупомянутое код, символы комментария HTML будут пропущенны, и код станет эквивалентным коду ниже…
Как Вы видите, анализатор CSS видит только код CSS, а код скрипта закомментирован (/*… */).
Когда анализатор JS станет разбирать код, символы комментария HTML будут интерпретированы в комментарии строки (//), и следовательно код станет таким…
Как Вы видите анализатор JS видет только код скрипта, а все остальное закоментрованно.
Что бы ссылаться на этот ресурс можно использовать теги SCRIPT и LINK в вашей страницы. Например:
Заметьте эти два тега ссылаются на один тот же ресурс и следовательно он загрузиться всего один раз, и будет интерпретирован и как стили и как скрипты.
И на последок, есть еще одна вещь, о которой Вы должны заботиться — content type ответа — необходимо ставить */* чтобы дать подтверждение Firefox, что содержание может быть обработано как что-либо подходящее.
Как правило, веб-страницы обращаются ко многим внешним CSS и файлам JS и следовательно подвергаются многим загрузкам ресурса. Совет от гуру оптимизации в необходимости объединить все файлы CSS и все до одного файлы JS, чтобы уменьшить число ресурсов до двух. Это, без сомнения, поможет сократить время загрузки страницы.
Если Вы все же считаете что эти две загрузки не являются лучшим решениям, я с Вами соглашусь. В этой статье мы рассмотрим способ объединения CSS с JS и сведем количество загрузок к одной. Я обнаружил этот способ, отчаянно пытаясь оптимизировать страницы в Microsoft Office Live
Техника основана на том как CSS и анализатор JS ведут себя в IE и Firefox.
• Когда анализатор CSS сталкивается с символом комментария HTML (<!--) в содержании CSS, символ игнорируется.
• Когда анализатор JS сталкивается с символом комментария HTML (<!--) в содержании 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, что содержание может быть обработано как что-либо подходящее.
