Tag Archives: Cache

Caching Man Poor dalam JavaScript

1 Balas

[TL;DR versi: menggunakan cookies untuk menyimpan keputusan panggilan async; menyebabkan keputusan lepas async panggilan dengan serta-merta dan kemudian mengesahkan mereka selepas Laman-load.]

Saya telah bekerja pada tapak SharePoint intranet untuk pelanggan yang mempunyai, antara lain, pelayaran sekunder stylized opsyen menu yang diuruskan melalui senarai tersuai lama tetap.  Ideanya adalah bahawa pelanggan mendapat untuk mengawal menu Laman "mereka" tanpa mempengaruhi atau dipengaruhi oleh navigation global yang menghulurkan olehnya.

(ada sesuatu yang sangat subversif tentang menambah CEWP yang menghala ke fail HTML yang memuatkan beberapa CSS dan JS pada asasnya mengubah hampir segala-galanya mengenai kelakuan tapak... tapi itu untuk jawatan lain)

Kod ini sederhana cantik:

Di sini tempat yang sakit adalah bahawa setiap kali sesiapa terkena salah satu muka surat Laman web ini, pelayar web pengguna itu mendekati untuk mendapatkan item dari senarai.  Sebaik sahaja dev adalah lengkap dan ujian telah terbukti semuanya menjadi stabil dan lengkap, panggilan ini adalah tidak perlu lebih daripada 99% masa kerana menu yang jarang berubah.  Ia juga telah mempengaruhi UI pelik yang biasa dalam dunia baru berani ini laman web hyper-ajaxy – membuat halaman dan barulah tidak menu menyebabkan.  Ia adalah jittery dan mengganggu dalam pandangan saya.  Dan jittery. Jadi, cache. 

Saya kali logik Ehwal:

  • Mencari kuki dalam penyemak imbas yang mengandungi menu seperti aku terakhir membaca ia
    • Jika didapati, menyebabkan ia dengan serta-merta.  Jangan tunggu untuk laman untuk memuatkan selesai.  (Anda perlu pastikan anda HTML strategik diletakkan di sini, tetapi ia tidak sukar untuk dilakukan).
  • Tunggu sehingga halaman selesai loading dan membuat async untuk hubungi untuk memuatkan semua item menu daripada senarai menggunakan rehat atau lists.asmx atau apa-apa
  • Bandingkan apa yang saya dapat menentang cookie
    • Jika ia sepadan, BERHENTI
    • Jika tidak, menggunakan jQuery, dinamik penduduk sekumpulan jika <li>di dalam sebuah <st>
  • Menggunakan CSS untuk melakukan semua format
  • Keuntungan!

Ada di antara kamu akan berkata, "Hei! Terdapat tiada nyata caching berlaku di sini kerana anda sedang membaca menu juga setiap kali."  Dan kau betul-betul-aku tidak memberikan pelayan mana-mana jenis cuti.  Tetapi kerana panggilan async dan berlaku selepas halaman yang awal HTML muatan penuh membuat, "rasanya" lebih responsif kepada pengguna.  Menu membuat agak banyak yang menarik di laman.  Jika menu yang berlaku kepada perubahan, pengguna adalah tertakluk kepada yang jittery semula menarik Menu, tetapi hanya itu satu-satu masa.

Terdapat beberapa cara untuk membuat cache ini lebih berkesan dan membantu pelayan pada masa yang sama:

  • Dimasukkan ke dalam peraturan bahawa "cookie cache" adalah sah untuk sekurang-kurangnya 24 jam atau beberapa tempoh lain. Selagi terdapat tidak ada cookie yang tamat tempoh, menggunakan cookie's menu petikan dan Jangan sekali-kali memukul pelayan.

Well... itu semua yang datang ke fikiran sekarang :). 

Jika sesiapa yang mempunyai sebarang idea yang bijak di sini saya ingin tahu mereka.

Dan akhir sekali – teknik ini boleh digunakan untuk hal-hal lain.  Laman pelanggan ini mempunyai beberapa perkara dipacu data pelbagai halaman, ramai di antara mereka menukar agak jarang (seperti seminggu sekali atau sebulan sekali).  Jika anda menyasarkan bidang-bidang tertentu fungsi, anda boleh memberi UI yang lebih responsif dengan menarik kandungan dari kedai kuih tempatan dan memberi serta-merta.  Rasanya lebih cepat kepada pengguna walaupun anda bukan sedang menyelamatkan pelayan kitaran mana-mana.  Anda boleh Simpan kitaran pelayan dengan memutuskan mengenai beberapa syarat dan pencetus untuk mentaksahkan cache tempatan kuih ini.  Itulah semua situasional dan barangan artsy dan benar-benar yang paling menyeronokkan :). 

</akhir>

undefinedLanggan ke blog saya.

Mengikuti aku di Twitter http://www.twitter.com/pagalvin