HTML5 yerel depolamayı CSS ve JavaScript depolamak için kullanmak gerçekçi midir?

Buradaki fikir, sık erişilen CSS ve JavaScript'i depolamak için HTML5 yerel depolama alanını kullanmaktır.

Örneğin (sözde kodu):

var load_from_cdn = true;
eğer (yerel depolamayı algıla)  
{
  if (css önbelleği, js bulundu)
  {
     yerel depolama önbelleğini yükle
     load_from_cdn = false;
  }
}
eğer (load_from_cdn)
{
   document.write ( '<script> ...');
}

Bu mümkün mü yoksa gerçekçi mi?

Tarayıcı önbelleğinin farkındayım, hala bazı üstbilgi erişim denetimi olacak,
hiçbir HTTP erişiminin daha iyi olmadığını varsayıyoruz (benim düşünceme göre )

Not: Yerel depolamanın sadece anahtar / değer çiftini desteklediği anlaşılıyor , birisi kanıtlayabilir mi?
(bazı örneklerde en iyisi)

JS ve CSS'yi depolamak için yerel depolamayı kullanmak kesinlikle sorun değildir. Ancak, yerel depolama alanı etki alanı sınırlaması başına 5M'ye sahiptir. Bu stratejiyi tekrar gözden geçirmeniz gerekebilir.

Masaüstü web için, hile yapmak için varsayılan tarayıcı önbelleğinden yararlanabilirsiniz. Sadece önbelleğe alınabilecek şekilde JS ve CSS HTTP yanıtını ayarlayın. Çok basit ve kolaydır.

Mobil web için gecikme süresi yüksektir. Bu nedenle, HTTP isteklerini azaltmak çok önemlidir. Bu nedenle, dış URL'lerde JS & CSS'ye sahip olmak en uygunudur. JS & CSS satır içi olması çok daha iyi olurdu. Bu, HTTP isteklerini azaltır, ancak HTML içeriğini şişirir. Sonra ne? Söylediğin gibi, yerel depoları kullan!

Bir tarayıcı siteyi ilk kez ziyaret ettiğinde, JS & CSS satır içi eklenir. JS'nin iki işi daha var: 1) JS & CSS'yi yerel depoda saklayın; 2) Tanımlama bilgisini JS ve CSS'nin yerel depoda olduğunu işaretlemek için ayarlayın.

Tarayıcı siteye ikinci kez eriştiğinde, sunucu çerezi aldı ve tarayıcının zaten ilgili JS & CSS'ye sahip olduğunu biliyordu. Böylece render HTML, JS ve CSS'yi yerel depolamadan okumak ve DOM ağacına eklemek için satır içi JS'ye sahiptir.

Bing.com mobil versiyonunun nasıl oluşturulduğuna dair temel bir fikirdir. Üretimde uygularken JS & CSS versiyon kontrolünü dikkate almanız gerekebilir.

Teşekkürler

Tarayıcı zaten bunu sizin için yapmıyor mu ve muhtemelen daha iyi?

Amaç ne?

İstemci tarafında önbellekleme adı verilen iyi bilinen bir teknik zaten var. HTML5 yerel depolaması bu durumda ne önbelleğe almanın eksik olduğunu getirir?

JavaScript kod parçalarını dinamik olarak yüklemesi gereken garip bir uygulamanız olabilir, böylece önbelleği etkin bir şekilde kullanamazsınız, ancak bu oldukça nadir bir durumdur.

Ayrıca, başka bir şeyin farkında olun. Tarayıcıların önbellek için belirli politikaları vardır ve çoğu tarayıcı önbelleği iyi yönetmede oldukça iyidir (yalnızca eski içeriği kaldırarak vb.). Ev yapımı önbelleğinizi uygulayarak, tarayıcıların doğru yönetmesini önlersiniz. Sadece kendi başına eleştirilebilir, aynı zamanda yakında veya sonra sizi de incitir. Örnek: Bir web uygulamasının kullanıcıları hataları bildirirken genellikle önbelleklerini temizlemelerini isteyerek cevap verirsiniz. Durumunuzda ne isteyeceğinizden emin değilim, çünkü önbelleği temizlemek web uygulamanızla ilgili sorunları hiçbir zaman çözmez.

İlk düzenlemenize yanıt olarak (ikinci düzenlemeniz konu dışı):

Tarayıcı önbelleğinin farkındayım, hala bazı başlık erişim kontrolü olacak

Tarayıcı önbelleğe alma konusunda bazı anlayışınız yok gibi görünüyor. Bu nedenle , kendi ev yapımı önbelleğe alma mekanizmanızı uygulamaya başlamadan önce, ilk önce nasıl çalıştığını anlamak önemlidir . Kendi tekerlekinizi sadece mevcut tekerlekleri yeterince anlayınca ve kullanmamak için iyi bir nedeniniz olduğunda yeniden icat edin. "Tekerleği yeniden icat etme ve pişman etme DEĞİL" sorusuna verdiğim cevabın 1. maddesine bakınız .

