Cara kerja internal mesin Javascript, Event loop, Web API, Event queue & Callback.

Perkenalan

Pernahkah Anda membayangkan apa yang akan terjadi jika tidak ada Javascript? Dengan tidak adanya Javascript, Anda tidak akan dapat melakukan streaming film di Netflix, berbelanja di Amazon, atau menonton video di Youtube. Hampir, setiap situs web lain menggunakan Javascript dan membuat halaman web menjadi interaktif.

Sebelum Javascript ditemukan, internet hanya terdiri dari halaman HTML biasa . HTML & CSS memberikan struktur dan gaya ke halaman web. Tapi Javascript membuat halaman web menjadi dinamis . Anda dapat memasukkan kredensial Anda dan masuk ke situs web, melakukan transaksi online, atau bermain game. Javascript membuat segalanya terjadi.

Salah satu survei yang dilakukan di Stack-overflow menunjukkan bahwa Javascript memiliki jumlah repo tertinggi di GitHub. Setiap tahun, kerangka kerja dan pustaka baru sedang dikembangkan dalam Javascript. Bahasa ini benar-benar telah mengubah internet dan menyederhanakan kehidupan masyarakat.

Latar belakang

Dua tahun lalu, saya sedang mengerjakan proyek sampingan dan menggunakan Javascript untuk pertama kalinya. Menjadi programmer berpengalaman sejak dekade terakhir, saya menjadi fasih dengan sintaks dan mengembangkan perintah yang baik dalam tiga bulan.

Beberapa bulan berlalu, halaman web yang saya kembangkan, tidak bekerja dengan baik. Butuh waktu lama untuk memuat & mulai memengaruhi pelanggan. Jadi, saya melakukan penyelaman mendalam untuk mengidentifikasi akar penyebabnya.

Setelah menghabiskan malam tanpa tidur, saya akhirnya kehabisan akal dan hampir menyerah. Namun, saya memutuskan untuk memberikan percobaan terakhir. Akhirnya, saya berpikir untuk mendapatkan pemahaman menyeluruh tentang cara kerja Javascript secara internal. Saya merujuk banyak sumber daya dan akhirnya dapat memperbaiki bug di kode saya dalam dua hari.

Insinyur umumnya berfokus pada membangun hal-hal baru. Alat dan kerangka kerja yang kami gunakan menyembunyikan sebagian besar kerumitan dari kami. Dalam perjalanan kita, kita cenderung lupa bagaimana hal-hal yang sebenarnya bekerja di belakang layar. Perlu diketahui cara kerja internal dari setiap alat yang kita gunakan. Memiliki pemahaman yang baik tentang internal membantu kita mempersempit masalah dan menghasilkan solusi pragmatis.

Pada artikel ini, kita akan melihat apa yang terjadi di balik layar saat Javascript dijalankan oleh browser. Kami akan melihat mesin Javascript & memahami cara kerjanya. Kita akan melihat berbagai komponen yang terlibat dalam runtime Javascript dan mendapatkan kejelasan tentang Event Loop & antrean Event. Meskipun istilah-istilah ini mungkin baru bagi Anda, tetapi artikel ini akan mencoba menyederhanakannya satu per satu. Mari kita mulai dengan pencarian kita untuk menguasai bagian dalam Javascript.

Javascript

Javascript adalah bahasa interpretasi tingkat tinggi. Tidak seperti C atau C++, kita tidak perlu mengkompilasi kode Javascript dan kemudian menjalankannya. Kode Javascript dikompilasi menjadi bytecode terlebih dahulu dan kemudian diterjemahkan ke dalam kode level mesin.

Bahasa tinggi seperti Java, C, C++, C# mendukung multi-threading. Bahasa-bahasa ini memungkinkan pemrogram untuk membuat banyak utas dan menjalankan tugas di utas yang berbeda. Dengan demikian, kami dapat menelurkan tugas pada banyak CPU dan memanfaatkan sumber daya komputasi secara efisien.

