Web Tarayıcılar Nasıl Çalışır?

İnternet ile yaşadığımız bir çağdayız. İnternetsiz bir dünya hayal etmek çok zor. Buna istinaden Web tarayıcılar nasıl çalışır konusu üzerinde duracağız.

Web tarayıcı, internete erişmemiz için ana merkezi oluşturmaktadır. Her gün milyonlarca insan web sitelerini tarayıcılar aracılığıyla ziyaret etmektedir. Web trafiğinin %95’lik kısmını; Chrome, Firefox, Internet Explorer, Safari ve Opera oluşturmaktadır.

Bir web tarayıcısının gerçekleştirmesi gereken görevlerinden biri şudur; adres çubuğu aracılığıyla bir web URL’sini kabul eder, kaynakları getirir ve bunları ekranda görüntüler.

Tarayıcı işlevleri dört ana bölümde sınıflandırılır ve şunlardır:

• Getirme (Fetch)
• İşleme (Process)
• Görüntüleme (Display)
• Depolama (Storage)

Her bir sınıf, tarayıcının yürütmesi gereken görevleri tanımlar ve alt sistemlerden oluşur.

Getirme (Fetch)

Ağ katmanı adı verilen büyük bir alt sistemdir. Internet üzerindeki web sunucularından veri alınmasında hayati bir rol oynar.

Ağ Katmanı (The network layer)

Tarayıcı kullanıcı arabiriminden URL’leri kabul eder ve HTTP/FTP protokolleri aracılığıyla kaynakları getirmek için ağ çağrıları yapmaktan sorumludur.

İşleme motoru adı verilen işlem alt sistemine veri besler ve performansı artırmak için genellikle bayt boyutunda işlem yapar.

İstenen web sitesi bir önbellek uygularsa, bir sonraki sefer için App Cache için verilerin kopyası işlenir. Önbellekler, hızlı yanıt süreleri ve düzenli ziyaretler için ağ isteklerini kaydetmeleri açısından son derece önemli ve kullanışlıdır.
Tarayıcı başlangıçta, istenen URL’ler için yerel bellekte herhangi bir önbellek kullanılabilirliği tarar. Eğer önbellek bulamazsa; ağ katmanı, internet üzerinden bir web kaynağı istemek için alan adına sahip bir HTTP paketi oluşturur.
Ağ katmanı, kullanıcı deneyiminde önemli bir rol oynar. Tarayıcılar uzak verilerin/içeriğin gelmesini beklediğinden, web performansında bir darboğaz olabilir. Kullanıcı deneyimi üzerindeki bu etkiyi azaltmak için çeşitli teknikler kullanılabilir.

İşleme

Bu adım, ağ katmanından veri kabul etmeyi ve görüntüleme alt sistemlerini beslemeyi kapsar. Render motoru, JS motoru ve UI arka uç alt sistemleri sürecin bir parçasıdır.

Rendering Engine

Rendering Engine alt sistemi, ağ katmanından gelen verileri işler ve web içeriğini ekranda görüntüler.
Varsayılan olarak HTML, XML ve Görüntü dosyalarını işleyebilir. Ancak, uzantılar aracılığıyla çeşitli veri türlerini barındıracak şekilde genişletilebilir.

Birçok render motoru mevcuttur ve genellikle C++ ile yazılır. Örnek vermek gerekirse:

• Chrome ve Opera, Blink’i kullanıyor
• Firefox Gecko’yu kullanıyor
• Internet Explorer Trident kullanıyor
• Edge, EdgeHTML kullanıyor
• Safari, WebKit’i kullanıyor

Render motorları ile web kaynakları ayrıştırılır. Örneğin, bir HTML ayrıştırıcısı, bir HTML şablonunu DOM ağacı adı verilen bir nesneye dönüştürür.

Stil sayfaları, hem harici hem de satır içi stil öğeleri için stil kuralları oluşturmak üzere ayrıştırılır.
Render ağacı, hem ayrıştırılmış HTML’yi hem de CSS’yi birleştiren bir nesnedir. Öğeleri kullanıcının ekranında oluşturmak için görsel talimatlar ve niteliklerle oluşturulur.

Render ağacı oluşturulduktan sonra, yerleşim ve boyama işlemlerinden geçer ve çıktıyı ekranda görüntüler.
Yerleşim süreci, her bir öğenin görünüm alanında görünmesi gereken boyutların ve kesin koordinatların hesaplanmasıdır.

Boyama işlemi, mizanpajı renk, arka plan ve diğer CSS özellikleri gibi stil nitelikleriyle doldurma işlemidir.
Render motoru, verileri parçalar halinde işler ve içeriği mümkün olan en kısa sürede görüntüler. Tüm belge içeriği mizanpaj ve boyama süreçlerinden geçene kadar beklemeyecektir.

JavaScript motoru

Bu, JavaScript kodunu makine koduna ayrıştırmak ve ardından yürütmek için kullanılan alt sistemdir. Bu JS motorları, standart yorumlayıcılar veya JIT (tam zamanında) derleyiciler olabilir.

En popüler motorlardan biri Google V8 motorudur. C++ ile yazılmıştır. Aşağıda farklı tarayıcıların kullandığı bazı örnekler verilmiştir:

