Tarayıcılar (Browser) Nasıl Çalışır ?
Tarayıcılar (Browser) Nasıl Çalışır ?
Bu yazımda web sayfalarına ve uygulamalarına erişim için kullandığımız tarayıcıların (Chrome, Safari, Edge, Firefox vb..) nasıl çalıştığını anlattığım bir yazı serisinin başlangıç yazısı olarak yazıyorum.
Tarayıcıların çalışmasını derinlemesine inceleyerek kullanıcının web sayfasını gezerken, veya bir web uygulamasını kullanırken arka planda neler döndüğünü , hangi işlemler yapıldığını bilmek, biz Frontend Developer için çok önemlidir. Çünkü biz geliştirmelerimizi bu platformlar üzerinden son kullanıcının erişimine sunarız. Aynen mobil uygulama geliştiricilerinin iPhone ve Android telefonlarının çalışma mantığını bilmesi gibi.
Not: Chrome Nasıl Çalışır Yazı Serisine bu linkten erişebilirsiniz.
Öncelikle Tarayıcı dediğimizde aklımıza neler geliyor ? Chrome, Safari, Firefox, Edge, Opera, Brave vb . Herkes aşağıdaki simgeleri aşinadır. Hatta çoğu kişi sadece Desktop değil mobil uygulamasından bir şeyler ararken, gazete ve içerik okurken bu tarayıcıları kullanır.
1. Tarayıcının Ana Fonksiyonu
Tarayıcının ana fonksiyonu , kullanıcının belirlediği adresteki sunucudan web kaynakları için istekte bulunarak bu içeriklerin cihaz ekranlarında görüntülenmesini sağlar
- Adresteki (URI): www.google.com
- Sunucudan (Web Server): Tomcat, Jetty, Express, vb…
- Web Kaynakları (Resources): HTML, CSS, JS, Image, PDF vb..
- İstekte (Request): HTTP Request….
- Görüntülenmesi (Render): HTML, PDF, Image, SVG, ekrana çizmek
2. Tarayıcının Ana Elemanları
Tarayıcı elemanları şu şekilde olsun standardı yoktur. Kullanıcı kitlesinin best practice doğrultusunda oluşmuş bir kullanım alışkanlığı olan ekran elemanları ortaya çıkmıştır. Bu elemanların ne olacağı HTML Standartları içerisinde yer almaz.
- URI girebileceğiniz Adres Çubuğu
- Gezdiğiniz URI arasında gezebilmenizi sağlayan Geri ve İleri Düğmesi
- Gezdiğiniz URI kaydetmek için Bookmark Opsiyonları
- Sayfanın yüklenmesi tekrarlayan (refresh) düğme
- Farklı farklı web url farklı (tab sayfaları) içerisinde gösterme
- Web sayfası içeriğinin gösterildiği (content) alanı
- Sayfa ile ilgili bilgilendirme mesajlarının Status Çubuğunda gösterilmesi
3. Tarayıcının Üst Seviye Mimari Yapısı
Kullanıcı Arayüzü(UI) : Tarayıcının ana elemanlarına listelediğim , adres çubuğu, ileri geri düğmesi, yenile düğmesi , bookmark menu vb tarayıcı ekranında web içeriğinin gösterildiği alan dışındaki kısım.
Tarayıcı Motoru(Browser Engine) : Görüntüleme Motoru ile Kullanıcı arayüzü arasındaki etkileşimi birbirine bağlama görevini yerine getirir.
Görüntüleme Motoru (Rendering Engine): İstek sonucunda gelen içeriğin ekranda görüntülenmesinden sorumludur. PDF, HTML, Image vb.. Bu içerik bir HTML sayfası ise rendering engine bu HTML, CSS parse ederek bunun üzerinde JS etkilerinide yansıtarak içerik ekranında görüntüler
Networking: Tarayıcı ve sunucu arasında HTTP Request veya başka protokolleri gerçekleştirerek sunucu sistem ile iletişim kurmayı sağlar (WebSocket, WebRTC vb.. farklı protokoller ihtiyaçlarınıda karşılar)
JS Interpreter: JS kodunun parse edilip , çalıştırılmasını sağlar.
UI Backend: Platform spesifik window, combobox, ve temel widget çizimini gerçekleştirecek işletim sistemi seviyesi API sağlıyor diyebiliriz. Burda HTML içeriğinin çizildiği RenderingContext sağlıyor diyebiliriz.
Veri Tutma (Data Persistence): Tarayıcı tarafında tutulması ihtiyacı olan verileri tutmayı ve erişimi sağlayan katmandır. Bu sayede cookie, LocalStorage, IndexedDB, WebSQL and FileSystem erişim imkanları mümkün olur.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
