caching - Остановите браузер, чтобы сделать HTTP-запросы для изображений, которые должны оставаться в кэше - mod_expires

Translate

Прочитав много статей и задав несколько вопросов здесь,Наконец-то мне удалось активировать Apachemod_expiresчтобы сообщить браузеру, что он ДОЛЖЕН кэшировать изображения на 1 год.

<filesMatch "\.(ico|gif|jpg|png)$">
  ExpiresActive On
  ExpiresDefault "access plus 1 year"
  Header append Cache-Control "public"
</filesMatch>

И, к счастью, ответы сервера кажутся правильными:

HTTP/1.1 200 OK 
Date: Fri, 06 Apr 2012 19:25:30 GMT 
Server: Apache 
Last-Modified: Tue, 26 Jul 2011 18:50:14 GMT 
Accept-Ranges: bytes 
Content-Length: 24884 
Cache-Control: max-age=31536000, public 
Expires: Sat, 06 Apr 2013 19:25:30 GMT
Connection: close
Content-Type: image/jpeg 

Ну, я думал, это остановит загрузку браузера и даже запросит сервер об изображениях в течение 1 года. Но отчасти это правда: причинаесли вы закроете и снова откроете браузер, браузер НЕ загружает изображенияс сервера больше,но браузер по-прежнему запрашивает сервер с HTTP-запросом для каждого изображения.

Как заставить браузер перестать делать HTTP-запросы для каждого изображения? Даже если за этими HTTP-запросами не следует загружаемое изображение, они все равно остаются запросами на сервер.которые неизменно увеличивают задержку и замедляют рендеринг страницы!

Я уже сказал браузеру, что он ДОЛЖЕН хранить изображения в кеше в течение 1 года! Почему браузер по-прежнему запрашивает сервер для каждого изображения (даже если он не загружает изображение) ?!


Глядя на сетевые графики в FireBug (меню FireBug> Сеть> Изображения), я могу видеть различное поведение кеширования (я, очевидно, начал с полностью пустым кешем браузера, я принудительно удалил кеш в браузере с помощью «Очистить всю историю»):

  • Когда страница загружается в первый раз, загружаются все изображения(и то же самое происходит, если я принудительно перезагружаю страницу, нажимая кнопку перезагрузки страницы в браузере).Это имеет смысл!

  • Когда я перехожу на сайт и возвращаюсь на ту же страницуизображения не загружаются вообще ибраузер даже НЕ запрашивает сервердля любого из изображений.В этом есть смысл (и я хотел бы видеть такое поведение также при закрытом браузере)!

  • Когда я закрываю браузер и снова открываю его на той же странице, глупый браузер все равно выполняет HTTP-запрос к серверу один раз для каждого изображения: он НЕ загружает изображение, но он все равно выполняет HTTP-запрос, это похоже на то, что браузер запрашивает сервер об изображении(сервер отвечает 200 OK).Это то, что меня раздражает!

Также прилагаю графики ниже, если вам интересно:

enter image description here

enter image description here

РЕДАКТИРОВАТЬ: только что протестировал сейчас также с FireFox 11.0, чтобы убедиться, что проблема не в том, что мой FireFox 3.6 слишком старый. То же самое происходит !!!Я также тестировал сайт Google и сайт Stackoverflow., они оба отправляютCache-Control: max-age=...нобраузер по-прежнему отправляет HTTP-запрос на сервер для каждого изображения после закрытия и повторного открытия браузера на той же странице, после ответа сервера браузер НЕ загружает изображение (как я объяснил выше), но он все равно делает чертов запрос, который увеличивает время просмотра страницы.

EDIT2: и удалениеLast-Modifiedзаголовок, как предлагаетсяВот, не решает проблему, это не имеет значения.

This question and all comments follow the "Attribution Required."

Все ответы

Translate

Вы использовали неправильный инструмент для анализа запросов.

Я бы порекомендовал действительно полезный аддон FirefoxЗаголовки HTTP в реальном временичтобы вы могли видеть, что на самом деле происходит в сети.

И, чтобы быть уверенным, вы можете ssh / putty свой сервер и сделать что-то вроде

tail -f /var/log/apache2/access.log
Источник
Translate

Наблюдаемое вами поведение является предполагаемым (см.RFC7234для более подробной информации), указанное поведение:

Все современные браузеры будут отправлять HTTP-запросы на сервер для каждого отображаемого элемента страницы, независимо от состояния кеша. Это дизайнерское решение было принято по запросу веб-сервисов (особенно рекламных сетей), чтобы гарантировать, что HTTP-серверы могут поддерживать записи каждого отображения каждого элемента.