Sebaliknya, Javascript adalah utas tunggal. Ini berarti hanya ada satu utas eksekusi pada saat tertentu. Jika Anda menjalankan fungsi javascript yang memakan waktu, halaman web akan membeku. Anda mungkin sering melihat situs web adalah kesalahan tidak responsif saat menjelajah.

Mari kita lakukan demo cepat dan lihat cara kerjanya. Saya telah membuka Twitter dan saya dapat mengklik masing-masing tab seperti Trending, News, Sportsdll.

Sekarang, di developerkonsol saya, saya sedang menulis fungsi yang berisi loop tak terbatas . Di bawah ini adalah definisi dari fungsi.

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

GIF di bawah ini menunjukkan bahwa saya tidak dapat mengubah tab menjadi Sportsatau Entertaintment.

Karena fungsi tersebut berisi perulangan tak terbatas, fungsi tersebut akan terus dijalankan tanpa henti. Ketika saya memilih tab yang berbeda, browser seharusnya menangani clickacara tersebut dan menampilkan konten dari tab yang diklik. Saya tidak dapat memilih tab lain karena Javascript sudah menjalankan fungsinya infiniteLoop.

Seperti yang terlihat pada contoh di atas, kita hanya dapat menjalankan satu fungsi dalam satu waktu di Javascript. Sekarang, Anda mungkin bertanya, bagaimana Browser dapat memuat situs web yang rumit dalam sepersekian detik.

Kami akan memahami di bagian selanjutnya bagaimana Javascript melakukan keajaiban ini di belakang layar. Sekarang mari kita pahami inti dari Javascript yaitu Javascript Engine.

Mesin Javascript

Setiap browser menyediakan Javascript Engine sendiri. Misalnya: - Chrome menggunakan mesin V8, sedangkan Firefox menggunakan Mesin SpiderMonkey. Mesin bertanggung jawab untuk mengeksekusi kode Javascript baris demi baris. Berikut ini adalah daftar browser populer dan mesin Javascript mereka.

Mesin Javascript terdiri dari Heap dan Stack . Mari kita pahami cara kerja kedua elemen ini.

Tumpukan

Heap bertanggung jawab untuk menyimpan definisi fungsi, variabel objek. Ini berisi semua objek yang direferensikan oleh kode.

Objek dibuat secara dinamis di heap. Cara kerjanya mirip dengan java. Setiap kali objek direferensikan oleh suatu fungsi, itu diambil dari heap.

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

bar()

      
                

                    
                    
                
            

Tumpukan

Stack adalah struktur data Last In First Out (LIFO) . Setiap kali suatu fungsi dijalankan, variabel lokal fungsi tersebut didorong ke tumpukan. Setelah fungsi menyelesaikan eksekusi, itu akan dihapus dari tumpukan. Jika suatu fungsi memanggil fungsi baru selama eksekusi, fungsi baru tersebut juga akan didorong ke tumpukan. Mesin menjalankan fungsi yang ada di bagian atas tumpukan.

Fungsi yang berada di bagian bawah tumpukan melanjutkan eksekusinya setelah semua fungsi di atasnya kembali. Jika suatu fungsi melempar kesalahan, jejak tumpukan dicetak pada file console. Pelacakan tumpukan terdiri dari rangkaian fungsi yang dipanggil saat pengecualian dilemparkan. Mari kita lihat sebuah contoh.

Saya akan menjalankan kode di atas di browser saya. Dan tambahkan breakpoint di function city.

Seperti yang terlihat di atas, saat menjalankan skrip, ia berhenti di breakpoint di function city. Di sisi kanan, di Call Stackbagian tersebut, Anda bisa melihat cityfungsi di bagian atas.

Terdiri Call Stackdari semua fungsi yang dipanggil sejauh ini. Dan fungsi terbaru ditempatkan di bagian atas. Setelah fungsi menyelesaikan eksekusi, itu akan dihapus dari tumpukan.