• Chrome, Chrome V8’i kullanıyor
• Safari, JavaScriptCore’u kullanıyor
• Firefox, SpiderMonkey’i kullanıyor
• Edge Çakra kullanıyor
• Internet Explorer Çakra (JsScript) kullanıyor

Bu motorlar iki bileşen içermektedir: bellek yığını ve çağrı yığını.

Bellek yığını, değişkenler, işlevler ve diğer JS öğeleri için belleğin ayrıldığı yerdir. Çağrı yığını, tarayıcı tarafından yürütülen yığın çerçevelerinin veya sıralı adımların bir sırasıdır.

JavaScript tek iş parçacıklı bir işlemdir ve her giriş veya yürütme adımı bir yığın çerçevesidir.
Bu motorlar, çeşitli görevleri gerçekleştirmek için dahili olarak birkaç iş parçacığına sahiptir. Bu tür görevlere örnek:

• Kodun alınması, derlenmesi ve yürütülmesi
• İşlevleri ve zaman tüketimini analiz etmek için bir profil oluşturma iş parçacığı
• Yürütme sürecini optimize etme
• Çöp toplayıcılar

Google’ın V8 motoru, çöp toplama işlemini aşamalı olarak gerçekleştirmek için bir işaretle ve süpür yöntemi kullanır. Bu, tarayıcının boşta kalma süresini kullanır ve performansı artırır.

5.9 sürümünden itibaren (2017 başı), Ignition ve Turbofan, V8 motorundaki en yeni hattır.
NodeJS , Google’ın açık kaynaklı V8 motoruna dayalı olarak oluşturulmuş bir sunucu tarafı JavaScript runtime (çalışma zamanıdır). Sunucu tarafında JavaScript çalıştırmak için kullanılır.

Görüntüleme(Display)

Adından da anlaşılacağı gibi, verileri kullanıcılara sunmakla ilgilenir. Kullanıcı Arayüzü ve Tarayıcı Motoru , veri sunumundan ve kullanıcı gezinmesini yönetmekten sorumludur.

Kullanıcı arayüzü

Tarayıcının görsel görünümüdür. Web URL’lerini kabul etmek için bir adres çubuğu ve geri, ileri, yenileme, ana sayfa ve yer imleri çubuğu gibi gezinme düğmeleri vardır.

Bu girişler ve eylem düğmelerinin yanı sıra , web sitelerinden alınan içeriği görüntülemek için görünüm alanı mevcuttur.

Kullanıcı Arayüzü (UI), içeriği görüntülemek ve buna göre hareket etmek için tarayıcı içindeki diğer alt sistemlerle iletişim kurar.

Tarayıcı motoru

Tarayıcı motoru, işleme motoruna üst düzey bir arabirim sağlayan, gömülebilir bir alt sistemdir. Belirli bir URL’yi yükler ve ileri, geri ve yeniden yükleme gibi ilkel tarama eylemlerini destekler.
Tarayıcı motoru, işleme motoru ayarlarını sorgulamaya ve değiştirmeye de izin verir.

Depolama

Web tarayıcıları, birkaç işlem gerçekleştirmek, verileri önbelleğe almak ve diğer tarayıcı işlevleri için tarayıcı üzerinden veri depolamak için küçük bir depolama kapasitesine sahiptir.

Veri depolama

Veri kalıcılığı, çeşitli tarayıcı API’leri aracılığıyla sağlanır. Bazıları şunlardır:

• Yerel depolama
• Oturum Depolama
• Çerezler
• WebSQL
• IndexedDB
• Dosya sistemi
• Uygulama Önbelleği
• Service Workers

Yerel depolama ve Oturum depolama, tarayıcıda herhangi bir JS nesnesini ve işlevini depolayabilen anahtar/değer çiftleridir.

Oturum depolama, bir web sitesi oturumu etkin olduğu sürece tarayıcıdaki verileri korur. Yerel depolama, tarayıcıdaki bellektir. Kullanıcı veya JavaScript kodu tarafından silinene veya açıkça değiştirilene kadar verileri devam ettirir.

Bu Oturum ve Yerel web depolama sınırları, nesne başına 5 MB ve sistem başına 50 MB’dir.
Çerezler, tarayıcı belleğinde depolanan anahtar çifti verilerinin koleksiyonlarıdır. İstemci ve sunucu arasında git gel görevi görür.

WebSQL, IndexedDB ve FileSystem, boyuta, performansa ve gerekliliğe bağlı olarak verileri tarayıcıda saklama yeteneklerine sahiptir.

Uygulama Önbelleği HTML5’te tanıtıldı. Web sitesi statik içeriğini depolar ve ağ kesintisi sırasında UI içeriği sunar.
Service Workers (Hizmet Çalışanları), Google’ın çevrimdışı kullanım için web sitesi verilerini önbelleğe almanın yeni yoludur. App Cache ile karşılaştırıldığında önemli özelliklere sahiptir.

Özetlemek gerekirse

Tüm büyük web tarayıcıları, sürece yardımcı olmak için diğer alt modüllerle birlikte alt sistemlerden oluşur. Bu sistemler, web URL’lerini kabul etmekten web içeriğini ekranda görüntülemeye kadar dahil edilir. Ekranda oluşturulacak nesneler oluşturmak için ağ aramaları yapar, kaynakları getirir, HTML, CSS ve JavaScript dosyalarını ayrıştırırlar. Bunların hepsi, kullanıcı için harika bir web sitesi oluşturmak için birleşir.