- toms ayakkabı outlet
- 16373
|
Gereksinimler: Bir Web sitesi talep edilirken çok fazla kaynak yüklenmesi gerekir, ağ istekleri de web sayfası oluşturma hızını etkiler, kullanıcı işlemi tıkladığında ve ardından bazı kaynakları yüklemeye gittiğinde kullanıcı deneyimini etkileyebilir, günümüzde İnternetin hızlı gelişimi, bant genişliği ve trafik uzun zamandır çok pahalı değil, kaynakları önceden veya hedef sunucuya bir bağlantı kurmak için önceden nasıl yükleyebilirim?
Ön Bağlantı
Eleman özniteliğindeki preconnect anahtar sözcüğü, kullanıcının hedef kaynaktan bir kaynağa ihtiyaç duyabileceği konusunda tarayıcıya bir ipucu verir, böylece tarayıcı bu kaynağa önceden bir bağlantı başlatarak kullanıcı deneyimini iyileştirebilir.
Preconnect, tarayıcının HTTP isteği sunucuya resmi olarak gönderilmeden önce DNS çözümlemesi, TLS anlaşması ve TCP el sıkışması gibi bir dizi eylemi gerçekleştirmesine olanak tanıyarak gidiş-dönüş gecikmelerini ortadan kaldırır ve kullanıcıya zaman kazandırır.
Preconnect, birçok istekte gidiş-dönüş yolunu azaltabilen önemli bir optimizasyon aracıdır - bazı durumlarda gecikmeyi yüzlerce veya binlerce milisaniye azaltır.
İşte Google Fonts için preconnect kullanımına bir örnek. fonts.gstatic.com adresine preconnect ipucu eklendiğinde, tarayıcı CSS isteğine paralel olarak yürütülen isteği hemen başlatacaktır. Bu senaryoda preconnect, kritik yoldan üç RTT'yi (Gidiş-Dönüş Süresi) ortadan kaldırır ve gecikmeyi yarım saniyeden fazla azaltır.
Sözdizimi aşağıdaki gibidir:
Dokümantasyon: https: //developer.mozilla.org/en ... nk_types/preconnect
DNS-prefetch dns prefetch kullanma
Eleman özniteliğindeki dns-prefetch anahtar sözcüğü, kullanıcının hedef kaynaktan bir kaynağa ihtiyaç duyabileceği konusunda tarayıcıyı uyarmanın bir yoludur, böylece tarayıcı bu kaynak için önceden bir DNS çözümlemesi gerçekleştirerek kullanıcı deneyimini iyileştirebilir.
DNS ön getirme, kullanıcı sayfada gezinirken tarayıcının DNS çözümlemesini arka planda çalıştırmasını sağlar. Bu, kullanıcı bir bağlantıya tıkladığında DNS çözümlemesinin tamamlanmasını sağlayarak gecikme süresini azaltır. DNS ön getirme, Google fontları, Google Analytics ve CDN'ler için önerdiğimiz gibi, bir bağlantı etiketinin özelliklerine rel="dns-prefetch' eklenerek belirli bir URL üzerinde gerçekleştirilebilir.
"DNS istekleri bant genişliği açısından çok düşük bir trafiktir, ancak özellikle mobil cihazlarda gecikme süresi yüksek olabilir. Belirtilen DNS'yi önceden yükleyerek, kullanıcının bir bağlantıya tıklaması gibi belirli senaryolarda gecikme süresini önemli ölçüde azaltabilirsiniz. Bazı durumlarda, gecikme bir saniyeye kadar azaltılabilir -- Mozilla Developer Network".
Sözdizimi aşağıdaki gibidir:
Dokümantasyon: https: //developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
Ön yükleme
Eleman niteliğinin ön yükleme değeri, HTML'de sayfanın yakında ihtiyaç duyacağı ve tarayıcının ana işleme mekanizması devreye girmeden önce sayfanın yaşam döngüsünün başlarında yüklemeye başlamak istediğiniz kaynakları belirten bir getirme isteği bildirmenize olanak tanır. Bu, kaynakların daha erken kullanılabilir olmasını ve sayfanın işlenmesini daha az tıkamasını sağlayarak performansı artırır. Adında load terimi geçse bile, komut dosyasını yükleyip çalıştırmaz, yalnızca daha yüksek bir öncelikte indirilip önbelleğe alınması için zamanlama yapar.
Preload, belirli bir kaynağın nasıl yükleneceğini kontrol etmeye yönelik yeni bir Web standardıdır ve Ocak 2016'da kullanımdan kaldırılan subresource prefetch'in güncellenmiş bir sürümüdür. Bu yönerge, <link rel="preload"> gibi bir <link> içinde kullanılabilir. Genel olarak, resimler, CSS, JavaScript ve yazı tipi dosyaları gibi en önemli kaynaklarınızı yüklemek için ön yükleme kullanmak en iyisidir. Bu, yalnızca HTML'de bildirilen kaynakları önceden yükleyen tarayıcı ön yüklemesi ile karıştırılmamalıdır. preload yönergesi aslında bu sınırlamanın üstesinden gelir ve CSS ve JavaScript'te tanımlanan kaynakların önceden yüklenmesine ve her kaynağın ne zaman uygulanacağına karar verilmesine izin verir.
Preload'un prefetch'ten farkı, mevcut sayfaya odaklanması ve kaynakları yüksek öncelikli olarak yüklemesidir, oysa prefetch bir sonraki sayfada yüklenecek kaynaklara odaklanır ve bunları düşük öncelikli olarak yükler. Ayrıca ön yüklemenin pencerenin onload olayını engellemediğini de unutmayın.
Önceden yüklenebilecek birçok farklı içerik türü vardır. as niteliği için olası değerler şunlardır:
audio: ses dosyaları, genellikle <audio> için kullanılır.
document: <frame> veya gömülü <iframe> olması amaçlanan HTML belgeleri.
embed: <embed> öğesi içine gömülecek kaynak.
fetch: ArrayBuffer veya JSON dosyası gibi fetch veya XHR isteği yoluyla erişilecek kaynak.
font: yazı tipi dosyası.
image: resim dosyası.
object: <object> öğesi içine gömülecek kaynak.
script: JavaScript dosyası.
style: CSS stil sayfası.
track: WebVTT dosyası.
worker: Bir JavaScript web çalışanı veya paylaşılan çalışan.
video: Genellikle <video> içinde kullanılan bir video dosyası.
Sözdizimi aşağıdaki gibidir:
Dokümantasyon: https: //developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
|
Önceki: [WebView2] (2) WinForm, Web içeriğini görüntülemek için WebView2'yi sunarSonraki：【WebView2】（C）Web ve WinForm uygulaması çift yönlü iletişim
|
Y 