Anda dapat melihat pada gambar di bawah ini, fungsi citydihapus dan eksekusi dilanjutkan untuk fungsi streetdi nomor baris 9.

Seperti yang terlihat di atas, Javascript hanya dapat menjalankan satu fungsi dalam satu waktu dan hanya ada satu utas eksekusi. Anda tidak dapat menjalankan banyak fungsi secara bersamaan di tumpukan eksekusi.

Katakanlah kita memiliki fungsi yang melakukan panggilan HTTPdan mendapatkan data dari situs web lain. Apa yang akan terjadi jika server lambat dan fungsinya memakan waktu lama untuk dijalankan? Kami tidak akan dapat menjalankan fungsi lain dan pengalaman pengguna akan sangat buruk.

Apakah ini terjadi di dunia nyata? Tidak, situs web kompleks seperti Facebook.com , Twitter.com , Amazon.com , dll menjalankan banyak kode Javascript tanpa memengaruhi pengalaman pengguna. Untuk memahami caranya, kita akan mendalami runtime Javascript.

waktu proses Javascript

Javascript memberi kita berbagai API untuk mengambil data dari server, memanipulasi DOM, atau menjalankan fungsi menggunakan pengatur waktu. Karena sifat utas tunggal Javascript, ini dapat menghentikan rendering situs web sehingga menyebabkan kinerja yang buruk. Namun, runtime Javascript memastikan hal ini tidak terjadi. Mari kita pahami ini dengan sebuah contoh.

Anda bisa menebak apa yang akan menjadi output dari kode di bawah ini :-

Apakah akan getSubTitlesdicetak setelah dicetak getActors? Dan setelah menelepon setTimeout, apakah kodenya akan berhenti?

Berikut adalah output yang dihasilkan dengan menjalankan kode di atas :-

Seperti yang terlihat di atas, yang getSubTitlespertama dicetak dan 4 detik kemudian getActorsdicetak. Meskipun, fungsi tersebut setTimeoutmenunggu selama 4 detik, tetapi tetap menjalankan fungsi selanjutnya getSubTitlessebelumnya dan kode tidak menunggu. Sekarang mari kita pahami apa yang terjadi di balik layar.

API web

Anda tidak akan menemukan penerapan fungsi seperti setTimeout, atau fetchdi manapun dalam kode sumber Javascript. Fungsi-fungsi ini disediakan oleh browser dan bukan bagian dari Javascript. Implementasinya akan berbeda untuk setiap browser.

Browser menyediakan fungsi untuk melakukan panggilan jaringan, memanipulasi DOM, memproses audio, video, dll. Fungsi-fungsi ini membentuk API Web. Implementasi internalnya kompleks dan terutama terdiri dari kode C++. API memberi kita antarmuka yang dapat dipanggil dari kode Javascript.

Saat Anda menjalankan fungsi seperti setTimeout, Javascript memahami bahwa ini adalah API Web. Ini kemudian mendelegasikan eksekusi fungsi ini ke wadah Web API. Fungsi setTimeoutdijalankan di utas terpisah. Itu tidak dieksekusi di utas eksekusi Javascript. Inilah alasan mengapa kode yang ditulis setelah setTimeoutdieksekusi sebelum fungsi callback diteruskan ke sana.

Demikian pula, karena panggilan jaringan memakan waktu, fungsi seperti fetchdijalankan di utas terpisah. API Web browser menyembunyikan sebagian besar kerumitan dari kami. Misalnya: - implementasi internal fetchakan berisi pembentukan koneksi TCP, pengiriman data & penguraiannya. Selain itu, itu juga akan menggunakan sumber daya komputasi secara efisien dengan menjadwalkan eksekusi pada utas yang sesuai.

Gif di bawah ini menunjukkan apa yang terjadi ketika Anda menjalankan fungsi Web API seperti setTimeout.

Seperti yang terlihat di atas, setelah setTimeoutfungsi dipanggil, fungsi callback akan dikirim getActorske API Web. Di wadah API Web, fungsi setTimeoutmenunggu selama empat detik. Sementara itu, fungsi selanjutnya getSubTitlesdipanggil.

Sekarang, Anda mungkin bertanya bagaimana fungsi callback getActorsdijalankan setelah penghitung waktu berakhir. Kita akan melihat di bagian selanjutnya, bagaimana callback dieksekusi setelah Web API kembali.

Antrean Acara

Javascript sangat bergantung pada fungsi callback. Fungsi panggilan balik dijalankan setelah suatu peristiwa terjadi. Misalnya: - Setelah menerima respons dari server, kita perlu mencetak representasi json. Atau jalankan fungsi setelah penundaan 4 detik.

Runtime Javascript terdiri dari komponen yang dikenal sebagai Event Queue atau Callback Queue. Ini adalah antrian pesan dan menggunakan urutan First In First Out (FIFO). Pesan tidak lain adalah fungsi panggilan balik yang dijadwalkan untuk dieksekusi.

Mari kita ambil contoh untuk memahami ini. Dalam kode di bawah ini, kami mendaftarkan fungsi callback setiap kali ada event klik pada tombol. Setelah pengguna mengklik tombol, fungsi tersebut onClickakan dipanggil. Fungsi ini memanggil fungsi timersetelah jeda 2 detik.

Animasi di atas menunjukkan apa yang terjadi di balik layar. Kami memiliki dua API Web di sini — a) $.ondan b) setTimeout. API pertama menunggu peristiwa klik terjadi. Setelah menerima event klik, fungsi akan dijalankan onClick. API kedua setTimeOutdipanggil selanjutnya oleh onClickfungsi.

Setiap kali, pengguna mengklik tombol, fungsi tersebut onClickakan didorong di Antrean Acara. Demikian pula, setelah penghitung waktu berakhir, fungsi timerdidorong ke dalam antrian. Jadi antrian acara terdiri dari semua fungsi panggilan balik yang harus dijalankan. Dalam hal ini, onClickdan timerfungsinya.

Putaran Acara

Fungsi panggilan balik EventQueuemencapai tumpukan eksekusi Javascript melalui Event Loop. Loop Acara terus menerus memeriksa apakah Stack Javascript saat ini kosong. Jika ditemukan bahwa tumpukan kosong, maka ia akan mengambil pesan pertama dari Antrean Peristiwa dan meneruskannya ke tumpukan.

Mengambil contoh dari bagian sebelumnya, segera setelah Event Loop menemukan bahwa stack kosong, ia akan mengambil pesan berikutnya dari antrean callback dan menjalankannya.

Di bawah ini adalah kode semu kasar untuk kerja loop acara: -

Anda dapat menganggap loop Peristiwa sebagai loop tak terbatas yang terus memantau tumpukan eksekusi. Jika tumpukan kosong, ia akan mengambil pesan (fungsi) dari Antrean Acara dan menjalankannya.

Diagram di bawah ini menunjukkan representasi runtime Javascript tingkat tinggi.

Kami telah melihat berbagai komponen dalam runtime Javascript. Anda sekarang akan memiliki gagasan yang lebih baik tentang bagaimana Javascript bekerja di bawah terpal. Mari kita meringkas apa yang telah kita pelajari sejauh ini.

Ringkasan

• Javascript adalah utas tunggal dan melakukan satu fungsi pada satu waktu.
• Ini memanfaatkan API Web untuk menjalankan tugas kompleks di latar belakang.
• Setelah eksekusi Web API selesai, fungsi callback akan dikirim ke antrean Event.
• Loop Acara terus memeriksa apakah tumpukan Javascript kosong. Jika tumpukan kosong, ia mengambil fungsi callback dari antrean Acara dan menjalankannya.

• Internal Javascript dan runtime
• Bagaimana Javascript bekerja di browser dan node
• Panduan animasi untuk loop acara Node.js
• Apa sih event loop itu?
• Javascript asinkron dan perulangan peristiwa dari awal