Javascript motorunun dahili çalışmaları, Olay döngüsü, Web API'leri, Olay kuyrukları ve Geri Aramalar.

giriiş

Javascript olmasaydı ne olacağını hiç hayal ettiniz mi? Javascript'in yokluğunda Netflix'te film izleyemez, Amazon'da alışveriş yapamaz veya Youtube'da video izleyemezdiniz. Hemen hemen her web sitesi Javascript kullanır ve web sayfasını etkileşimli hale getirir.

Javascript icat edilmeden önce, internet sadece düz HTML sayfalarından oluşuyordu. HTML ve CSS, bir web sayfasına yapı ve stil verir. Ancak Javascript, web sayfasını dinamik hale getirir . Kimlik bilgilerinizi girip bir web sitesine giriş yapabilir, çevrimiçi işlemler yapabilir veya oyun oynayabilirsiniz. Javascript her şeyin olmasını sağlar.

Stack-overflow üzerinde yapılan anketlerden biri Javascript'in GitHub'da en fazla depoya sahip olduğunu gösterdi. Javascript'te her yıl yeni çerçeveler ve kitaplıklar geliştirilmektedir. Dil, interneti gerçekten dönüştürdü ve insanların hayatını basitleştirdi.

Arka plan

İki yıl önce bir yan proje üzerinde çalışıyordum ve Javascript'i ilk kez kullandım. Son on yıldan beri deneyimli bir programcı olarak, sözdiziminde ustalaştım ve üç ay içinde iyi bir komut geliştirdim.

Aylar geçtikçe geliştirdiğim web sayfası iyi performans göstermedi. Yüklemesi uzun zaman aldı ve müşterileri etkilemeye başladı. Bu yüzden, temel nedeni belirlemek için derin bir dalış yaptım.

Uykusuz geceler geçirdikten sonra nihayet aklım başıma gelmişti ve pes etmek üzereydim. Ancak son bir deneme yapmaya karar verdim. Son olarak, Javascript'in dahili olarak nasıl çalıştığını tam olarak anlamayı düşündüm. Pek çok kaynağa başvurdum ve sonunda kodumdaki hatayı iki gün içinde düzeltebildim.

Mühendisler genellikle yeni şeyler inşa etmeye odaklanır. Kullandığımız araçlar ve çerçeveler, karmaşıklığın çoğunu bizden gizler. Yolculuğumuzda, perde arkasında işlerin gerçekte nasıl yürüdüğünü unutma eğilimindeyiz. Kullandığımız herhangi bir aracın iç işleyişini bilmek gereklidir. İşin içindekileri iyi anlamak, sorunu daraltmamıza ve pragmatik bir çözüm bulmamıza yardımcı olur.

Bu yazıda, Javascript tarayıcı tarafından çalıştırıldığında perde arkasında neler olduğuna bakacağız. Javascript motoruna bir göz atacağız ve çalıştığını anlayacağız. Javascript çalışma zamanında yer alan farklı bileşenleri göreceğiz ve Olay Döngüsü ve Olay sırası hakkında netlik elde edeceğiz. Bu terimler sizin için yeni olsa da, makale her birini basitleştirmeye çalışacak. Javascript'in iç kısımlarında ustalaşma arayışımızla başlayalım.

JavaScript

Javascript, yüksek düzeyde yorumlanan bir dildir. C veya C++'dan farklı olarak, Javascript kodunu derleyip çalıştırmamız gerekmez. Javascript kodu önce bayt kodunda derlenir ve ardından makine düzeyinde koda çevrilir.

Java, C, C++, C# gibi yüksek diller çoklu iş parçacığını destekler. Bu diller, programcıların birden çok iş parçacığı oluşturmasına ve görevleri farklı iş parçacıklarında çalıştırmasına olanak tanır. Böylece, görevleri birden çok CPU'da oluşturabilir ve bilgi işlem kaynaklarını verimli bir şekilde kullanabiliriz.

Aksine, Javascript tek iş parçacıklıdır. Bu, herhangi bir anda yalnızca tek bir yürütme iş parçacığı olduğu anlamına gelir. Zaman alan bir javascript işlevi yürütmeniz durumunda, web sayfası donacaktır. Gezinirken birçok kez Web Sitesi yanıt vermiyor hatası görmüş olabilirsiniz .

