Tarayıcı tedarikçileri ve web performansı uzmanları, son on yılın büyük bir bölümünde localStorage'un yavaş olduğunu ve web geliştiricilerin bunu kullanmayı bırakması gerektiğini söylüyordu.
Dürüst olmak gerekirse, bunu söyleyenler haksız değil. localStorage, ana iş parçacığını engelleyen senkronize bir API'dir ve bu API'ye her eriştiğinizde sayfanızı etkileşimli olmaktan alıkoyabilirsiniz.
Sorun şu ki localStorage API'si çok cazip bir şekilde basittir ve localStorage'e tek alternatif olan IndexedDB, kullanım kolaylığı veya kullanıcı dostu API'si ile tanınmaz.
Bu nedenle geliştiriciler, kullanımı zor olan ve performansı olumsuz etkileyen bir seçenek arasında seçim yapmak zorunda kalır. Arka planda aslında asenkron depolama API'lerini kullanırken localStorage API'sinin basitliğini sunan kitaplıklar var. Ancak uygulamanıza bu kitaplıklardan birini dahil etmek dosya boyutu maliyeti doğurur ve performans bütçenizi etkileyebilir.
Ancak dosya boyutu maliyetini ödemek zorunda kalmadan, localStorage API'nin basitliğiyle birlikte asenkron depolama API'sinin performansını elde etmek mümkün olsaydı ne olurdu?
Yakında olabilir. Chrome, yerleşik modüller olarak bilinen yeni bir özellik üzerinde denemeler yapıyor. Kullanıma sunmayı planladığımız ilk özellik, KV Depolama adlı bir eşzamansız anahtar/değer depolama modülüdür.
Ancak KV Depolama modülünün ayrıntılarına geçmeden önce yerleşik modüller derken neyi kastettiğimi açıklamak istiyorum.
Yerleşik modüller nedir?
Yerleşik modüller, tarayıcı ile birlikte gönderildikleri için indirilmeleri gerekmediği dışında normal JavaScript modülleri ile aynıdır.
Yerleşik modüller, geleneksel web API'leri gibi bir standartlaştırma sürecinden geçmelidir. Her birinin, kullanıma sunulmadan önce tasarım incelemesi ve hem web geliştiricilerinden hem de diğer tarayıcı tedarikçilerinden destek alması gereken kendi spesifikasyonu vardır. (Chrome'da yerleşik modüller, tüm yeni API'leri uygulamak ve kullanıma sunmak için kullandığımız ilk kullanım sürecini izler.)
Yerleşik modüller, geleneksel web API'lerinin aksine genel kapsamda gösterilmez. Yalnızca içe aktarma yoluyla kullanılabilir.
Yerleşik modüllerin dünya genelinde gösterilmemesi birçok avantaja sahiptir: Yeni bir JavaScript çalışma zamanı bağlamı (ör. yeni bir sekme, işleyici veya hizmet işleyici) başlatırken ek yükü olmaz ve gerçekten içe aktarılmadıkları sürece bellek veya CPU tüketmezler. Ayrıca, kodunuzda tanımlanan diğer değişkenlerle ad çakışması riski de yoktur.
Yerleşik bir modülü içe aktarmak için std: ön ekini ve ardından yerleşik modülün tanımlayıcısını kullanırsınız. Örneğin, desteklenen tarayıcılarda KV Storage modülünü aşağıdaki kodla içe aktarabilirsiniz (desteklenmeyen tarayıcılarda KV Storage polyfill'ini kullanma hakkında bilgi için aşağıya bakın):
import storage, {StorageArea} from 'std:kv-storage';
KV Depolama modülü
KV Storage modülü, basitliği açısından localStorage API'ye benzer ancak API şekli aslında JavaScript Map'e daha yakındır.
getItem(),
setItem() ve removeItem() yerine get(),
set() ve delete() kullanılmıştır.
Ayrıca localStorage'te kullanılamayan keys(), values() ve entries() gibi haritaya benzer başka yöntemleri de vardır. Map gibi, anahtarlarının dize olması gerekmez. Herhangi bir yapılandırılmış-serileştirilebilir tür olabilirler.
Map'ün aksine, tüm KV Storage yöntemleri promise veya asynchronize iteratör döndürür (bu modülün ana özelliği, localStorage'in aksine senkronize olmamasıdır). API'nin tamamını ayrıntılı olarak görmek için özelliğe göz atabilirsiniz.
Yukarıdaki kod örneğinde de görebileceğiniz gibi, KV Storage modülünde bir varsayılan dışa aktarma işlemi storage ve bir adlandırılmış dışa aktarma işlemi StorageArea vardır.
storage, 'default' adlı StorageArea sınıfının bir örneğidir ve geliştiricilerin uygulama kodlarında en sık kullanacağı öğedir. StorageArea sınıfı, ek izolasyonun gerekli olduğu durumlar için sağlanır (ör. verileri depolayan ve varsayılan storage örneği aracılığıyla depolanan verilerle çakışmayı önlemek isteyen üçüncü taraf kitaplığı). StorageArea verileri, kv-storage:${name} adlı bir IndexedDB veritabanında depolanır. Burada ad, StorageArea örneğinin adıdır.
KV Depolama modülünün kodunuzda nasıl kullanılacağına dair bir örnek aşağıda verilmiştir:
import storage from 'std:kv-storage';
const main = async () => {
const oldPreferences = await storage.get('preferences');
document.querySelector('form').addEventListener('submit', async () => {
const newPreferences = Object.assign({}, oldPreferences, {
// Updated preferences go here...
});
await storage.set('preferences', newPreferences);
});
};
main();
Bir tarayıcı yerleşik modülü desteklemiyorsa ne olur?
Tarayıcılarda yerel JavaScript modüllerini kullanma konusunda bilginiz varsa URL dışındaki herhangi bir öğenin içe aktarılmasının (en azından şimdiye kadar) hata oluşturacağını muhtemelen biliyorsunuzdur. std:kv-storage geçerli bir URL değil.
Bu da şu soruyu gündeme getiriyor: Kodumuzda yerleşik modülleri kullanabilmemiz için tüm tarayıcıların yerleşik modülleri desteklemesini mi beklememiz gerekiyor? Neyse ki hayır.
Harita içe aktarma adlı denediğimiz başka bir özellik sayesinde, yerleşik modülleri tek bir tarayıcı desteklediğinde bile kullanabilirsiniz.
Haritaları içe aktarma
İçe aktarma eşlemeleri, temelde geliştiricilerin içe aktarma tanımlayıcılarını bir veya daha fazla alternatif tanımlayıcıyla takma adlandırabileceği bir mekanizmadır.
Bu, tarayıcının uygulamanızın tamamında belirli bir içe aktarma tanımlayıcısını nasıl çözdüğünü (çalışma zamanında) değiştirmenizi sağladığı için güçlü bir özelliktir.
Yerleşik modüller söz konusu olduğunda bu, uygulama kodunuzda modülün bir polyfill'ine referans vermenize olanak tanır. Ancak yerleşik modülü destekleyen bir tarayıcı, bunun yerine ilgili sürümü yükleyebilir.
Bu işlemi KV Depolama modülüyle çalıştırmak için bir içe aktarma haritası nasıl tanımlayacağınızı aşağıda bulabilirsiniz:
<!-- The import map is inlined into your page -->
<script type="importmap">
{
"imports": {
"/path/to/kv-storage-polyfill.mjs": [
"std:kv-storage",
"/path/to/kv-storage-polyfill.mjs"
]
}
}
</script>
<!-- Then any module scripts with import statements use the above map -->
<script type="module">
import storage from '/path/to/kv-storage-polyfill.mjs';
// Use `storage` ...
</script>
Yukarıdaki kodda önemli nokta, /path/to/kv-storage-polyfill.mjs URL'sinin iki farklı kaynağa eşlenmesidir: std:kv-storage ve ardından orijinal URL olan /path/to/kv-storage-polyfill.mjs.
Bu nedenle tarayıcı, bu URL'ye (/path/to/kv-storage-polyfill.mjs) atıfta bulunan bir içe aktarma beyanıyla karşılaştığında önce std:kv-storage'ı yüklemeyi dener. Yükleyemezse /path/to/kv-storage-polyfill.mjs'yi yüklemeye geçer.
Buradaki sihir, içe aktarma beyanına iletilen URL, polyfill'in URL'si olduğundan bu tekniğin çalışması için tarayıcının içe aktarma haritalarını veya yerleşik modülleri desteklemesi gerekmemesidir. Polifill aslında yedek değil, varsayılan ayardır. Yerleşik modül, aşamalı bir geliştirmedir.
Modülleri hiç desteklemeyen tarayıcılar ne olacak?
Yerleşik modülleri koşullu olarak yüklemek için içe aktarma haritalarını kullanmak istiyorsanız import ifadelerini kullanmanız gerekir.Bu, modül komut dosyalarını (ör. <script type="module">) kullanmanız gerektiği anlamına da gelir.
Şu anda tarayıcıların% 80'inden fazlası modülleri destekliyor. Modülleri desteklemeyen tarayıcılarda eski bir paket yayınlamak için module/nomodule tekniğini kullanabilirsiniz. Modülleri desteklemeyen tarayıcıların yerleşik modülleri kesinlikle desteklemeyeceğinden emin olduğunuz için nomodule derlemenizi oluştururken tüm polyfill'leri eklemeniz gerektiğini unutmayın.
KV Storage demosu
Eski tarayıcıları desteklemeye devam ederken yerleşik modüllerin kullanılabileceğini göstermek için yukarıda açıklanan tüm teknikleri içeren ve günümüzdeki tüm tarayıcılarda çalışan bir demo oluşturdum:
- Modülleri, harita içe aktarma işlemlerini ve yerleşik modülü destekleyen tarayıcılar gereksiz kod yüklemez.
- Modülleri ve harita içe aktarmayı destekleyen ancak yerleşik modülü desteklemeyen tarayıcılar, KV Depolama polyfill'ini (tarayıcının modül yükleyicisi aracılığıyla) yükler.
- Modülleri destekleyen ancak içe aktarma haritalarını desteklemeyen tarayıcılar, KV Depolama polyfill'ini de (tarayıcının modül yükleyicisi aracılığıyla) yükler.
- Modülleri hiç desteklemeyen tarayıcılar, eski paketlerinde KV Depolama polyfill'ini alır (
<script nomodule>aracılığıyla yüklenir).
Demo, Glitch'te barındırıldığı için kaynağını görüntüleyebilirsiniz. Ayrıca, uygulamayla ilgili ayrıntılı bir açıklamayı README dosyasında bulabilirsiniz. Nasıl oluşturulduğunu merak ediyorsanız göz atabilirsiniz.
Yerleşik yerel modülün nasıl çalıştığını görmek için denemeye açık web platformu özellikleri işareti etkinken (chrome://flags/#enable-experimental-web-platform-features) Chrome 74 veya sonraki bir sürümde demoyu yüklemeniz gerekir.
DevTools'taki kaynak panelinde polyfill komut dosyasını görmeyeceğinizi, bunun yerine yerleşik modül sürümünü göreceğinizi göz önünde bulundurarak yerleşik modülün yüklendiğini doğrulayabilirsiniz (ilginç bilgi: modülün kaynak kodunu inceleyebilir ve hatta içine kesme noktaları koyabilirsiniz):
Lütfen geri bildirimde bulunun
Bu giriş, yerleşik modüller sayesinde neler yapabileceğinize dair bir fikir vermiştir. Umarım heyecanlısınızdır. Geliştiricilerin KV Depolama modülünü (ve burada bahsedilen tüm yeni özellikleri) deneyip geri bildirimde bulunmasını çok isteriz.
Bu makalede bahsedilen özelliklerin her biri için bize geri bildirimde bulunabileceğiniz GitHub bağlantıları aşağıda verilmiştir:
Siteniz şu anda localStorage kullanıyorsa tüm ihtiyaçlarınızı karşılayıp karşılamadığını görmek için KV Storage API'ye geçmeyi denemelisiniz. KV Storage kaynağı deneme sürümüne kaydolduğunuzda bu özellikleri hemen dağıtabilirsiniz. Tüm kullanıcılarınız daha iyi depolama performansından yararlanabilir. Chrome 74 ve sonraki sürümleri kullanan kullanıcıların ek indirme maliyeti ödemesi gerekmez.