HTTP üzerinden bazı veriler sağlarken, önbellekle ilgili birkaç başlık belirleyebilirsiniz:

• Last-Modified İçeriğin ne zaman değiştirildiğini belirtir.
• Expiresiçeriğin değiştiğini tarayıcının sunucuya ne zaman sorması gerektiğini belirtir .

Bu iki başlık tarayıcının şunları yapmasına izin verir:

• İçeriği tekrar tekrar indirmekten kaçının. Eğer Last-Modifiedgeçen aya ayarlanır ve içerik zaten birkaç saat önce bugün indirildi, tekrar indirmeniz gerek yoktur.
• Dosyanın en son değiştirildiği tarihi sorgulamaktan kaçının. Eğer Expiresbir önbellek varlığın 5 Mayıs olan ^inci , herhangi GET isteği gerekmez 2014 ne 2011 yılında ne de 2012 ya da 2013 yılında, önbellek kadar güncel olduğunu biliyoruz çünkü.

İkincisi CDN'ler için esastır. Google sunulduğunda JQuery yığın taşması bir ziyaretçiye veya cdn.sstatic.netyığın taşması tarafından kullanılan görüntüleri veya stil vermektedir, yeni bir sürümü her zaman için sorguya tarayıcıları istemiyoruz. Bunun yerine, bu dosyaları bir kez sunuyorlar, son kullanma tarihini yeterince uzun bir şeye ayarlayın ve hepsi bu.

İşte örneğin Stack Overflow ana sayfasına geldiğimde neler olup bittiğini gösteren bir ekran görüntüsü:

Sunacak 15 dosya var. Fakat tüm bu 304 Not Modifiedtepkiler nerede ? Yalnızca değişen üç içerik isteğiniz var. Her şey için, tarayıcı önbelleğe alınmış sürümü herhangi bir sunucuya herhangi bir talepte bulunmadan kullanır .

Sonuç olarak, kendi önbellek mekanizmanızı uygulamadan önce iki kez düşünmeniz ve özellikle bunun yararlı olabileceği iyi bir senaryo bulmanız gerekir . Cevabımın başında söylediğim gibi, sadece bir tane bulabilirim: Onları kullanmak için JavaScript parçalarını sunmakta olduğunuz OMG eval(),. Ancak bu durumda, her ikisinden de daha iyi yaklaşımların olduğuna eminim:

• Standart önbellek tekniklerini kullanarak daha etkili, veya
• Bakımı daha kolaydır.

İstemci tarafında yerel önbellekleme, HTML5 yerel depolaması kullanmaktan çok daha optimize edilmiş olmalıdır. Javascript ve CSS’nizin harici önbellek dosyalarında olduğundan ve sayfanızın tarayıcı önbelleği yoluyla yerel depolama alanından ayıklamak ve kendiniz yürütmek yerine çok daha hızlı yüklenmesini sağlamanız yeterlidir.

Ayrıca, sayfa yüklenmeye başladığında tarayıcı dış kaynakları yüklemeye başlayabilir, daha önce kaynaklarınızı HTML5 yerel depolama alanından almak için bu sayfada javascript çalıştırmaya başlayabilirsiniz.

Ayrıca, HTML5 yerel depolama alanından yüklemek için yine de sayfadaki koda ihtiyacınız var, bu nedenle tüm JS'nizi harici, önbelleklenebilir bir JS dosyasına koyun.

Tekerleği yeniden icat etmek yerine, yalnızca HTML5 çevrimdışı işlevini kullanın: http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

Google’ın kod kütüphanesi gibi bir içerik dağıtım ağı (CDN) kullanarak daha iyi performans elde edersiniz . Düşünceli bir şekilde planlanmış, JS ve CSS'nizin çoğunluğu sitenizi ilk defa ziyaret etmeden önce her ziyaretçinin önbelleğinde olmalıdır. Kalanı küçültün.

Tarayıcı önbelleğini her zaman elle haddelenmiş HTML5 çözümünüzle kıyaslayabilirsiniz. Ama benim iddiam, yerel önbelleklemenin pantolonunu yeneceği yönünde.

LocalStorage kullanımı hızlıdır (er)! Testim gösterdi

• CDN'den jQuery yükleniyor: Chrome 268ms , FireFox: 200ms
• LocalStorage'dan jQuery yükleniyor: Chrome 47ms , FireFox 14ms

Sanırım HTTP isteğini kaydetmek zaten büyük bir hız avantajı getiriyor. Buradaki herkes tam tersi için mahkum olmuş gibi görünüyor, bu yüzden lütfen yanlış olduğumu kanıtla.

Sonuçlarımı test etmek istiyorsanız, scriptleri localStorage içinde önbelleğe alan küçük bir kütüphane oluşturdum. Github https://github.com/webpgr/cached-webpgr.js adresinden kontrol edin ya da aşağıdaki örnekten kopyalayın.

Tam kütüphane:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

Kütüphaneyi çağırmak

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});