Tarayıcılar nasıl çalışıyor[1/2]

Bir frontend developer olarak yazdığınız kod tarayıcı tarafından işlenirken tarayıcının nasıl çalıştığını bilmemek size çok zaman kaybettirebilir. Aldığınız hatanın neyden kaynaklı olduğunu anlamanız veya en azından keyword edinmeniz sizi devtools’da körü körüne CSS ile boğuşmaktan kurtarabilir.

Tarayıcıların nasıl çalıştığını bilmek size ne katabilir?

• CSS lerinizi daha doğru kurallara göre yazabilirsiniz.
• Birden fazla CSS kaynağı kullamanız durumunda tarayıcının bunları nasıl işlediğini, neye öncelik verdiğini bilirsiniz.
• Sayfanızı performans açısından nasıl optimize edebileceğinize dair fikir yürütebilirsiniz.

Bu katkılar size yeterince cazip geldiyse emin olun bu yazının sonuna kadar dayanabilirsiniz:)

NOT 1-Konu uzun olduğu için yazıyı ikiye bölmeye karar verdim. Bu bölümde render tree’nin oluşumuna kadar olan işleyişi anlatacağım.

NOT 2- Bazı terimlerin tam olarak Türkçe karşılığı olmadığı için, terimlerin anlamını yazdıktan sonra İngilizce olarak kullanmaya devam edeceğim.

Bildiğiniz gibi tarayıcının amacı sizin sunucudan istediğiniz kaynağı görüntülemek. Peki bunu nasıl yapar?

Siz tarayıcının adres barına ulaşmak istediğiniz içeriğin URL’ini (Uniform Resource Locator) girdiniz. Tarayıcı ulaşmak istediğiniz domain’in IP’sini öğrenerek (DNS lookup) sunucuya bir sorgu atar.

Tarayıcı sunucudan bir HTTP cevabı alır. Aldığı cevaba göre bir yol izler. Biz burada aldığı cevabın HTML olması durumunu inceleyeceğiz.

Genel tarayıcı yapısını oluşturan elemanlar (2)

Tarayıcıların genel olarak yapısı:

• Kullanıcı arayüzü
• Tarayıcı motoru
• Rendering motoru
• Networking
• Display backend
• JS interpreter
• Veri depolama

bölümlerinden oluşur.

Kullanıcı arayüzü: Kullanıcının tarayıcı ile iletişim kurmasını sağlayan arayüzdür. İleri/geri butonları, yenileme/durdurma butonları ve içeriğin görüntülendiği alan dışında kalan bütün kısımdır.

Tarayıcı motoru: Kullanıcı arayüzü ile rendering motoru arasındaki eylemleri dizeler.

Rendering motoru: İstenilen içeriğin görüntülenmesinden sorumludur.

Networking: Tarayıcı ve farklı ağ sunucuları arasında veri alışverişini sağlayan birimdir. Bu veri alışverişini farklı protokoller kullanarak yapabilir.

Display backend: Kullanıcı için bazı temel grafik bileşenlerinin oluşturulmasından sorumludur. (combobox vs).

JS interpreter: Javascript kodunu çözümleyip çalıştırır.

Rendering motoru

Cevapta dönen HTML kaynağının çözümlenip DOM ağacının oluşmasını, CSS stillerine göre elemanların görsel özelliklerinin hesaplanıp buna göre düzenlenip kullanıcıya sunulmasını sağlar.

Bunu yaparken şu adımları izler:

• HTML kaynağının parse edilmesi
• DOM un oluşturulması
• CSS kaynaklarının parse edilmesi
• Render tree’nin oluşturulması
• Layout
• Painting

Farklı tarayıcılar farklı render motorları kullanır fakat genel olarak çalışma prensipleri aynıdır.

HTML parsing

Bir dosyayı parse etmek: Dosya kaynağını, bilgisayar kodunun kullanabileceği bir yapıya dönüştürmektir. Düğüm ve dallanmalardan oluşan hiyerarşik bir yapı oluşur. Dosya oluşturulurken kullanılan kurallara dayanır.

HTML (Hyper Text Markup Language) syntax spesifikasyonları W3C organizasyonu tarafından tanımlanmıştır.

HTML yapı bakımından XML’e çok benzemektedir fakat parse edilmesi daha zordur. Bunun sebebi HTML’in hatalara daha toleranslı olmasıdır. HTML, normalde hiç olmayan bir tagi kullanmanıza, bazen açma yada kapama taglerini yazmamanıza bile izin verir.

