TARAYICILAR (BROWSER) NASIL ÇALIŞIR ?

Chrome Web Sayfasındaki Kullanıcı Etkileşimini Nasıl Yönetir ?

Onur Dayıbaşı
Frontend Development With JS
2 min readOct 12, 2020

--

Öncelikle Tarayıcılar nasıl çalışır konusunda yazdığım yazılara bakmak isterseniz Giriş, Temel Bilgiler, Chrome Multi-Process Mimari, Chrome Navigasyon nasıl gerçekleşiyor , Chrome Web Sayfasını nasıl çizer

Input Eventleri web sayfasında fare ile bir yerlere tıklama veya bazı formları doldurma anlaşılıyor olabilir ama tarayıcı bakış açısından kullanıcı ile ilgili her türlü etkileşim(gesture) bu input eventlerine dahil olur. Fare tekerleğinin scroll edilmesinden , touch pad ile dokunmak veya mouse bir elemanın üzerine getirmek vb..

Kullanıcı ekran ile etkileşime geçtiğinde , Browser Process bu etkileşim eğer Tab içerisindeki Web sayfasında ise bu etkileşimin Renderer Process tarafından ele alınması gerektiğini bilir ve bunun ile ilgili bir EventType(touchstart) oluşturup koordinat ve diğer gerekli bilgileri → Renderer Process iletir.

Renderer Process bu aşamada ilgili pozisyondaki event target belirleyip Event ile bu Event Target eşleştirmesi ve bu Event bağlı Listener çalıştırma işlemini gerçekleştirir.

https://developers.google.com/web/updates/2018/09/inside-browser-part4 (Event pass to Renderer Process)

Event Target(Olay Hedefini) Bulmak

Burda örneğin bir düğmeye veya bir metin alanına dokundunuz. Burda hangi hedef etkileşim yaptığınızı Compositor Thread → Main Thread bu konuda Event koordinatlarını verdiğinde Main Thread painting records (boyama kayıtları) üzerinde Hit Testi(ilgili alanın içerisinde mi ?) yapılarak ilgili event target belirlenir.

https://developers.google.com/web/updates/2018/09/inside-browser-part4 (Hit Tests)

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--