Photo by Panos Sakalakis on Unsplash

Tarayıcılar (Browser) Nasıl Çalışır ?

Tarayıcılar (Browser) Nasıl Çalışır ?

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.

Web Browsers

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
Chrome Tarayıcısı

3. Tarayıcının Üst Seviye Mimari Yapısı

Tarayıcının Üst Seviye Mimarisi

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store