Размещение Java-скриптов и CSS-компонентов во внешние файлы
Многие правила работы с сайтом связаны с управлением внешними компонентами. Но прежде всего необходимо ответить на главный вопрос: JavaScript и CSS должны находиться во внешних файлах, или быть встроены в саму страницу?
Использование внешних файлов в реальности обычно ускоряет открытие страниц, потому, что файлы JavaScript и CSS кешируются браузером. Встроенные в HTML-документ JavaScript и CSS загружаются при каждом обращении к HTML-документу. Это уменьшает количество HTTP-запросов, но увеличивает размер HTML-документа. С другой стороны, если JavaScript и CSS, кешируемые браузером, находятся во внешних файлах, то размер HTML-документа уменьшается, без увеличения количества HTTP-запросов.
Ключевым фактором является частота, с которой кешируются внешний JavaScript и компоненты CSS по отношению к количеству HTML-запросов. Этот фактор, хотя и трудно поддаётся количественной оценке, может быть измерен с помощью различных метрик. Если пользователи просматривают странички вашего сайта несколько раз за одну сессию и многие из ваших страниц повторно используют одни и те же скрипты и таблицы стилей, то есть большая потенциальная выгода от внешних кэшированных файлов.
Много сайтов подпадают под средние показатели данных метрик. Лучшим решением для этих сайтов является размещение JavaScript и CSS компонентов во внешние файлы. Единственным исключением, когда предпочтение отдается размещению во внутренние файлы, является главная страница, как, например, главные страницы Yahoo! и My Yahoo!. Главные страницы сайтов, которые имеют немного (возможно только один) просмотров за сессию, могут предпочесть размещение JavaScript и CSS во внутренние файлы , что ускоряет время отклика конечного пользователя.
Для главных страниц, которые обычно просматривают первыми, существуют методы сокращения HTTP-запросов, которое достигается за счёт внутреннего размещения, а преимущество от кеширования достигается за счёт использования внешнего размещения. Одним из таких методов является размещение JavaScript и CSS во внутренних файлах на главных страницах, но динамическая загрузка внешних файлов после окончания загрузки страницы. Последующие страницы будут ссылаться на внешние файлы, которые должны уже быть в кэше браузера.
Оригинал статьи на developer.yahoo.com
Перевод КОМТЕТ komtet.ru