Hızlı bir demo yapalım ve çalışmayı çalışırken görelim. TrendingTwitter'ı açtım ve , News, Sportsvb. gibi ayrı ayrı sekmelere tıklayabiliyorum.

Şimdi konsolumda sonsuzdeveloper döngü içeren bir fonksiyon yazıyorum . Fonksiyonun tanımı aşağıdadır.

function infiniteLoop() {
    for(i=0; i < 100000; ) {
    }
}
infiniteLoop()

SportsAşağıdaki GIF, sekmeyi veya olarak değiştiremediğimi gösteriyor Entertaintment.

Fonksiyon sonsuz bir döngü içerdiğinden, sonsuza kadar çalışmaya devam edecektir. Farklı sekmeler seçtiğimde, tarayıcının clickolayı işlemesi ve buna göre tıklanan sekmenin içeriğini göstermesi gerekiyor. Javascript zaten işlevi çalıştırdığından başka bir sekme seçemiyorum infiniteLoop.

Yukarıdaki örnekte görüldüğü gibi Javascript'te aynı anda sadece bir fonksiyon çalıştırabiliyoruz. Şimdi, Tarayıcının karmaşık web sitelerini saniyeler içinde nasıl yükleyebildiğini sorgulayabilirsiniz.

Javascript'in bu sihri perde arkasında nasıl yaptığını ilerleyen bölümlerde anlayacağız. Şimdi Javascript'in çekirdeğini, yani Javascript Engine'i anlayalım.

JavaScript Motoru

Her tarayıcı kendi Javascript Motorunu sağlar. Örneğin: - Chrome, V8 motorunu kullanırken Firefox, SpiderMonkey Engine'i kullanır. Motor, Javascript kodunu satır satır yürütmekten sorumludur. Aşağıda, popüler tarayıcıların ve Javascript motorlarının bir listesi bulunmaktadır.

Javascript motoru bir Heap ve bir Stack'ten oluşur . Bu iki unsurun işleyişini anlayalım.

Yığın

Öbek, işlev tanımlarını, nesne değişkenlerini depolamaktan sorumludur. Kod tarafından başvurulan tüm nesneleri içerir.

Nesneler yığında dinamik olarak oluşturulur. Çalışma java'ya benzer. Nesneye bir işlev tarafından başvurulduğu zaman yığından getirilir.

function bar() {
    var player = { "firstName": "Shubhman",
                   "lastName": "Gill"
                 }
    var teams = ["India", "NewZealand"]
    i =0
    a = 10
    console.log("In the function bar")
}

bar()

      
                

                    
                    
                
            

Yığın

Yığın , Son Giren İlk Çıkar (LIFO) veri yapısıdır. Bir işlev her çalıştırıldığında, işlevin yerel değişkenleri yığına gönderilir. İşlev yürütmeyi tamamladığında, yığından kaldırılır. Bir işlev yürütme sırasında yeni bir işlev çağırırsa, yeni işlev de yığına gönderilir. Motor, yığının en üstünde bulunan işlevi çalıştırır.

Yığının en altında bulunan işlevler, üstündeki tüm işlevler geri döndüğünde yürütmeye devam eder. Bir işlevin hata vermesi durumunda, console. Yığın izi, istisna atıldığında çağrılan işlevler zincirinden oluşur. Bir örneğe bakalım.

Yukarıdaki kodu tarayıcımda çalıştıracağım. Ve işlevde bir kesme noktası ekleyin city.

Yukarıda görüldüğü gibi betik yürütülürken fonksiyondaki kesme noktasında durmuştur city. Sağ tarafta, bölümde , üstte işlevi Call Stackgörebilirsiniz .city

Call StackŞimdiye kadar çağrılan tüm işlevlerden oluşur . Ve en son işlev en üste yerleştirilir. İşlev yürütmeyi tamamladığında, yığından kaldırılır.

Aşağıdaki görselde gördüğünüz gibi fonksiyon kaldırılmış ve 9 numaralı satırda cityfonksiyon için yürütme devam etmektedir .street

Yukarıda görüldüğü gibi, Javascript aynı anda yalnızca bir işlevi çalıştırabilir ve yalnızca bir yürütme iş parçacığı vardır. Yürütme yığınında birden çok işlevi aynı anda çalıştıramazsınız.

Diyelim ki HTTParama yapan ve başka bir web sitesinden veri alan bir fonksiyonumuz var. Sunucu yavaşsa ve işlevin yürütülmesi uzun sürerse ne olur? Başka bir işlevi çalıştıramayacağız ve kullanıcı deneyimi çok zayıf olacaktır.

Bu gerçek dünyada oluyor mu? Hayır, Facebook.com , Twitter.com , Amazon.com gibi karmaşık web siteleri , kullanıcı deneyimini etkilemeden tonlarca Javascript kodu çalıştırır. Nasıl olduğunu anlamak için Javascript çalışma zamanını derinlemesine inceleyeceğiz.

Javascript çalışma zamanı

Javascript, sunucudan veri almak, DOM'u değiştirmek veya bir zamanlayıcı kullanarak işlevleri yürütmek için bize çeşitli API'ler sağlar. Javascript'in tek iş parçacıklı yapısı nedeniyle, bir web sitesinin oluşturulmasını durdurabilir ve bu da düşük performansa yol açabilir. Ancak, Javascript çalışma zamanı bunun olmamasını sağlar. Bunu bir örnekle anlayalım.

Aşağıdaki kodun çıktısının ne olacağını tahmin edebilirsiniz: -

getSubTitlesBasıldıktan sonra basılacak mı getActors? Ve aradıktan sonra setTimeoutkod duracak mı?

Yukarıdaki kodu çalıştırarak oluşturulan çıktı aşağıdadır: -

Yukarıda görüldüğü gibi getSubTitlesönce basıldı ve 4 saniye sonra getActorsbasıldı. İşlev setTimeout4 saniye beklemesine rağmen, yine de sonraki işlevi daha önce yürüttü getSubTitlesve kod beklemedi. Şimdi perde arkasında neler olduğunu anlayalım.

Web API'leri

Javascript kaynak kodunda setTimeoutveya herhangi bir yerde gibi işlevlerin uygulanmasını bulamazsınız . fetchBu işlevler tarayıcı tarafından sağlanır ve Javascript'in bir parçası değildir. Uygulama her tarayıcı için farklı olacaktır.

Tarayıcı, ağ aramaları gerçekleştirmek, DOM'u değiştirmek, ses, video vb. işlemek için işlevler sağlar. Bu işlevler Web API'lerini oluşturur. Dahili uygulama karmaşıktır ve öncelikle C++ kodundan oluşur. API'ler bize Javascript kodundan çağrılabilen bir arayüz sağlar.

gibi bir işlevi çağırdığınızda setTimeout, Javascript bunun bir Web API olduğunu anlar. Daha sonra bu işlevin yürütülmesini Web API kapsayıcısına devreder. İşlev setTimeoutayrı bir iş parçacığında yürütülür. Javascript'in yürütme iş parçacığında yürütülmez. setTimeoutBundan sonra yazılan kodun , kendisine geri çağırma işlevi geçmeden önce çalıştırılmasının nedeni budur .

Benzer şekilde, ağ aramaları zaman aldığından, gibi işlevler fetchayrı bir iş parçacığında yürütülür. Tarayıcı Web API'leri, karmaşıklığın çoğunu bizden gizler. Örneğin: - dahili uygulaması, fetchbir TCP bağlantısı oluşturmayı, verileri göndermeyi ve ayrıştırmayı içerir. Ek olarak, yürütmeyi uygun iş parçacığı üzerinde planlayarak bilgi işlem kaynaklarını verimli bir şekilde kullanır.

Aşağıdaki gif, gibi Web API işlevlerini yürüttüğünüzde ne olduğunu gösterir setTimeout.

Yukarıda görüldüğü gibi, işlev çağrıldığında, geri arama işlevini Web API'lerine setTimeoutgönderir . getActorsWeb API'leri kapsayıcısında, işlev setTimeoutdört saniye bekler. Bu arada, sonraki işlev getSubTitlesçağrılır.

getActorsŞimdi, zamanlayıcı sona erdikten sonra geri arama işlevinin nasıl yürütüldüğünü sorabilirsiniz . Bir sonraki bölümde, Web API'leri geri döndükten sonra geri aramaların nasıl yürütüldüğünü göreceğiz.

Olay Kuyruğu

Javascript büyük ölçüde geri arama işlevlerine dayanır. Geri arama işlevleri, bir olay meydana geldiğinde yürütülür. Örneğin:- Sunucudan bir yanıt aldıktan sonra temsili yazdırmamız gerekiyor json. Veya 4 saniyelik bir gecikmeden sonra bir işlevi yürütün.

Javascript çalışma zamanı, Olay Kuyruğu veya Geri Arama Kuyruğu olarak bilinen bir bileşenden oluşur. Bu bir mesaj kuyruğudur ve İlk Giren İlk Çıkar (FIFO) sırasını kullanır. Mesajlar, yürütülmesi planlanan geri arama işlevlerinden başka bir şey değildir.

Bunu anlamak için bir örnek verelim. Aşağıdaki kodda, bir düğme üzerinde bir tıklama olayı olduğunda bir geri arama işlevi kaydediyoruz. Kullanıcı düğmeye tıkladığında, işlev onClickçağrılır. Bu işlev, işlevi timer2 saniyelik bir gecikmeden sonra çağırır.

Yukarıdaki animasyon, perde arkasında neler olduğunu gösterir. Burada iki Web API'miz var — a) $.onve b) setTimeout. İlk API, bir tıklama olayının gerçekleşmesini bekler. Bir tıklama olayı aldığında, işlevi yürütür onClick. İkinci API, işlev setTimeOuttarafından daha sonra çağrılır onClick.

Kullanıcı düğmeyi her tıkladığında, işlev onClickOlay Kuyruğuna gönderilir. Benzer şekilde, zamanlayıcı sona erdikten sonra işlev timerkuyruğa itilir. Böylece olay sırası, yürütülmesi gereken tüm geri arama işlevlerinden oluşur. Bu durumda onClickve timerişlev.

Olay Döngüsü

Geri arama işlevleri, EventQueueOlay Döngüsü aracılığıyla Javascript'in yürütme yığınına ulaşır. Olay döngüsü, geçerli Javascript Yığınının boş olup olmadığını sürekli olarak kontrol eder. Yığının boş olduğunu tespit ederse, Olay Kuyruğundan ilk mesajı alır ve yığına doğru iter.

Bir önceki bölümün örneğini ele alırsak, Olay Döngüsü yığının boş olduğunu anladığı anda geri arama kuyruğundan bir sonraki iletiyi alır ve yürütür.

Aşağıda, olay döngüsünün çalışması için kaba bir sözde kod verilmiştir: -

Bir Olay döngüsünü, yürütme yığınını sürekli olarak izleyen sonsuz bir döngü olarak düşünebilirsiniz. Yığın boş olması durumunda, Olay Kuyruğundan bir mesaj (işlev) alır ve yürütür.

Aşağıdaki şema, Javascript çalışma zamanının üst düzey temsilini göstermektedir.

Javascript çalışma zamanındaki farklı bileşenlere baktık. Artık Javascript'in arka planda nasıl çalıştığı hakkında daha iyi bir fikre sahip olacaksınız. Şimdiye kadar öğrendiklerimizi özetleyelim.

Özet

• Javascript tek iş parçacıklıdır ve her seferinde bir işlevi yerine getirir.
• Arka planda karmaşık görevleri yürütmek için Web API'lerinden yararlanır.
• Web API yürütmesi tamamlandığında, geri arama işlevlerini Olay kuyruğuna gönderir.
• Olay döngüsü, Javascript yığınının boş olup olmadığını sürekli olarak kontrol eder. Yığın boş olması durumunda Event kuyruğundan callback fonksiyonunu alır ve çalıştırır.

• Javascript iç öğeleri ve çalışma zamanı
• Javascript tarayıcıda ve düğümde nasıl çalışır?
• Node.js olay döngüsüne yönelik animasyonlu bir kılavuz
• Zaten olay döngüsü de nedir?
• Eşzamansız Javascript ve sıfırdan olay döngüsü