Önceden getirme, önceden işleme ve hizmet çalışanı önceden önbelleğe alma

Son birkaç modülde, projeyi ertelemek JavaScript'in ve resimlerin ve <iframe> öğelerinin geç yüklenmesi. Kaynak yüklemesini ertelemek, ilk deneme sırasında ağ ve CPU kullanımını azaltır kaynakları ihtiyaç duyulduğu anda indirerek sayfa yüklenir. önden yüklemek yerine, daha sonra kullanılmaya başlayabilecek. Bu, ilk sayfa yükleme sürelerini iyileştirebilir ancak sonraki etkileşimlere neden olabilir. güç kaynağı için gereken kaynaklar o sırada henüz yüklenmemişse bunları görebilirsiniz.

Örneğin, bir sayfada özel tarih seçici varsa tarihi erteleyebilirsiniz. kullanıcı öğeyle etkileşime geçene kadar seçicinin kaynaklarını kullanır. Ancak yükleniyor Tarih seçicinin kaynakları isteğe bağlı olarak biraz gecikmelere neden olabilir Kullanıcının ağ bağlantısına, cihaz özelliklerine veya Her ikisi de (kaynaklar indirilene, ayrıştırılana ve yürütmeye hazır olana kadar).

Bu biraz zor bir dengedir; uygulamanızı yükleyerek bant genişliğinizi boşa harcamanızı istemezsiniz ancak etkileşimleri ve sonraki sayfayı geciktiren kaynaklar yüklemeler de ideal olmayabilir. Neyse ki, projenizi tamamlamak için arasında daha iyi bir denge kurmak için kullanabileceğiniz bir araçtır. Bu modülde bu hedefe ulaşmak için kullanabileceğiniz bazı teknikler (ör. kaynakları önceden getirmek, Tüm sayfaları önceden işleme ve hizmet çalışanı kullanarak kaynakları önbelleğe alma.

Yakın gelecekte gereken kaynakları düşük öncelikte önceden getirin

Resimler, stil sayfaları, veriler ve kaynakları içeren kaynakları, veya JavaScript kaynakları için <link rel="prefetch"> kaynak ipucunu kullanın. İlgili içeriği oluşturmak için kullanılan prefetch ipucu tarayıcıya, şurada bir kaynağın gerekli olabileceğini bildirir: teslim etmeyi öğreteceğim.

Bir prefetch ipucu belirtildiğinde, tarayıcı bir istek başlatabilir Kaynaklarla rekabet etmekten kaçınmak için o kaynağa en düşük öncelikteki kaynak için emin olmanız gerekir.

Kaynakları önceden getirmek, kullanıcı deneyimini iyileştirmek için yakın gelecekte gerekli kaynakların indirilmesini beklemek zorunda bu dosyalar, ihtiyaç anında disk önbelleğinden anında alınabilir.

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

Önceki HTML snippet'i, tarayıcıya önceden getirebileceği bilgisini verir Boşta kaldığında date-picker.js ve date-picker.css. Ayrıca, Kullanıcı sayfayla etkileşimde bulunurken kaynakları dinamik olarak önceden getirmek için JavaScript'e dokunun.

prefetch, Safari dışında tüm modern tarayıcılarda desteklenir herkes tarafından görüntülenebilir. Öncelikle yükleme işlemi için ve tüm tarayıcılarda çalışır şekilde çalışır ve bilgi edinin. Ardından, bu modülün önbelleğe alma kaynaklar hakkında bilgi edinebilirsiniz.

Gelecekteki gezinmeleri hızlandırmak için sayfaları önceden getir

Ayrıca bir sayfayı ve tüm alt kaynaklarını önceden getirmek için Bir HTML belgesine işaret ederken as="document" özelliği:

<link rel="prefetch" href="/page" as="document">

Tarayıcı boşta kaldığında, /page için düşük öncelikli bir istek başlatabilir.

Chromium tabanlı tarayıcılarda dokümanları önceden getirmek için Speculation Rules API. Spekülasyon Kuralları, JSON nesnesi olarak tanımlanır sayfanın HTML'sine eklenir veya JavaScript aracılığıyla dinamik olarak eklenir:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

JSON nesnesi bir veya daha fazla işlemi açıklar (şu anda yalnızca desteklenmektedir) prefetch ve prerender ile bu işlemle ilişkili URL'lerin listesi. İçinde snippet'ini açarsa tarayıcıya /page-a kodunu önceden getirmesi istenir ve /page-b. <link rel="prefetch"> işlevine benzer şekilde, spekülasyon kuralları da tarayıcının bazı durumlarda göz ardı edebileceğine dair ipucu verir.

Quicklink gibi kitaplıklar, sayfada gezinmeyi görünür olduğunda sayfaların bağlantılarını önceden getirmeyi veya önceden işlemeyi kullanıcının görüntü alanına uygulanır. Bu da kullanıcının sonunda kullanıcı söz konusu sayfaya gider (sayfadaki tüm bağlantıların önceden getirilmesine kıyasla).

Önceden işleme sayfaları

Kaynakları önceden getirmeye ek olarak, tarayıcıya kullanıcı gitmeden önce sayfayı önceden oluşturmak için kullanabilir. Bu şekilde, kaynakları getirilip işlendikçe anında sayfa yüklenir. görebilirsiniz. Kullanıcı sayfaya gittiğinde, sayfa şuraya yerleştirilir: ön plan.

Önceden işleme, Speculation Rules API aracılığıyla desteklenir:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>
ziyaret edin.

Önceden getirme ve önceden işleme demoları

Service Worker'ı önceden önbelleğe alma

Service Worker kullanarak kaynakları tahmine dayalı olarak önceden getirmek de mümkündür. Service Worker'ı önceden önbelleğe alma özelliği, Cache API'yi kullanarak kaynakları getirip kaydedebilir, ve tarayıcının isteği Cache API'sini kullanarak sunmasını sağlar. ağa katılmaz. Service Worker'ı önceden önbelleğe alma, çok etkili bir Service Worker kullanır yalnızca önbellek stratejisi olarak bilinen önbelleğe alma stratejisi Bu model son derece çünkü kaynaklar, Service Worker önbelleğine yerleştirildikten sonra istenildiği anda neredeyse anında getirilir.

Sayfadan hizmet çalışanına ve önbelleğe almaya kadar hizmet çalışanı önbellek akışını gösterir.
Yalnızca önbellek stratejisi, ağa bağlanmayı gerektirir. Yüklendikten sonra, kaynakları yalnızca hizmet çalışanı önbelleğinden alınır.
ziyaret edin.
'nı inceleyin.

Bir hizmet çalışanı kullanarak kaynakları önbelleğe almak için Workbox'ı kullanabilirsiniz. Şu durumda: önceden belirlenmiş bir dizi önbellek için kendi kodunuzu yazabilirsiniz. dosyası olarak da kaydedebilir. Her iki durumda da, önbelleğe almak için hizmet çalışanı kullanabilirsiniz. önbelleğin, hizmet hizmetin kullanımına sunulduğunda gerçekleştiğini yüklü olması gerekir. Yüklemenin ardından, önbelleğe alınmış kaynaklar otomatik olarak hizmet çalışanının web sitenizde kontrol ettiği tüm sayfalarda erişilebilir.

Workbox, hangi kaynakların kullanılması gerektiğini belirlemek için bir önbellek manifesti kullanır önbelleğe alınmış olması gerekir. Önbellek manifesti, dosyaların ve sürüm oluşturma bilgilerinin yer aldığı bir listedir "bilgi kaynağı" işlevi gören önbellekte tutulmasını sağlar.

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

Önceki kod, iki dosya içeren örnek bir manifesttir: script.ffaa4455.js ve /index.html. Bir kaynak, sürüm içeriyorsa bilgi (dosya karması olarak bilinir) ve ardından revision özelliği, dosya zaten sürümlü olduğu için null olarak bırakılabilir (örneğin, Önceki kodda script.ffaa4455.js kaynağı için ffaa4455). Örneğin, sürümü bulunmayan kaynaklar için derleme sırasında bunlar için bir düzeltme oluşturulabilir.

Kurulumdan sonra bir hizmet çalışanı, statik sayfaları veya kendi sayfalarını önbelleğe almak için kullanılabilir. hızlandıran alt kaynaklar hazırladık.

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

Örneğin, bir e-ticaret ürün listeleme sayfasında Service Worker için Ürün ayrıntıları sayfasını oluşturmak için gereken CSS ve JavaScript'i önceden önbelleğe almak, ve ürün ayrıntıları sayfasına gidilmesinin çok daha hızlı olmasını sağlıyor. önceki örnekte, product-page.ac29.css ve product-page.39a1.js önbelleğe alınmış olması gerekir. workbox-precaching içinde kullanılabilen precacheAndRoute yöntemi Önbelleğe alınmış kaynakların doğru şekilde sağlanması için gereken işleyicileri otomatik olarak kaydeder gerekli olduğunda Service Worker API'den getirilir.

Service Worker'lar yaygın bir şekilde desteklendiği için Service Worker'ı kullanabilirsiniz. önbellekleri sunma.

ziyaret edin.

Bilginizi test etme

prefetch ipucu hangi öncelikte ortaya çıkar?

Yüksek.
Tekrar deneyin.
Orta.
Tekrar deneyin.
Yok.
Doğru!

Önceden getirme ile bir sayfayı önceden nasıl oluşturabilirsiniz?

Bir sayfa için hem önceden getirme hem de önceden işleme, bir sayfayı ve tüm bunları bir ön getirme işlemi, yalnızca sayfayı ve onun tüm alt kaynaklarını kaynak ayarlarını kullanarak bir ön işlemeyi Kullanıcı gezinene kadar arka planın tamamını kaplamaya başlar.
Doğru!
Bunlar çoğu zaman aynıdır, yalnızca bir önceden işleme sayfanın tüm özelliklerini alır alt kaynakları alt kaynaklarına erişebilir.
Tekrar deneyin.

Service Worker önbelleği ve HTTP önbelleği aynıdır.

Doğru
Tekrar deneyin.
Yanlış
Doğru!

Sıradaki: Web çalışanlarına genel bakış

Artık önceden getirme, önceden işleme ve Service Worker'ları önceden önbelleğe almanın geleceğe dönük gezinmeyi hızlandırmak söz konusu olduğunda yararlı olabilir. bu aşamanın nasıl başarılı olabileceğiyle ilgili bilinçli kararlar hem web siteniz hem de kullanıcıları için yararlıdır.

Ardından, web çalışanlarına genel bir bakış sunulur ve bunun nasıl yapılacağını ana iş parçacığına odaklanabilir ve ana iş parçacığına kullanıcı etkileşimleri. E-postanızın başarısını garantilemek için ne yapabileceğinizi daha fazla zaman ayırın, sonraki iki modüle zaman ayırın!