Если бы браузеры не отправляли эти запросы, сервер никогда не получил бы уведомления о том, что изображение было показано пользователю. Для рекламных сетей это было бы катастрофой. Поначалу рекламные сети «взламывали» свой путь к этому, показывая одно и то же рекламное изображение с использованием случайно сгенерированных имен (например, «coke_ad_1_98719283719283.gif»). Однако для интернет-провайдеров такая практика привела к огромному увеличению объемов передачи данных, потому что каждый из их пользователей повторно загружал эти идентичные рекламные изображения, минуя любые кэширующие / прокси-серверы, с которыми работал их интернет-провайдер.

Таким образом, было достигнуто перемирие: браузеры всегда будут отправлять HTTP-запросы, даже для кешированных элементов с истекшим сроком действия. Серверы ответят кодами состояния HTTP 304 («не изменено»). Это позволяет серверам записывать тот факт, что изображение было показано клиенту. В результате рекламные сетив общем-топерестали использовать случайные имена изображений для обхода серверов сетевого кеша.

Это дало рекламным сетям то, что они хотели - запись каждого отображаемого изображения - и предоставило интернет-провайдерам то, что они хотели - кэшированные изображения и статический контент.

Вот почему вы мало что можете сделать, чтобы запретить браузерам отправлять HTTP-запросы для кешированных элементов страницы.

Но если вы посмотрите на другие доступные клиентские решения, которые поставляются вместе с html5, есть возможность предотвратить загрузку ресурсов.

  1. Кеш-манифест(несмотря на свои ошибки)
  2. IndexedDB(хорошие асинхронные функции, позволяет хранить большие двоичные объекты)
  3. Локальное хранилище(не асинхронно)
Источник
Translate

Есть разница между «перезагрузкой» и «обновлением». Простой переход на страницу с помощью кнопок «назад» и «вперед» обычно не инициирует новые HTTP-запросы, но нажатие клавиши F5 для «обновления» страницы заставит браузер дважды проверить свой кеш. Это зависит от браузера, но кажется нормой для FF и Chrome (т. Е. Браузеров, которые могут легко отслеживать свой сетевой трафик). Нажав F6, Enter должен сфокусировать адресную строку URL, а затем "перейти" к ней, что должно перезагрузите страницу, но не проверяйте ресурсы на странице дважды.

Обновить: уточнение поведения при навигации вперед и назад. Это называется "Back Forward Cache" илиBFCacheв браузерах. Когда вы перемещаетесь с помощью кнопок назад / вперед, цель состоит в том, чтобы показать вам именно то, что было на странице, когда вы видели ее на своей временной шкале. При использовании назад и вперед запросы к серверу не выполняются, даже если в заголовке кэша сервера указано, что срок действия определенного элемента истек.

Если вы видите (200 OK BFCache) на сетевой панели разработчика, значит, сервер никогда не был задействован - даже для запроса if-modified-Since.

http://www.softwareishard.com/blog/firebug/firebug-tip-what-the-heck-is-bfcache/

Источник
Translate

Если я принудительно обновляюсь с помощью F5 или F5 + Ctrl, отправляется запрос. Однако, если я закрою браузер и снова введу URL-адрес, запрос не будет отправлен. Я проверял, отправляется ли запрос или нет, с помощью точек останова при запросе на начало на сервере, даже если запрос не отправляется, он все равно отображается в Firebug как ожидание 7 мс, так что остерегайтесь этого.

Источник
Translate

То, что вы здесь описываете, не отражает мой опыт. Если контент обслуживается с помощью директивы no-store или вы выполняете явное обновление, то да, я бы ожидал, что он вернется на исходный сервер, иначе он должен быть кэширован при перезапуске браузера (при условии, что это разрешено и может писать файл кеша).

Если посмотреть на свои водопады более подробно (что сложно, потому что они немного маленькие и размытые), браузер, похоже, делает именно то, что должен - онимеетзаписи для изображений - но они только загружаютсяиз локального кешане с исходного сервера - проверьте заголовок «Дата» в ответе (как вы думаете, почему это занимает миллисекунды, а не секунды?). Поэтому они разного цвета.

Источник
Translate

Потратив много времени на поиск разумного ответа, я нашел приведенную ниже ссылку наиболее полезной, и она действительно отвечает на заданный здесь вопрос.

https://webmasters.stackexchange.com/questions/25342/headers-to-prevent-304-if-modified-since-head-requests

Источник
Translate

