Web tarayıcılar nasıl çalışır ?
Tarayıcı Mimarisi
Web tarayıcılar; client isteklerini, belirli protokoller ile bir mimari içerisinde bulunan komponentlerin sıralı işlemlerinden geçirerek, formata uygun sonuçlar getirmesini sağlayan araçlardır.
Aşağıdaki popüler ve anlaşılır görseli inceledikten sonra komponentlerin görevlerine bakalım.
Kullanıcı arayüzü
Tarayıcı içerisinde web sayfasının içeriğini gösteren kısım dışındaki tüm komponentler, tarayıcının kullanıcı arayüzünü kapsar. Adres çubuğu, eklentiler, yer imleri, kontrol butonları (yenile, durdur, geri, ileri, anasayfa) bileşenleri bunlara örnektir.
Browser Engine (Tarayıcı Motoru)
Kullanıcı Arayüzü(UI) ile Rendering Engine arasındaki işlemleri sıralar.
Rendering Engine
Web sitesinin HTML kodlarını parse eder, CSS içeriklerini ve style objelerini ayrıştırarak DOM(Document Object Model) diye bilinen içerik ağacını oluşturur. Ancak Rendering Engine, bu aşamaların tamamlanmasını beklemeden UI kısmında son kullanıcıya içeriği göstermeye başlar ve geri kalan kısım networkten geldikçe düzenlenip gösterilir.
Rendering enginelere aşağıdakiler örnek gösterilebilir:
Mozilla Firefox -> Gecko
Google Chrome -> Blink
Safari ve tüm IOS tarayıcıları -> WebKit
Microsoft Edge -> EdgeHTML
Opera -> Blink
JavaScript Engine (JS Motoru)
Web tarayıcılarının JavaScript kodlarını çalıştırabilmeleri için gerekli derlenme işlemlerinin yapıldığı kısımdır. Bugünkü Mozilla’nın JS Engine’i olan SpiderMonkey, ilk olarak 1995 yılında ilk tarayıcı olan Netscape Navigator için oluşturulmuştur.
Google Chrome -> V8 JS Engine (En çok kullanılan)
Mozilla Firefox -> SpiderMonkey
Apple Safari -> JavaScriptCore & Nitro
Microsoft Edge -> Chakra
Network (Ağ)
URL çubuğuna bir adres girildiğinde bir sonraki durak DNS sunucusu olur. IP listelerini barındıran DNS sunucusu domain’i çözümleyerek ilgili IP’ye sahip sunucuya ulaşmamızı sağlar. Tarayıcı böylelikle sunucudaki istenen içeriği alıp istemcinin ekranına sunar.
Web tarayıcılar destekledikleri protokoller üzerinden yapılan istekler ve aldıkları verileri tarayıcı içerik ekranında göstermeye yarayan ağ komponentidir. Bu protokollerin kullanılabilirliği web tarayıcılar arasında değişiklik gösterir.
Örneğin; Google Chrome HTTP, HTTPS, FILE, FTP gibi protokolleri desteklerken Mozilla Firefox ek olarak about isimli pseudo protokolü de destekler. E-posta göndermeye yarayan SMTP protokolü ise bu tarayıcılarda bir e-postayı direct SMTP sunucusundan almaz. Ağdaki trafik yoğunluğunu azaltıp zamanı optimize edebilmek için kullanılan cache mekanizması da bu katmanda barınır.Ağdaki trafik yoğunluğunu azaltıp zamanı optimize edebilmek için kullanılan cache mekanizması da bu katmanda barınır.
UI Backend
Tarayıcı penceresi, combobox, input, button gibi widgetlar tarayıcının çalıştığı işletim sistemine göre oluşturulur. Bu komponentler tarayıcıdan ziyade işletim sistemi için vardır.
Data Persistence
Web tarayıcılar, kullanıcıların web deneyimlerini kişiselleştirmek için ilk çıktıkları günden beri veri depolarlar. Bu veriler daha sonra kullanılmak üzere saklanır.
Cookie
Çerezleri toplama vasıtasıyla persistence sağlamaya çalışma yöntemi, web tarayıcılarının ilk günlerinden beri var ve hala yaygın olarak kullanılır. Daha önce bir websitesine kullanıcı bilgileri ile giriş yaptığımızda daha sonra o websitesindeki inputlarda eski değerlerin önerilmesi cookieler sayesinde yaşatılan bir deneyimdir. Ancak günümüzde güvenli ve best practice olarak anılmazlar. Bunun nedeni ise cookielerin her HTTP isteğinde tarayıcıdan sunucuya taşınması ve olası saldırılarda ulaşılması çok kolay veriler olması.
- LocalStorage
LocalStorage, tarayıcının önbelleğinde her bir domain başında 5MB boyutunda dataların key/value formatında tutulduğu birimdir. LocalStorage cookielere nazaran her istekte sunucuya gönderilmezler, bu nedenle daha güvenlidir. JavaScript aracılığıyla eklenip silinebilirler.
SessionStorage
LocalStorage’a nazaran sadece sekme yönetiminde kullanılır.
- IndexedDB
Web tarayıcısı içerisinde gömülü olarak bulunan IndexedDB, NoSQL veritabanı formatında olup, çevrimdışı çalışılabilme yeteneğine sahiptir. Dosya, Blob gibi yapılandırılmış verilerin depolanmasını sağlar. Böylelikle depolama olarak LocalStorage gibi kısıtlı ve düşük miktarda değildir.
Cache API
Depolama işlemini önbellekte tutan ve bir sonraki istekte sunucuya gitmek yerine önbellekten, ağ üzerinden veriyi çeken bir yapıdır. Tüm modern web tarayıcılarında kullanılmakla beraber web uygulamalarında hız optimizasyonu için tercih edilen ve popüler bir yöntemdir.
Öğrenmenin gücünü öğreterek keşfetmeniz dileklerimle…
Referanslar:
https://developer.mozilla.org/en-US/docs/Web/API
https://stackabuse.com/storing-data-in-the-browser-with-localstorage/
https://en.wikipedia.org/wiki/Web_storage
https://www.slideshare.net/quangntta/web-browser-architecture-49196378
