CSS + Javascript кеширование правильно; желая предотвратить перерисовку глобальных элементов страницы

Question

Заранее извиняюсь, если это окажется вопросом новичка. На данный момент мое основное разочарование / забвение проистекает из абсолютно запутанного характера поиска моей конкретной проблемы.

Я использую различные правила htaccess, чтобы гарантировать, что мои css, css изображения и файлы javascript кэшируются. Основываясь на ответах заголовка, которые я получаю в своей сетевой панели Firebug, я уверен, что этот метод работает.

То, что я преследую, после успешного кэширования, это способ предотвратить перерисовку глобальных элементов сайта (заголовок, меню и т. Д.) При переходе от страницы к странице. Это явление прекрасно выражено на следующих сайтах:

http://www.alistapart.com/

jessicahisch - точка - com также является ярким примером.

Обратите внимание, что при переходе из раздела в раздел, публикации в публикацию, в любом месте и в любом месте (с одинаковым глобальным макетом) единственными частями страницы, которые обновляются / перерисовываются, являются элементы, уникальные для этой целевой страницы.

Как правило, я бы объяснил это спецификой браузера (например, Safari подделывает это явление довольно хорошо, независимо от способа реализации, разработанного разработчиками, в то время как Firefox кажется немного менее прощающим), однако эти два сайта, в частности, абсолютно последовательны в своей схеме загрузки страниц на страницу.

В моем собственном примере сайта это дрянь. Когда я думаю, что все работает так, как я хочу, я получу страницу перезагрузить / перерисовать / перестроить. Изучение панели NET показывает, что это происходит независимо от того, загружены мои внешние ресурсы CSS / Image или нет.

Я включил правила, которые я использую, в свои файлы htaccess для справки.

Большое спасибо заранее за помощь в этом каверзном вопросе. Хотя ответ очень ценится, приветствуются даже предложения по эффективному поиску этой проблемы в сети.

#### CACHING ####
# YEAR
<FilesMatch "\.(flv|gif|jpg|jpeg|png|ico)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
# WEEK
<FilesMatch "\.(js|css|pdf|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# 10 minutes
<FilesMatch "\.(html|htm|txt)$">
Header set Cache-Control "max-age=600"
</FilesMatch>
# DONT CACHE
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header set Cache-Control "private, max-age=0, must-revalidate"
Header set Connection "keep-alive"
# Header set Pragma "cache"
</FilesMatch>

<FilesMatch "\.(ico|pdf|flv|jpg|JPG|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

# enable expirations
ExpiresActive On
# expire GIF images after a month in the client's cache
ExpiresByType image/gif A2592000
# HTML documents are good for a week from the
# time they were changed
ExpiresByType text/html M604800 
# expire CSS images after a month in the client's cache
ExpiresByType text/css A2592000

RewriteRule css[\.][0-9]+/(.*)$ css/$1 [L]

Answer 1

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

По этой причине кажется, что он не перерисовывается.

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

Answer 2

Хорошо. Так что я чувствую, что, возможно, понял это. Благодаря вам. Я спросил:

«Мой след настолько низок, насколько я думаю?»

И вот я начал удалять свои внешние файлы, один за другим. На самом деле, кусок за кусок. Я удалил свои файлы CSS, без изменений. Я удалил мои файлы JS, измени.

Поэтому я добавил свои библиотечные файлы обратно (MooTools) и сохранил «сохраняющиеся». Я добавил обратно в некоторые из моих файлов плагинов (squeezebox и т. Д.), И все же все выглядело хорошо.

Затем я добавил sifr обратно. По-видимому, это был виновник.

По сути, ALA и Jessicahische не используют эту библиотеку замены флэш-текста. Это также имеет смысл: sifr добавляет классы и идентификаторы в тег onload тела, что .... ну, это не сложно, когда вы (я) думаете об этом.

Итак, поехали. Я открою обратно, если окажется, что я неправ.

Спасибо. - снова

Answer 3

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

Единственный способ предотвратить это - использовать <frame> s, что является серьезным недостатком и делает его действительно неловким для людей, ссылающихся на определенные страницы вашего сайта, на чем основывается сеть.

Я подозреваю, что на двух сайтах, которые вы упоминаете, они просто загружаются так быстро, что вы не чувствуете, что это разные страницы.