Orang miskin di Caching di JavaScript

[TL;DR versi: menggunakan cookies untuk menyimpan hasil async panggilan; membuat hasil masa lalu async panggilan segera dan kemudian memvalidasi mereka setelah beban halaman.]

Saya telah bekerja pada situs SharePoint intranet untuk klien yang fitur, di antara hal lain, navigasi sekunder yang bergaya pilihan menu yang dikelola melalui daftar kustom tua biasa.  Idenya adalah bahwa klien mendapatkan untuk mengontrol menu situs "mereka" tanpa mempengaruhi atau sedang dipengaruhi oleh navigasi global yang dikeluarkan oleh itu.

(ada sesuatu yang sangat subversif tentang menambahkan CEWP yang menunjuk ke sebuah file HTML yang memuat beberapa CSS dan JS untuk secara fundamental mengubah hampir segala sesuatu tentang perilaku situs... tapi itu untuk pos lain)

Kode untuk ini cukup sederhana:

Sini tempat sakit adalah bahwa setiap kali ada hits salah satu halaman situs, browser web pengguna yang menjangkau untuk mendapatkan item dari daftar.  Setelah dev lengkap dan pengujian telah membuktikan hal-hal yang stabil dan lengkap, panggilan ini tidak perlu lebih dari 99% waktu sejak menu jarang berubah.  Ini juga memiliki mempengaruhi UI aneh yang umum dalam ini dunia baru yang berani situs web hiper-ajaxy-halaman menulisnya dan hanya kemudian membuat menu.  Sangat gelisah dan mengganggu dalam pandangan saya.  Dan gelisah. Jadi, caching. 

Aku diubah logika thusly:

  • Mencari cookie di browser yang berisi menu aku terakhir membacanya
    • Jika ditemukan, membuat itu segera.  Jangan menunggu untuk halaman untuk selesai loading.  (Anda perlu memastikan bahwa HTML Anda ditempatkan secara strategis di sini, Tapi itu tidak sulit untuk dilakukan).
  • Menunggu halaman selesai loading dan membuat async panggilan untuk memuat menu item dari daftar menggunakan sisa atau lists.asmx atau apa pun
  • Membandingkan apa yang saya Dapatkan terhadap cookie
    • Jika cocok, Stop
    • Jika tidak, menggunakan jQuery, dinamis mengisi setumpuk jika <Li>di dalam <UL>
  • Gunakan CSS untuk melakukan semua format
  • Keuntungan!

Beberapa dari Anda akan mengatakan, "Hei! ada tidak ada nyata caching terjadi di sini karena Anda sedang membaca menu tetap setiap kali.”  Dan kau benar-aku tidak memberikan server jenis istirahat.  Namun karena panggilan async dan terjadi setelah halaman awal muatan HTML sepenuhnya menuliskan, ia "merasa" lebih responsif terhadap pengguna.  Menu menuliskan cukup banyak seperti halaman yang menarik.  Jika menu terjadi perubahan, pengguna terkena gelisah menggambar ulang menu, tetapi hanya satu kali.

Ada beberapa cara untuk membuat ini caching lebih efektif dan membantu keluar server pada saat yang sama:

  • Dimasukkan ke dalam aturan "cookie cache" itu berlaku untuk minimal 24 jam atau beberapa jangka waktu lain. Selama ada kuki tidak kedaluwarsa, menggunakan cookie menu snapshot dan tidak pernah memukul server.

Yah... itu semua yang datang ke pikiran sekarang :). 

Jika seseorang memiliki ide-ide cerdas di sini saya ingin tahu mereka.

Dan terakhir-teknik ini dapat digunakan untuk hal-hal lain.  Halaman ini klien memiliki sejumlah hal data-driven pada berbagai halaman, banyak dari mereka mengubah relatif jarang (seperti satu minggu sekali atau sebulan sekali).  Jika Anda menargetkan daerah tertentu dari fungsi, Anda dapat memberikan UI lebih responsif dengan konten menarik dari toko lokal cookie dan rendering segera.  Rasanya lebih cepat kepada pengguna bahkan jika Anda tidak menyelamatkan server setiap siklus.  Anda dapat Simpan siklus server oleh memutuskan pada beberapa kondisi dan memicu untuk membatalkan cache lokal cookie ini.  Itulah semua situasional dan barang-barang berseni dan benar-benar yang paling menyenangkan :). 

</akhir>

undefinedBerlangganan ke blog saya.

Ikuti saya di kegugupan di http://www.twitter.com/pagalvin

Satu berpikir tentang “Orang miskin di Caching di JavaScript

  1. Jonathan Roussel

    Hi Paulus,

    Implementasi bagus, itu adalah sesuatu yang kita gunakan tetapi kami digunakan penyimpanan lokal HTML5 API bukan cookie. Perjalanan pertama ini bahwa kami perlu untuk menyimpan lebih dari cookie dapat memungkinkan. Tetapi manfaat tambahan adalah bahwa itu tidak meningkatkan muatan, Sedangkan cookie dikirim bolak. Dari sudut pandang dev sangat mudah digunakan.
    Dukungan browser ini tidak sempurna tapi jujur cukup baik, http://caniuse.com/namevalue-storage .

    Jonathan

    Balasan

Tinggalkan balasan

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *