🚀 HTML & JavaScript: Sayfayı Hayata Geçirmek

<script> etiketinin yönetimi, async ve defer ile yükleme stratejileri ve DOM manipülasyonunun temelleri.

Selamlar, bugün HTML'in o statik ve sessiz dünyasını hareketlendiren, ona 'akıl' katan JavaScript entegrasyonuna bakacağız. Bir senior developer için kodun ne yazdığı kadar, o kodun ne zaman yüklendiği de kritiktir.

1. Tarayıcı Nasıl Okur?

Tarayıcı HTML dosyasını yukarıdan aşağıya doğru okur (parse eder). Eğer araya klasik bir <script src="..."></script> girerse, tarayıcı HTML'i okumayı durdurur, dosyayı indirir, çalıştırır ve sonra HTML'e devam eder. Bu durum, büyük script dosyalarında kullanıcının beyaz bir ekrana bakmasına neden olur.

2. Modern Çözümler: Async ve Defer

Bu tıkanıklığı aşmak için iki ana niteliğimiz var:

  • async (Asenkron): Script arka planda inerken HTML okunmaya devam eder. Script iner inmez HTML parsing durur ve script çalışır. Sıralama garantisi yoktur.
  • defer (Ertelenmiş): Script arka planda iner, ancak HTML parsing tamamen bitene kadar çalışmayı bekler. Birden fazla defer script'i yazıldıkları sırayla çalışır. Genelde en güvenli yol budur.

Teknik Bir Not: Efsanevi NFS Underground 2'yi web tarayıcısına taşıdığımız projede, devasa KTX2 loader ve 3D asset yönetim scriptlerimiz vardı. Eğer defer ve akıllı lazy loading mimarisini kullanmasaydık, tarayıcı o 1-2 GB'lık veri yapısını işlemeye çalışırken sekmeyi tamamen dondururdu. JavaScript'in yüklenme stratejisi, kullanıcı deneyiminin (UX) gizli kahramanıdır.

🚀 Sanal Kodlama Alanı Yükleniyor...

DOM Manipülasyon Mantığı

JavaScript ile yaptığımız her şey aslında DOM (Document Object Model) üzerinde gerçekleşir. HTML sadece bir metin belgesidir, ancak tarayıcı onu okuduğunda canlı, yaşayan bir nesne ağacına dönüştürür.

  • document.getElementById() gibi metodlarla bu ağaçtan bir dal (element) seçersiniz.
  • .innerText veya .style gibi özelliklerle o dalın içeriğini veya görünümünü değiştirirsiniz.
  • .addEventListener() ile kullanıcının o dala dokunup dokunmadığını dinlersiniz.

İşte modern web uygulamalarının tüm büyüsü bu döngüde gizlidir. Kodunuzu defer ile yükleyerek, bu ağacın tamamen kurulduğundan emin olur ve hataların önüne geçersiniz.

Ovid Game Studio | Teknik Notlar ovidgame.com