Когда разделять файлы для экономии трафика
Я занимаюсь некоторой оптимизацией своего сайта и пытаюсь выяснить, насколько большим может быть встроенный код, прежде чем он сможет оправдать наличие собственного файла вместо написания встроенного кода.
Я предполагаю, как это измерить, так как объем кода (в данном случае CSS или JS) должен быть больше, чем количество отправленных и полученных HTTP-пакетов, чтобы получить ответ 304.
Не обращайте внимания на тот факт, что рекомендуется не использовать стили и javascript на HTML-странице и думать только о производительности браузера. :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Честно говоря, с точки зрения производительности браузера, разделение ваших файлов CSS и JS и правильная установка заголовков expires, чтобы они были кэшированы, повлияет на производительность увеличивать, а не ухудшит ее. Браузер кэширует его и никогда больше не запрашивает, что сокращает объем данных, передаваемых при просмотре нескольких страниц.
Только если большая часть вашей аудитории приходит на ваш сайт с пустым кешем и, просмотр только 1 страницы поможет встраивание CSS и JS.
Видеть:
Я также хотел бы добавить, что вы должны объединить свои JS / CSS в одну загрузку (каждую), если это возможно, чтобы сэкономить на HTTP-соединениях с веб-сервером. Я считаю, что Yahoo предлагает это в своем URL-адресе, опубликованном Райаном. В итоге я написал свой собственный .NET-компонент, который может комбинировать скрипты и CSS, а также при необходимости минимизировать их и кэшировать (на стороне сервера).
И извините, я как бы пропустил ответ на исходный вопрос: каждый раз, когда у вас есть CSS или скрипт, который нужен на отдельных страницах, он должен быть во внешнем файле. Нет смысла дублировать код. И, как сказал Райан, после того, как браузер загрузит его и кэширует, он больше не получит его.
Однако согласен с Райаном, ЕСЛИ ваша аудитория увидит ваш сайт только один раз или если вы никогда не хотите, чтобы файлы кешировались, включите встроенные CSS и JS.
Лучше всего, чтобы ваш сервер объединил и сжал все файлы CSS / JS в один кешируемый файл, чтобы сэкономить запросы и пропускную способность.
Это можно легко настроить, по крайней мере, в Tomcat и Glassfish.
Я смотрю на это немного подробнее; Думаю, я на правильном пути.
Фактический HTTP-запрос выглядит примерно так:
HTTP/1.1 304 Not Modified
Cache-Control: max-age=604800, public
Last-Modified: Tue, 17 Jun 2008 17:20:41 GMT
Date: Mon, 20 Oct 2008 03:49:58 GMT
Server: ucfe
Это примерно 163 байта, верно?
Посмотрев здесь (http://www.freesoft.org/CIE/Course/Section4/8.htm), похоже, что размер самого TCP-пакета может составлять примерно от 20 байт и выше.
Итак, я предполагаю, что общий запрос + ответ выглядит примерно как 250 байтов (30 байтов для пакета tcp + немного заполнения для текста запроса и ответа). Не важно.
Думаю, тогда все правы. Это не имеет большого значения. Тем не менее, все еще интересно, как это повлияет на мобильные браузеры, поскольку задержка нескольких запросов будет большой проблемой.
Пожалуйста, сообщите, если я ошибся в своих расчетах
Цените ответы, но это скорее теоретические, чем практические. Вопрос в том, насколько большим должен быть код, чтобы кешированный HTTP-запрос стал меньше, чем загрузка встроенного кода. Причины этого могут включать в себя разработку мобильных приложений, где наибольшее замедление происходит из-за дополнительных HTTP-запросов.