Bu özellikler HTML’in parse edilmesini zorlaştırır çünkü izleyebileceğiniz tek bir kural veya yol oluşturmanızı engeller. Bu, HTML’in “context free” dil olmamasından kaynaklanır.

“Context free” bir dilde aynı karakter dizisinin anlamı içerikten bağımsızdır ve her zaman aynıdır. “Context free” olmayan dilde ise aynı karakter dizisinin anlamı yerine ve duruma bağlı olarak değişir, yani anlam içeriğe doğrudan bağlıdır.

Parsing sırasında iki işlem gerçekleştirilir:

1. Lexical analiz (sözlüksel analiz)

Lexical analiz sırasında veriler “token”lara atanır. Bu bir nevi bizim konuştumuz dilin kelime kelime sözlükten karşılık bulması gibi sembolize edilebilir.

Lexical analiz: Bir karakter dizisini “token”lara çevirmek.

Token: Başka bir şeyi temsil eden obje.

HTML “token”ları: Açma kapama tagleri, özellik (attribute) değerleri ve isimleri

Bu analizde kullanılan algoritmada bir “state” (durum) değişkeni vardır ve verinin anlamlandırılması bu “state”e bağlıdır.

• İlk state data statedir.
• “<” ile karşılaşınca open tag state (açık tag durumu) olarak değişir.
• Sonraki karakterler start tag token’ı oluşturur ve bu surada durum tag name state’ini alır.
• “>” ile kaşılaşılşana kadar durum tag name state olarak kalır.
• “>” karakterine gelince durum tekrar data state’ e geçer

<html>.......................................start tag
   <head>....................................start tag
      <title>................................start tag
         Test................................data
      </title>...............................end tag
   </head>...................................end tag
   <body>....................................start tag
      <h1>...................................start tag
        Parse me!............................data
      </h1>..................................end tag
   </body>...................................end tag
</html>......................................end tag

2. Syntax analizi

Syntax: Bir programda tanımlanmış sembol kombinasyonlarının, anlamlı bir dizilim oluşturmasında uyulan kurallar kümesi.

Parser bu aşamada lexerdan bir token ister ve aldığı token’i kendi syntax kurallarına uygun olarak “parse tree”ye yerleştirir. Parse tree DOM’u oluşturur. HTML ve DOM arasında birebir ilişki vardır.

DOM: Document Object Model, HTML dosyasının obje olarak gösterimi ve Javascript ile ilişkilendirilebildiği bir arayüzdür. İçerik ağacı olarak da bilinir (content tree).

Render tree’nin oluşturulması

Basitçe görsel özellikleri içeren dikdörtgen alanlardan oluşur denilebilir. Renk ve boyut gibi özellikleri içerir. Dosyanın görsel sunumu olan bu yapı içeriğin doğru sırada renklendirilmesini ve şekillenmesini sağlar.

Render tree elemanlarını Firefox ‘frame’, Webkit ise ‘render object’ olarak isimlendirir.

Görsel olmayan DOM elemanları render tree’ye eklenmediğinden, HTML ve DOM arasındaki ilişki birebir iken, DOM ve render tree arasındaki ilişki birebir degildir artık.

Örneğin <head> elemanı DOM’da yer alırken render tree’de yer almaz. Ayni şekilde “display” özelliği “none” olan elemanlar da render tree’de yer almaz. Diğer taraftan “visibility” özelliği “hidden” olan elemanlar render tree’ye eklenir.

DOM ve render tree arasındaki ilişkinin birebir olmamasının başka bir nedeni de bazı DOM elemanlarının birden fazla görsel karşılığı olmasıdır. Örneğin, “select”in 3 renderer’ı var :

• Display area
• Drop down list
• Button

HTML’in bozuk bir yapıda olması da DOM’dan farklı bir render tree oluşmasına sebep olur.

Aşağıda bir HTML kodunun DOM ve render tree yapısını görebilirsiniz:

Yazının bir sonraki bölümünde render tree’de yer alan elemanların CSS özelliklerinin ve sayfadaki pozisyonlarının nasıl hesaplandığını; son olarak da elemanların renklendirilmesini anlatacağım.

Kaynaklar:

1. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
2. A Reference Architecture for Web Browsers. Alan Grosskurth, Michael W. Godfrey