可憐的人在 JavaScript 中的緩存

[TL;博士版本: 使用 cookie 來存儲非同步調用的結果; 立即呈現過去非同步調用的結果,然後在頁面載入後驗證它們。]

我一直在 SharePoint 的內聯網網站為用戶端的功能, 除其他事項外, 程式化的二級導航功能表選項都通過週期性老自訂清單管理。  想法是在用戶端獲取,不影響或受影響,由它推出的全球導航控制"他們的"網站的功能表.

(有件事令人難以置信顛覆有關添加指向一個 HTML 檔案,載入一些 CSS 和 JS,從根本上改變幾乎一切有關網站的行為......,但那是另一篇文章為 CEWP)

這個漂亮的簡單的代碼:

痛點在這裡是每次有人點擊該網站的頁面之一, 該使用者的 web 瀏覽器中伸出來獲取清單中的項。  一旦開發完成並測試已被證明是穩定和完整的東西, 此調用是不必要的多 99% 因為功能表中很少發生變化的時間。  它也有一個很奇怪的 UI 影響這是共同的在這個勇敢新世界超 ajaxy web 網站的 — — 頁上呈現,並只然後不會呈現在功能表。  它是緊張不安,我認為讓人分心。  和抖動. 所以, 緩存。 

我修改邏輯難耐:

  • 查找包含功能表中,如我上次讀取它的瀏覽器中的 cookie
    • 如果發現, 立即呈現它。  不要等待頁面完成載入。  (你需要確保你的 HTML 擺放在這裡, 但它並不難做).
  • 等待頁面完成載入,並進行非同步調用以載入了功能表項目從清單中使用休息或 lists.asmx 或不管
  • 比較我對 cookie
    • 如果它與匹配, 停止
    • 否則, 使用 jQuery 的, 如果動態填充一群 <李>中 <ul>
  • 使用 CSS 來做的所有格式
  • 利潤!

你們中的一些會說, "嘿! 沒有真正緩存會在這裡因為你反正讀功能表中 每一次.”  你說得對 — — 我不會給伺服器任何種類的斷裂。  但因為該調用是非同步和頁面的初始後會發生完全呈現 HTML 有效載荷, "感覺"更能回應使用者。  功能表中呈現漂亮一樣頁上繪製。  如果功能表中發生了變化, 使用者因此而遭受抖動重新繪製功能表, 但僅此一次.

有一些方法可以使此緩存功能更加有效和伺服器在同一時間幫忙:

  • 在"cookie 緩存"是有效的最低限度的規則中 24 小時或一些其他時限. 只要沒有過期的 cookie, 使用 cookie 的功能表快照和從來沒打伺服器.

哦那是所有現在我想說 :). 

如果任何人有任何聰明的想法在這裡我想要知道他們.

最後 — — 這種技術可以用於其他的東西。  此客戶機的頁的各種頁面都有一些資料驅動的事情, 其中許多不斷變化的相對較少 (像每週或每月一次).  如果您針對特定地區的功能, 您可以從本地 cookie 存儲拉內容並立即呈現給回應更快的使用者介面。  感覺速度更快,使用者即使不保存在伺服器任何週期。  你 可以 通過一些條件和觸發器決定廢除此 cookie 本機快取保存伺服器週期。  這就是所有情景和富有藝術氣息的東西和真正最大的樂趣 :). 

</結束>

undefined訂閱我的博客.

跟我在 Twitter 上 http://www.twitter.com/pagalvin

一個念頭在“可憐的人在 JavaScript 中的緩存

  1. Jonathan 魯塞爾

    嗨保羅,

    很好的執行, 這就是我們使用的東西,但我們使用 HTML5 本機存放區 API 而不是餅乾. 第一個磁碟機就是我們需要存儲 cookie 可以讓更多的. 但一個額外的好處是它不會增加有效載荷, 而 cookie 會被來回發送. 從開發的角度,它是很容易使用.
    瀏覽器支援是不完美但老實說很好, http://caniuse.com/namevalue-storage .

    喬納森 ·

    答覆

留言

您的電子郵件地址不會被公開. 必需的地方已做標記 *