Bir tarayıcı bir web sayfasını nasıl görüntüler?

Bir tarayıcı bir web sayfasını nasıl görüntüler? www.yzokul.com.tr

Bir tarayıcının bir web sayfasını nasıl gösterdiğini sorduğunda kısa yanıt şudur: sunuculardan dosyalar alır, onları okur, parçaları düzenler ve ekranına çizer. Bu kitap, bir adres yazdığın andan sayfayı gördüğün ana kadar bu yolu izler. Her bölüm resme bir parça ekler. 1

Tarayıcı, bilgisayarında web sayfalarını isteyen ve gösteren bir programdır. Görünmez verileri ekranında gördüğün sayfaya dönüştüren araçtır. Tarayıcı olmasaydı, bir sayfayı oluşturan dosyalar yalnızca metin ve kod olurdu. Tarayıcı bu metni ve kodu okur ve sayfayı senin için oluşturur. 2

Bir web sitesi adı gibi bir adres yazmak, bir yerdeki bilgisayara gönderilen bir istektir. Bu bilgisayara sunucu denir ve sayfanın dosyalarını barındırır. Tarayıcın isteği internet üzerinden gönderir ve sunucunun yanıt vermesini bekler. Sunucu senin bilgisayarın değildir; dosyaları saklayan ve gönderen bir makinedir. 3

Sunucu, tamamlanmış bir resim değil, dosyalar göndererek yanıt verir. Ana dosya genellikle bir HTML dosyasıdır ve sayfanın ihtiyaç duyduğu diğer dosyalara işaret eder. Bu diğer dosyalar stiller, betikler, görseller veya yazı tipleri olabilir. Tarayıcı dosyaları tek tek alır ve onlarla çalışmaya başlar. 4

HTML, her parçanın ne olduğunu işaretleyen etiketler içeren bir metin dosyasıdır: bir başlık, bir paragraf, bir görsel veya bir bağlantı. Sayfa içeriğinin iskeletini ve sırasını belirler. Etiketler, tarayıcıya bir öğenin ne olduğunu söyleyen açılı parantez içindeki işaretlerdir. HTML nesnelerin nasıl göründüğünü söylemez; neyin orada olduğunu ve hangi sırada olduğunu söyler. 5

CSS, nesnelerin nasıl görünmesi gerektiğini söyleyen başka bir dosyadır: renkler, boyutlar, boşluklar ve yazı tipleri. HTML neyin orada olduğunu söyler; CSS nasıl göründüğünü söyler. Tarayıcı CSS kurallarını okur ve bunları HTML'deki öğelerle eşleştirir. Örneğin, bir CSS kuralı tüm başlıkları mavi ve büyük yapabilir. CSS sayfaya görsel stilini verir. 6

JavaScript, tarayıcının bazı parçaların tepki vermesi için çalıştırdığı koddur; örneğin bir düğmenin tıklandığında bir şey yapması gibi. Sayfanın temel yapısını veya görünümünü değil, bazı etkileşimlerini yönetir. Tarayıcı bu kodu sayfa yüklenirken veya sen bir eylemde bulunduğunda okur ve çalıştırır. JavaScript sayfa oluşturulduktan sonra onu değiştirebilir, ancak temeli HTML ve CSS belirler. 7

Tarayıcı HTML'i okur ve ondan sayfanın öğelerinden oluşan bir ağaç oluşturur. Ayrıca her öğenin nasıl biçimlendirilmesi gerektiğini bilmek için CSS kurallarını okur. Bu ağaç, neyin neyin içinde olduğunun bir haritasıdır; öğelerin bir soy ağacı gibidir. Ağaç ve kurallarla birlikte tarayıcı her öğenin rolünü ve stilini bilir. 8

Görseller, yazı tipleri ve diğer ek dosyalar, tarayıcının ihtiyaç duydukça aldığı ayrı indirmelerdir. Her biri bir sunucudan istenir ve sayfaya eklenir. Tarayıcı her şeyi aynı anda beklemez; ekler gelirken sayfayı oluşturmaya devam eder. Bu dosyalar sayfayı zenginleştirir ancak ana HTML metninin parçası değildir. 9

Tarayıcı, HTML ağacını ve CSS kurallarını kullanarak her öğenin nereye gideceğini ve ne kadar büyük olacağını hesaplar. Bu adım, parçaların listesini ekrandaki konumlara dönüştürür. Her şeyin birbirine uyması için metni, boşlukları ve kutuları ölçer. Sonuç, hiçbir şey çizilmeden önce sayfanın yerleşim planıdır. 10

Yerleşim bilindikten sonra tarayıcı öğeleri çizer: metin, renkler, görseller ve kenarlıklar piksel olarak görünür. Sayfanın senin için görünür hale geldiği an budur. Pikseller ekranını oluşturan küçük noktalardır. Tarayıcı bunları doğru yerlere doldurur ve gördüğün sayfa bunun sonucudur. 11

Tarayıcı, daha önce indirdiği dosyaların kopyalarını önbellek adı verilen bir depolama alanında tutabilir. Bir dahaki sefere yeniden indirmek yerine bunları yeniden kullanabilir, bu da sayfaların daha hızlı yüklenmesini sağlar. Önbellek bilgisayarında bulunur ve son dosyaları tutar. Önbelleğe alınmış bir dosyayı yeniden kullanmak sunucuya bir istekten tasarruf sağlar ve sayfayı hızlandırır. 12

Bir web sayfası genellikle tek bir dosya değildir. Gerçekte, tarayıcının birleştirdiği HTML, CSS, JavaScript, görseller ve yazı tipleri gibi birkaç dosyadır. Onu tek bir dosya olarak düşünmek, bir şey eksik olduğunda kafanı karıştırabilir. Bir görsel yüklenmiyorsa, bunun nedeni genellikle ayrı bir dosyanın ulaşamamasıdır. 13

Tarayıcı, sunucunun gönderdiğini ekrana yalnızca kopyalamaz. Okuması, yorumlaması, yerleştirmesi ve sonra çizmesi gerekir; bu yüzden sayfalar aşamalar halinde görünebilir. Önce metni, sonra görselleri görebilirsin. Bu aşamalı gösterim normaldir ve tarayıcının adımlarını sırayla işlediğini gösterir. 14

Önbelleğe alınmış dosyalar her zaman yeniden kullanılmaz. Tarayıcı yeni bir kopyanın gerekip gerekmediğini kontrol eder, bu yüzden önbellek yardımcı olur ama indirmeyi tamamen ortadan kaldırmaz. Bir dosyanın değişip değişmediğini sunucuya sorabilir. Dosya yeniyse tarayıcı onu yeniden indirir. Önbellek bir kısayoldur, bir garanti değildir. 15

Tarayıcı dosyaları alır, yapı için HTML'i, görünüm için CSS'i ve bazı etkileşimler için JavaScript'i okur, ekleri yükler, yerleştirir ve çizer. Gördüğün sayfanın indirilen dosyalardan adım adım oluşturulduğunu ve önbelleğin tekrarları önlemeye yardımcı olduğunu unutma. Her parça, verileri ekranındaki sayfaya dönüştürmede rolünü oynar. 16