Gereksinimler: Bir web sitesi talep ederken çok fazla kaynak yüklemeniz gerekir, ağ talepleri web sayfası görüntüleme hızını da etkiler, kullanıcı bazı kaynakları yüklemek için işleme tıkladığında kullanıcı deneyimini etkileyebilir, artık internetin hızlı gelişimi, bant genişliği ve trafik artık o kadar pahalı değil, kaynakları önceden nasıl önceden nasıl yükleyebilir veya hedef sunucuyla önceden bağlantı nasıl kurabilirsiniz?
Ön bağlantı
Öğe özellikleri için anahtar kelime ön bağlantısı, kullanıcının hedef kaynaktan kaynaklara ihtiyaç duyabileceğine dair tarayıcıya bir ipucu verirBu kaynağa önceden bağlantı başlatarak kullanıcı deneyimini iyileştirin。
ön bağlantı, tarayıcının HTTP isteği resmi olarak sunucuya gönderilmeden önce DNS çözümlemesi, TLS müzakere, TCP el sıkışması gibi birçok işlem yapmasına olanak tanır; bu da geçiş gecikmesini ortadan kaldırır ve kullanıcı için zaman kazandırır.
Ön bağlantı, birçok istekte gidiş-dönüş yolunu azaltmak için önemli bir optimizasyon yöntemidir - bazı durumlarda yüzlerce ya da binlerce milisaniye gecikme ile.
İşte Google Fonts için preconnect kullanımına bir örnek; fonts.gstatic.com'ye bir ön bağlantı promptu ekleyerek tarayıcı hemen CSS isteğiyle paralel olarak yürütülecek bir istek başlatır. Bu senaryoda, ön bağlantı kritik yoldan üç RTT'yi (Gidiş-Dönüş Zamanı) ortadan kaldırır veGecikmeyi yarım saniyeden fazla azalttı。
Sözdizimi şöyledir:
Belge:Bağlantı girişi görünür.
DNS-prefetch DNS prefetch kullanır
Öğe özniteliğinin dns-prefetch anahtar kelimesi, tarayıcıyı kullanıcıya hedef kaynaktan bir kaynağa ihtiyaç duyabileceğini bildirmektir; böylece tarayıcı, o kaynak için DNS çözümlemesini önceden uygulayarak kullanıcı deneyimini iyileştirebilir.
DNS ön yükleme, kullanıcı gezinirken tarayıcının sayfada olmasını sağlarArka planda DNS çözümlemesini çalıştırın。 Bu şekilde, kullanıcı bir bağlantıya tıkladığında DNS çözümlemesi tamamlanır ve gecikme azaltılabilir. Verilen bir URL'nin DNS ön yüklemesi, bir bağlantı etiketinin özelliklerine rel="dns-prefetch" eklenerek yapılabilir, Google fontları, Google Analytics ve CDN'i yönetmenizi öneririz.
"DNS taleplerinin bant genişliği trafiği çok azdır, ancak gecikme özellikle mobil cihazlarda yüksek olabilir. Ön yükleme ile belirlenen DNS, bazı durumlarda, örneğin bir kullanıcının bir bağlantıya tıklaması gibi gecikmeyi önemli ölçüde azaltabilir. Bazen bir saniyelik gecikme bile azaltılabilir - Mozilla Geliştirici Ağı"
Sözdizimi şöyledir:
Belge:Bağlantı girişi görünür.
Ön yükleme önceden yüklendi
Öğe özelliğinin ön yükleme değeri, sayfanın yakında ihtiyaç duyacağı kaynakları belirterek HTML ile bir getirme isteği ilan etmenizi sağlar ve tarayıcının ana render mekanizması başlamadan önce sayfanın yaşam döngüsünün erken aşamasında yüklemeye başlamak istersiniz. Bu da sayfaların daha erken erişilebilir olmasını ve sayfanın render edilmesini engelleme olasılığının azalmasını sağlayarak performansı artırır. İsimde load terimi olsa bile, betik yüklenip çalıştırmaz, sadece indirme ve önbellekleyici olarak daha yüksek öncelikli olarak zamanlar.
Preload, belirli kaynakların nasıl yüklendiğini kontrol eden yeni bir web standardıdır; Ocak 2016'da kullanımdan kaldırılan alt kaynak prefetch'in bir yükseltmesidir. Bu komut, <link> örneğin <link rel="preload"> içinde kullanılabilir. Genel olarak, en önemli kaynaklarınızı, örneğin görseller, CSS, JavaScript ve font dosyalarını yüklemek için ön yükleme kullanmak en iyisidir. Bu, yalnızca HTML ile ilan edilen kaynakları ön yükleyen tarayıcı ön yükleme ile karıştırılmamalıdır. Önyükleme direktifi aslında bu sınırlamayı aşar ve CSS ile JavaScript'te tanımlanmış kaynakların ön yüklenmesine izin verir ve her kaynağın ne zaman uygulanacağına karar vermeye olanak tanır.
Prefetch'ten farklıdır; mevcut sayfaya odaklanır ve yüksek öncelikli kaynakları yüklerken, Prefetch bir sonraki sayfanın yükleneceği kaynağa odaklanır ve düşük öncelikli yüklenir. Ayrıca, ön yüklemenin pencerenin yükleme olayını engellemediğini unutmayın.
Birçok farklı içerik türü önceden yüklenebilir. Olası olan mülk değerleri şunlardır:
ses: Genellikle için kullanılan bir ses <audio>dosyası.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
gömül: Öğeye gömülecek kaynak<embed>.
fetch: Getir veya XHR isteği ile erişilebilen bir kaynak, örneğin ArrayBuffer veya JSON dosyası.
font: 字体文件。
görsel: Görsel dosyası.
nesne: Öğeye gömülecek kaynak<object>.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
işçi: JavaScript web çalışanı veya paylaşılan çalışan.
Video: Genellikle için kullanılan bir video <video>dosyası.
Sözdizimi şöyledir:
Belge:Bağlantı girişi görünür.
|
Yayınlandı 26.09.2022 21:45:08
|
|
|
|
Yayınlandı 28.09.2022 08:54:26
|
