Бедный человек при кэшировании в JavaScript

[TL;Д-р версии: Используйте cookies для хранения результатов асинхронных вызовов; немедленно отображать результаты последних асинхронных вызовов, а затем проверить их после загрузки страницы.]

Я работаю на сайте интрасети SharePoint для клиента, что особенности, среди прочего, стилизованные вторичных навигации, чьи параметры меню управляются через регулярные старый пользовательский список.  Идея заключается в том, что клиент получает для управления меню «их» сайта не затрагивая или под воздействием глобальной навигации, потушить его.

(есть что-то невероятно подрывной о добавлении CEWP, указывающий на файл HTML, который загружает некоторые CSS и JS, чтобы коренным образом изменить почти все о сайте поведение..., но это для другой должности)

Код для этой довольно простой:

  • Ждать окончания загрузки и сделать асинхронный вызов загружать элементы меню из списка с помощью отдыха или lists.asmx или любой другой страницы
  • С помощью jQuery, динамически заполнять кучу, если <ли>в внутри родительского <UL> (Кристиан Пиндер в статье здесь упрощенное объяснение этой tecnnique)
  • Используйте CSS, чтобы делать все форматирование
  • Прибыль!

Больное место здесь является то, что каждый раз, когда кто-нибудь хитов одной из страниц сайта, веб-браузер пользователя выходит для получения элементов из списка.  После того, как dev, является полной и тестирования доказал вещи, чтобы быть стабильной и полной, Этот вызов не требуется более чем 99% времени, так как меню редко меняется.  Она также имеет странно влияют на пользовательский интерфейс, который является общим в этом дивном новом мире гипер ajaxy веб-сайтов – страница отображает и только тогда меню визуализации.  Это нервный и отвлекает на мой взгляд.  И нервный. Таким образом, кэширование. 

Я изменил логику константы выглядит так:

  • Найдите файл cookie в браузер, который содержит меню, как прошлый раз
    • Если найдено, сделать это немедленно.  Не ждите окончания загрузки страницы.  (Вам нужно убедиться, что ваш HTML стратегически размещены здесь, но это не трудно сделать).
  • Ждать окончания загрузки и сделать асинхронный вызов загружать элементы меню из списка с помощью отдыха или lists.asmx или любой другой страницы
  • Сравните, что я получил от cookie
    • Если он соответствует, ОСТАНОВКА
    • В противном случае, с помощью jQuery, динамически заполнять кучу, если <ли>в в <UL>
  • Используйте CSS, чтобы делать все форматирование
  • Прибыль!

Некоторые из вас собираетесь сказать, «Эй! Существует без реальных кэширования происходит здесь, так как вы читаете меню все равно Каждый раз.”  И вы правы-я не давая сервера любого вида отдыха.  Но поскольку вызов асинхронного и происходит после начальной страницы HTML полезной нагрузки полностью оказывает, Он «чувствует» более чутко для пользователя.  Меню предоставляет довольно много, как рисует страницы.  Если меню происходит с изменением, пользователь подвергается нервным повторно нарисуйте меню, но только что один раз.

Есть несколько способов сделать это кэширование более эффективной и в то же время помочь сервера:

  • В правиле, что «кэш cookie» действительна как минимум в 24 часов или некоторые другие сроки. Пока не истек файл cookie, Используйте снимок меню файла cookie и никогда не ударил сервера.

Ну..., вот и все, что приходит на ум прямо сейчас :). 

Если кто имеет какие-либо умные идеи здесь я бы хотел знать их.

И наконец – этот метод может использоваться для других вещей.  Этот клиент страница имеет ряд вещей с данными на различных страницах, Многие из них меняется относительно редко (как раз в неделю или раз в месяц).  Если вы имеете конкретные области функциональности, Вы можете дать более реагировать пользовательского интерфейса, потянув содержимое из хранилища локального файла cookie и рендеринга немедленно.  Он чувствует быстрее для пользователя, даже если вы не сохраняете сервере никаких циклов.  Вы можно Сохраните циклы сервера недействительным кэш локального файла cookie, решив на некоторых условий и триггеры.  Это все ситуационных и вычурные вещи и действительно самое веселое :). 

</конец>

undefinedПодписаться на мой блог.

Следуй за мной по щебетать на http://www.twitter.com/pagalvin

Одна мысль на "Бедный человек при кэшировании в JavaScript

  1. Jonathan Руссель

    Привет Павел,

    Хорошая реализация, Это то, что мы используем, но мы использовали локального хранилища HTML5 API вместо печенья. Первый диск был, что нам необходимо хранить больше чем cookie может позволить. Но дополнительным преимуществом является, что она не увеличивает полезных нагрузок, Хотя куки отправляются туда и обратно. С точки зрения dev это очень проста в использовании.
    Поддержка браузера не является совершенным, но честно очень хорошо, http://caniuse.com/namevalue-storage .

    Джонатан

Оставь ответ

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *