JavaScript’te Önbelleğe Alma Gücü – JSManifest

JavaScript'te Önbelleğe Alma Gücü – JSManifest

Uygulamalarımız büyüdükçe performans ihtiyacı da artıyor. Önbelleğe alma ile performans elde edilebilir. Bu, web sayfalarının yüklenmesi gerektiğinden, web uygulamalarından yararlanmak için önemli bir stratejidir. zaman ve kaynaklar. Zamanı ve kaynakları azalttığımızda uygulamalarımız daha hızlı ve daha performanslı hale gelir. Ayrıca bu, kullanıcılarımız için kullanıcı deneyimindeki olumlu geri bildirimleri artırır.

Kullanıcı deneyimi Kocaman ve önbelleğe alma özelliğinden yararlanarak, arama sonucu sıralamalarınızı iyileştirmek gibi harika şeyler elde edebilirsiniz.

Bu yazıda, önbelleğe almanın düşünme ve verimli kod yazma şeklinizi iyileştirebileceği güçlü yollardan bahsedeceğiz.

Önbelleğe Alma, Zor Zamanlarda Uygulamanızı “Canlandırmak” İçin Kullanılabilir

Siteniz Google’ın arama sonuçlarında dizine eklendiğinde, botlar web sitenizde her gezindiğinde Googlebot bir anlık görüntü alır. Bunu yaptığında web sitenizin bir “yedeğini” tutar. Buna Google Önbelleği denir.

Örneğin, web siteniz garip bir nedenle saldırıya uğradıysa veya kapatıldıysa, Google, mevcut web sitenizin nasıl göründüğü ile web sitenizi karşılaştırır. son benziyordu. Web siteniz bir 404 ile yanıt verirse, Google web sitenizin son “çalışır” durumunu önbelleğinden sunabilir ve web sitenizi kullanıcıları başka bir yere gitmeye teşvik etmekten etkili bir şekilde kurtarabilir.

Bunu sağlamak için uygulamamızın kaynaklarını önbelleğe almak gibi benzer teknikleri uygulayarak öğrenebiliriz. çevrimdışı deneyim kullanıcının internet bağlantısı kesildiğinde.

Çevrimdışı Deneyim

Modern dünyada, kullanıcılar için çevrimdışı deneyimler her zamankinden daha önemli hale geldi.

Örneğin, kullanıcılar uçak modunu açtığında, uygulamalarımızı kullanmaya devam edebilmeleri için onlara çevrimdışı bir deneyim sağlayabiliriz.

Bunun için önbelleğe alma özelliğini kullanabiliriz. Bir yol, aşağıda gösterildiği gibi bir dinleyici kaydederek DOM’nizin son kullanılan durumunu kaydetmektir:

window.addEventListener('beforeunload', function (evt) {
  localStorage.setItem(
    '_last_',
    JSON.stringify({
      html: document.getElementById('root').innerHTML,
      origin: location.origin,
      pathname: location.pathname,
      scrollPos: {
        x: window.scrollX,
        y: window.scrollY,
      },
    }),
  )
})

window.addEventListener('load', function (evt) {
  const _last_ = localStorage.getItem('_last_')

  if (_last_) {
    try {
      const lastState = JSON.parse(_last_)
      if (lastState.origin === location.origin) {
        document.getElementById('root').innerHTML = lastState.html
        
        window.scrollTo({
          behavior: 'smooth',
          top: lastState.scrollPos.y,
          left: lastState.scrollPos.x,
        })
      }
    } catch (error) {
      console.error(error)
    }
  }
})

Bu, daha resmi veya güvenli bir çözüm için başlamanıza yardımcı olacak genel bir örnek fikirdir.

JavaScript’in en güzel yanı, yeni bir dil öğrenmek zorunda kalmadan ayrı teknolojilerden yararlanabilmesidir.

kaldıraç kullanabiliriz hizmet çalışanları (DOM’dan ayrı bir bağlamda yaşayan) kaynakları önceden önbelleğe almak ve daha hızlı yanıt süreleri alabilmeleri için istekleri engellemek için. İşlemleri ayrı bir iş parçacığı üzerinde gerçekleştirdiği için daha da güvenlidir.

başka birçok var önbelleğe alma stratejileri kullanıcılarınız için daha sağlam bir kullanıcı deneyimi sağlamak için hizmet çalışanlarından kullanabileceğiniz.

Workers’a aşina değilseniz, onlarla çalışırken sözdiziminin nasıl görünebileceğine dair kısa bir örnek:

İçin adanmış işçiler:

window.addEventListener('load', function (evt) {
  
  const worker = new Worker('./myWorker.js')
})

İçin hizmet çalışanları:

window.addEventListener('load', function (evt) {
  
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('./myServiceWorker.js')
      .then((registration) => {
        console.log(registration)
      })
      .catch(console.error)
  }
})

İçin paylaşılan işçiler:

window.addEventListener('load', function (evt) {
  
  const sharedWorker = new SharedWorker('mySharedWorker.js')
})

Çalışanlar ayrı bir bağlamda çalıştıkları için ayrılmaları gerekir, bu nedenle kendi dosyalarında izole edilmeleri gerekir:

myServiceWorker.js

self.addEventListener('fetch', function (fetchEvent) {
  console.log(`Received fetch event from the front end!`, fetchEvent)
})

myWorker.js

self.addEventListener('message', function (evt) {
  console.log(`Received message from the front end!`, evt)
})

İşçiler hakkında daha fazla bilgi edinebilirsiniz burada.

Çevrimdışı deneyimlerin bazı harika örnekleri Spotify ve Netflix’tir. Çoğu zaman önbelleğe alma özelliği sayesinde Spotify dinlerken telefonumun sinyal vermediğini fark edemiyorduk.

“Sahte” İyi Performans

Önbelleğe almanın gücü, “sahte” şeylerde çok iyi parlıyor. “Sahtekarlık” kelimesinin gerçek dünyada kullanıldığında oldukça kötü bir çağrışımı vardır, ancak DOM bağlamında olumludur! Web uygulamalarındaki (tartışmalı) bir numaralı hedef, kullanıcılarımızı mutlu etmektir ve iyi performansı taklit ederek aslında kullanıcının emin ellerde olduklarını hissetmesine yardımcı olursunuz.

Önbelleğe almanın, kullanıcılar için sahte iyi performansa yardımcı olabileceği bazı yollar şunlardır:

1. Görüntüler yüklenirken yer tutuculara hizmet etme

Kullanıcıların sayfalarımızda kendilerini evlerinde gibi hissetmeleri için resimlerin yüklenmesini beklemek zorunda kalmamaları gerekir. Yer tutucu görüntüleri kullanarak, büyük görüntüleri başka bir şeyle değiştirirsek (izlenen bir SVG gibi) kullanıcının sayfalarımızla hemen kolay bir deneyim yaşamasını sağlayabiliriz. süre gerçek olanı yüklemeyi bitirir. Kullanıcının bir sonraki ziyaretinde anında yüklenecek gerçek görüntüyü önbelleğe alabiliriz veya boyutları önbelleğe al Bu, yükleme sırasında tahmini bir boyutta bir siluet gibi bir şeyi anında görüntülememizi sağlar.

İzlenen bir SVG’nin ne olduğuna aşina değilseniz, solun tam yüklü görüntü ve sağın kısmi (izlenen SVG) yer tutucusu olduğu yerde, şöyle görünebilir:

2. Tembel yükleme

Tembel yükleme, web geliştirmede popüler bir terimdir. Kullanıcı istemcisi için veri talep eden faydalı bir stratejidir. sadece gerektiğinde. Önbelleğe alma, kaynakları önbelleğe alırsak tembel yüklemeyi hızlandırmaya yardımcı olabilir. olacak zamanı geldiğinde istenir. Bu bir ithalat konsepti çünkü çok fazla Web uygulamalarındaki veri miktarı, kullanıcı istemcisi tarafından neredeyse hiç istenmez. Tembel yükleme, yalnızca istendiğinde tüketilmesi için neyi önbelleğe alacağınızı düşünmenize yardımcı olur. Büyük olasılıkla, bu kavramı kullanan bir web sayfasındaki bazı bileşenlerle etkileşime girdiniz.

Örneğin, bir tür görüntü oluşturan herhangi bir web sayfası sayfalandırma bu yaklaşımın bir uygulamasıdır.

3. İstek yanıtlarını yeniden kullanma

Daha önce servis çalışanları hakkında konuşmuştuk ve burada, kullanıcılarınız için harika bir performans gösteren uygulamayı taklit etmede gerçekten parladıklarını burada belirtmekte fayda var.

Çalıştığım şirkette, uygulamaya geçtikten sonra aldığım olumlu geri bildirimler beni şaşırttı. önbelleğe alınmış yanıtlar servis çalışanları aracılığıyla Düzenli kullanıcılar (ve düzenli olarak geliştirici olmayan kişilere atıfta bulunuyorum), arka plan çalışanlarımız önbelleğe alındığında aldıkları “anlık yanıt” süreleri sırasında sayfalarının tarayıcılarının önceki bir oturumundan alındığını bilmiyorlar. ziyaretleri.

Bundan çıkarılması gereken bir diğer önemli nokta da, önbelleğe alınmış yanıtları sunarken (içeriğin sık sık değişmeyeceğini varsayarak) ekstra istekleri de atlamamızdır, bu da ban genişliği ve kaynak tasarrufu açısından bir artıdır.

Daha hızlı fonksiyonlar

Sonuçlarını önbelleğe alarak zaman içinde işlevlerimizin verileri daha hızlı işlemesini sağlayabiliriz, bu da uygulamalarımızda etkin bir şekilde önemli bir performans artışı olabilir.

Mühendisler olarak, verilerimizin hangi bölümlerinin önbelleğe alınması gerektiğini düşünmek mutlak bir zorunluluktur. Duruma bağlı olarak hangi önbelleğe alma stratejisinin en iyi şekilde kullanıldığını bilmek de önemlidir.

Özellikle şunları dikkate almalıyız:

  1. Ne zaman önbelleğimizdeki verileri güncellemek veya geçersiz kılmak için. Güncel bir önbelleği korumak söz konusu olduğunda, web geliştirmede önbelleğe almayı yanlış kullanmak nadir değildir.

  2. Zaman alıcı veya pahalı işlemleri gerçekleştirmenin gereksiz olduğu durumlarda daha sonra kullanmak üzere alabileceğimiz sık erişilen verileri kaydetme. Kullanıcılar önemlidir, bu nedenle en son bilgileri görebilmeleri için önbelleği periyodik olarak güncellemeyi de düşünmeliyiz.

Örneğin, verileri almaktan ve döndürmekten sorumlu bir fonksiyonumuz olduğunda, şu stratejiyi kullanabiliriz: not alma önceden alınmışsa önbellekten veri almak için:

const axios = require('axios')

let fetchCount = 0

function memoize(fn) {
  const cache = {}

  return async function (key, ...args) {
    if (cache[key]) {
      return cache[key]
    }

    fetchCount++
    return (cache[key] = await fn(...args))
  }
}

const fetchDogs = memoize(function (page) {
  if (typeof page !== 'number') page = 1
  return axios
    .get(
      `https://dog.ceo/api/breeds/list/all
    `,
    )
    .then((response) => {
      return response.data.message
    })
    .catch((err) => {
      throw err
    })
})

async function start() {
  try {
    let dogs = await fetchDogs(`dogs_page_11`, 11)
    return dogs
  } catch (error) {
    const err = error instanceof Error ? error : new Error(String(error))
    console.error(`Error: ${err.message}`, err)
  }
}

Bu işlevi spam göndererek, yalnızca ilk seferde getirme işlemini gerçekleştirir ve sonraki aramalarda önbelleğe alınan verileri anında döndürür:

start()
  .then(() => start())
  .then(() => start())
  .then(() => start())
  .then(() => start())
  .then(() => start())
  .then(() => start())
  .then(() => start())
  .then(() => start())
  .then(() => start())
  .then((dogs) => {
    console.log(`Fetched dogs`, dogs)
    console.log(`Fetched ${fetchCount} times`)
  })

Bu strateji, kısmen, bir geçersiz kılma stratejisini TTL.

Gerçek dünya senaryoları

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.