Если это вопрос жизни или смерти (если вы хотите оптимизировать загрузку страницы таким образом или если вы хотите максимально снизить нагрузку на сервер, несмотря ни на что), то ЕСТЬ обходной путь.

Использовать HTML5локальное хранилищедля кэширования изображений после того, как они были запрошены в первый раз.

  • [+]Вы можете запретить браузеру отправлять HTTP-запросы, которые в 99% вернут 304 (Not Modified), независимо от того, как сильно пользователь пытается (F5, ctrl + F5, просто повторное посещение страницы и т. Д.)

  • [-]Для этого вам нужно приложить дополнительные усилия для поддержки javascript.

  • [-]Изображения хранятся в base64 (мы не можем хранить двоичные данные), поэтому они каждый раз декодируются на стороне клиента. Которыйкак правилодовольно быстро и не имеет большого значения, но это все еще требует дополнительного использования ЦП на стороне клиента, и о нем следует помнить.

  • [-]Локальное хранилище ограничено. Вы можете стремиться использовать ~ 5 МБ данных на домен (Примечание: base64 добавляет ~ 30% к исходному размеру изображения).

  • [?]При поддержкебольшинствобраузеров.http://caniuse.com/#search=localstorage

пример

Контрольная работа

Источник
Translate

То, что вы видите в Chrome, - это не запись фактических HTTP-запросов - это запись запросов ресурсов. Chrome делает это, чтобы показать вам, что ресурс действительно запрашивается страницей. Однако это представление на самом деле не указывает, делается ли запрос. Если ресурс кэширован, Chrome никогда не создаст базовый HTTP-запрос.

Вы также можете подтвердить это, наведя курсор на фиолетовые сегменты на временной шкале. Кэшированные ресурсы будут иметь(from cache)во всплывающей подсказке.

Чтобы увидеть фактические HTTP-запросы, вам нужно посмотреть на более низкий уровень. В некоторых браузерах это можно сделать с помощью плагина (например, Live HTTP Headers).

На самом деле, чтобы убедиться, что запросы на самом деле не отправляются, вам нужно проверить журналы сервера или использовать прокси-сервер отладки, например Charles или Fiddler. Это будет работать на уровне HTTP, чтобы убедиться, что запросы на самом деле не выполняются.

Источник
Translate

Проверка кеша и ответ 304

Существует ряд ситуаций, в которых Internet Explorer необходимо проверить допустимость кэшированной записи:

  • Кэшированная запись не имеет срока годности, и доступ к контенту осуществляется впервые в сеансе браузера.

  • Кэшированная запись имеет срок действия, но срок ее действия истек.

  • Пользователь запросил обновление страницы, нажав кнопку «Обновить» или нажав F5.

Если кэшированная запись имеет дату последнего изменения, IE отправляет ее в заголовке If-Modified-Since сообщения запроса GET:

GET /images/logo.gif HTTP/1.1
Accept: */*
Referer: http://www.google.com/
Accept-Encoding: gzip, deflate
If-Modified-Since: Thu, 23 Sep 2004 17:42:04 GMT
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;)
Host: www.google.com

Сервер проверяет заголовок If-Modified-Since и отвечает соответствующим образом. Если содержимое не было изменено с указанной даты / времени, оно отвечает кодом состояния 304 и ответным сообщением, содержащим только заголовки:

HTTP/1.1 304 Not Modified
Content-Type: text/html
Server: GWS/2.1
Content-Length: 0
Date: Thu, 04 Oct 2004 12:00:00 GMT

Ответ можно быстро загрузить, поскольку он не содержит содержимого и заставляет IE читать требуемые данные из кеша. По сути, это похоже на перенаправление в локальный кеш браузера.

Если запрошенный объект действительно изменился с даты / времени в заголовке If-Modified-Since, сервер отвечает с кодом состояния 200 и предоставляет измененную версию ресурса.

Источник
Translate

На этот вопрос есть лучший ответВотна сайте обмена веб-мастерами.

Дополнительная информация, которая также цитируется по указанной выше ссылке, находится наhttpwatch

Согласно статье:

Существует ряд ситуаций, в которых Internet Explorer необходимо проверить допустимость кэшированной записи:

  • Кэшированная запись не имеет срока годности, и доступ к контенту осуществляется впервые в сеансе браузера.
  • Кэшированная запись имеет срок действия, но срок ее действия истек.
  • Пользователь запросил обновление страницы, нажав кнопку «Обновить» или нажав F5.

    введите код сюда

Источник
Leave a Reply
You must be logged in to post a answer.
Об авторе