Səhifəni Yerləşdirmək: Brauzerlərin Necə İşlədiyini Anlamaq
İstifadəçilər tez yüklənən və istifadə etməkdə hamar olan veb təcrübələrini gözləyirlər. Buna görə də, bir proqramçı bu iki məqsədi əldə etməyə çalışmalıdır.
Performansı və qavranılan performansı necə yaxşılaşdırmaq barədə başa düşmək üçün, brauzerin necə işlədiyini başa düşmək faydalıdır.
Ümumi Baxış
Sürətli saytlar daha yaxşı istifadəçi təcrübəsi təmin edir. İstifadəçilər tez yüklənən və hamar istifadə edilən veb təcrübələrini gözləyirlər.
Veb performansında iki əsas məsələ vardır: birincisi, gecikmə ilə bağlı problemlər, ikincisi isə brauzerlərin əsasən tək-bantlı olması ilə bağlıdır.
Gecikmə, səhifənin tez yüklənməsini təmin etmək üçün bizim qarşımıza çıxan ən böyük təhdiddir. Proqramçıların məqsədi saytı mümkün qədər sürətli yükləməkdir — və ya ən azından çox sürətli görünməsini təmin etməkdir — ki, istifadəçi tələb etdiyi məlumatı mümkün qədər tez əldə etsin. Şəbəkə gecikməsi, məlumatların kompüterlərə ötürülməsi üçün lazım olan vaxtı təyin edir. Veb performansı, səhifənin mümkün qədər sürətli yüklənməsini təmin etmək üçün lazım olan hər şeydir.
Əksər hallarda, brauzerlər tək-bantlı olaraq qəbul edilir. Yəni, onlar bir tapşırığı başa çatdırmadan digər tapşırığa başlamazlar. Hamar qarşılıqlı əlaqələr üçün, proqramçının məqsədi saytın qarşılıqlı əlaqələrini yaxşılaşdırmaqdır: hamar sürüşdürmədən tutmuş toxunuşlara cavab verən interaktiv təcrübəyə qədər. Render zamanı əsas vacibdir, bu da əsas thread-in biz ona atdığımız bütün işi başa çatdırıb istifadəçi qarşılıqlı əlaqələrinə dərhal cavab verə bilməsini təmin etməsini hədəfləyir. Veb performansı brauzerin tək-bantlı təbiətini başa düşərək və əsas thread-in məsuliyyətlərini minimuma endirərək, renderin hamar olmasını və qarşılıqlı əlaqələrə dərhal cavab verməsini təmin edə bilər.
Navigasiya
Navigasiya veb səhifəsini yükləməyin ilk addımıdır. İstifadəçi URL-ni ünvan barına daxil edərkən, linkə kliklədikdə, formu göndərdikdə və digər əməliyyatlar zamanı baş verir.
Veb performansının məqsədlərindən biri, navigasiya üçün sərf olunan vaxtı minimuma endirməkdir. İdeal şərtlərdə bu çox uzun çəkmir, lakin gecikmə və bant genişliyi problemləri gecikmələrə səbəb ola bilər.
DNS Baxışı
Bir veb səhifəsinə getməyin ilk addımı, həmin səhifənin aktivlərinin harada yerləşdiyini tapmaqdır. Məsələn, https://example.com saytını ziyarət etdikdə, HTML səhifəsi 93.184.216.34 IP ünvanlı serverdə yerləşir. Əgər bu saytı heç vaxt ziyarət etməmisinizsə, DNS baxışı aparılmalıdır.
Brauzeriniz DNS baxışını istəyir, bu sorğu daha sonra bir ad serveri tərəfindən qarşılanır və nəticədə IP ünvanı ilə cavab verilir. Bu ilkin sorğudan sonra IP ünvani bir müddət yaddaşda saxlanır, bu da sonrakı sorğularda IP ünvanının ad serverinə müraciət etmədən, yaddaşdan alınmasını sürətləndirir.
TCP Əl Sıxma
IP ünvanı məlum olduqdan sonra, brauzer serverə TCP üçlü əl sıxma yolu ilə əlaqə qurur. Bu mexanizm, iki tərəf — brauzer və veb server — arasında əlaqə qurulmasını təmin etmək məqsədi güdür.
TLS Müzakirəsi
HTTPS üzərindən təhlükəsiz bağlantılar üçün başqa bir “əl sıxma” tələb olunur. Bu müzakirə, şifrələmədə istifadə olunacaq alqoritmi müəyyən edir, serveri təsdiq edir və şifrəli əlaqənin qurulduğunu təmin edir. Bu da məlumatın ötürülməsindən əvvəl serverə beş əlavə tur dövrü tələb edir.
Cavab
Əgər veb serverə əlaqə qurulubsa, brauzer istifadəçi üçün ilkin HTTP GET sorğusunu göndərir ki, bu da veb səhifələrində ən çox HTML faylı olur. Server bu sorğunu aldıqdan sonra müvafiq cavab başlıqlarını və HTML məzmununu göndərir.
HTML:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>My simple page</title>
<link rel="stylesheet" href="styles.css" />
<script src="myscript.js"></script>
</head>
<body>
<h1 class="heading">My Page</h1>
<p>A paragraph with a <a href="https://example.com/about">link</a></p>
<div>
<img src="my-image.jpg" alt="image description" />
</div>
<script src="another-script.js"></script>
</body>
</html>İlk cavabda alınan ilk məlumat baytı Time to First Byte (TTFB) olaraq adlanır. Bu, istifadəçinin sorğu göndərməsi ilə ilk HTML paketinin alınması arasındakı vaxtdır. Bu zaman ilk məlumat parçası adətən 14KB olur.
Parçalama
Brauzer ilk məlumat parçasını aldıqda, onu təhlil etməyə başlayır. Bu, brauzerin aldığı məlumatı şəbəkə üzərindən DOMvə CSSOM-a çevirməsi addımıdır ki, bu da səhifəni ekranda təsvir etmək üçün istifadə olunur.
Render
Render mərhələləri üslub, yerləşdirmə, rəngləmə və bəzi hallarda tərkib hissələrinin birləşdirilməsi ilə həyata keçirilir. Bu mərhələdə, render ağacı qurulub səhifə ekrana çəkilir. Məsələn, GPU-da işləmə (əgər lazımdırsa) performansı artırmaq üçün istifadə oluna bilər.
İnteraktivlik
Həmin əsas thread səhifəni rəngləndirdikdən sonra belə istifadəçi qarşılıqlı əlaqələrinə dərhal cavab verilməlidir. Time to Interactive (TTI), səhifənin ilk interaktiv olduğu anı göstərir, burada səhifə istifadəçi qarşılıqlı əlaqələrinə 50ms içində cavab verir.
Pulsuz digər mövzular:
Növbəti mövzular:
Açar sözlər: brauzer necə işləyir, veb səhifə performansı, DNS baxışı, TCP əl sıxma, Time to First Byte, HTML, CSSOM, render ağacı, interaktivlik, SEO optimizasiyası, səhifə yükləmə sürəti
Bir cavab yazın