Tumpukan panggilan vs javascript antrian tugas

Event Loop adalah sumber kebingungan bagi banyak developer, tetapi ini adalah bagian mendasar dari mesin JavaScript. Inilah yang memungkinkan JavaScript menjadi single-threaded, namun dapat dieksekusi dengan cara yang tidak memblokir. Untuk memahami Event Loop, pertama-tama kita perlu menjelaskan beberapa hal tentang mesin JavaScript, seperti Call Stack, Tasks, Microtasks, dan Queue masing-masing. Mari kita uraikan satu per satu

Tumpukan Panggilan

Call Stack adalah struktur data yang melacak eksekusi kode JavaScript. Seperti namanya, ini adalah tumpukan, jadi struktur data LIFO (Last In, First Out) di memori. Setiap fungsi yang dijalankan direpresentasikan sebagai bingkai di Call Stack dan ditempatkan di atas fungsi sebelumnya

Mari kita lihat contoh sederhana, langkah demi langkah

function foo() {
  console.log('foo');
  bar();
}

function bar() {
  console.log('bar');
}

1. Tumpukan Panggilan awalnya kosong
2. Fungsi foo() didorong ke Call Stack
3. Fungsi foo() dijalankan dan muncul dari Call Stack
4. Fungsi console.log('foo') didorong ke Call Stack
5. Fungsi console.log('foo') dijalankan dan muncul dari Call Stack
6. Fungsi bar() didorong ke Call Stack
7. Fungsi bar() dijalankan dan muncul dari Call Stack
8. Fungsi console.log('bar') didorong ke Call Stack
9. Fungsi console.log('bar') dijalankan dan muncul dari Call Stack
10. Tumpukan Panggilan sekarang kosong

Tugas dan Antrian Tugas

Tugas dijadwalkan, blok kode sinkron. Saat mengeksekusi, mereka memiliki akses eksklusif ke Call Stack dan juga dapat mengantrikan tugas lainnya. Di antara Tugas, browser dapat melakukan pembaruan rendering. Tugas disimpan dalam Antrean Tugas, menunggu untuk dieksekusi oleh fungsi terkaitnya. Antrean Tugas, pada gilirannya, adalah struktur data FIFO (First In, First Out). Contoh Tugas termasuk fungsi panggilan balik dari pendengar acara yang terkait dengan acara dan panggilan balik setTimeout()

Microtasks dan Antrean Microtask

Microtasks mirip dengan Tasks karena dijadwalkan, blok kode sinkron dengan akses eksklusif ke Call Stack saat mengeksekusi. Selain itu, mereka disimpan dalam struktur data FIFO (First In, First Out) mereka sendiri, Antrian Microtask. Microtasks berbeda dari Tasks, bagaimanapun, di Microtask Queue harus dikosongkan setelah Task selesai dan sebelum merender ulang. Contoh Microtasks termasuk foo()_0 panggilan balik dan foo()1 panggilan balik

Microtasks dan Antrean Microtask juga disebut sebagai Pekerjaan dan Antrean Pekerjaan

Putaran Acara

Terakhir, Event Loop adalah loop yang terus berjalan dan memeriksa apakah Call Stack kosong. Itu memproses Tugas dan Tugas Mikro, dengan menempatkannya di Call Stack satu per satu dan juga mengontrol proses rendering. Itu terdiri dari empat langkah kunci

1. Evaluasi naskah. Secara sinkron mengeksekusi skrip hingga Call Stack kosong
2. Pemrosesan tugas. Pilih Tugas pertama di Antrean Tugas dan jalankan sampai Stack Panggilan kosong
3. Pemrosesan tugas mikro. Pilih Microtask pertama di Microtask Queue dan jalankan hingga Call Stack kosong, ulangi hingga Microtask Queue kosong
4. Merender. Render ulang UI dan kembali ke langkah 2

Contoh praktis

Untuk lebih memahami Event Loop, mari kita lihat contoh praktis, menggabungkan semua konsep di atas

Tujuan saya dengan artikel ini adalah untuk mengajari Anda cara kerja JavaScript di browser. Meskipun saya telah bekerja dengan JavaScript sepanjang karier saya, saya tidak memahami cara kerjanya sampai saat ini

Saya masih lupa bagaimana ini bekerja dari waktu ke waktu. Itu sebabnya saya menulis artikel ini. Saya harap ini akan membuat Anda memahami konsep-konsep ini juga

Bagaimana cara kerja JavaScript di browser?

Artikel ini adalah bagian pertama dari seri posting saya, di mana saya menjelaskan cara kerja JavaScript di browser. Untuk mendapatkan artikel terbaru saya ke kotak masuk Anda, berlangganan buletin saya

• Bagian 1. JavaScript Event Loop Dan Call Stack Dijelaskan
• Bagian 2. Manajemen Memori JavaScript. Tumpukan dan pengumpulan sampah dijelaskan

Cara kerja JavaScript di browser

Sebelum saya menyelami penjelasan setiap topik, saya ingin Anda melihat ikhtisar tingkat tinggi yang saya buat ini, yang merupakan abstraksi tentang bagaimana JavaScript berinteraksi dengan browser

Jangan khawatir jika Anda tidak tahu arti semua istilah tersebut. Saya akan membahasnya masing-masing di bagian ini

Perhatikan bagaimana sebagian besar hal dalam grafik bukan bagian dari bahasa JavaScript itu sendiri. API Web, antrean panggilan balik, dan loop peristiwa adalah semua fitur yang disediakan browser

Representasi NodeJS akan terlihat serupa, tetapi dalam artikel ini, saya akan fokus pada cara kerja JavaScript di browser

Tumpukan panggilan

Anda mungkin pernah mendengar bahwa JavaScript adalah single-threaded. Tapi apa artinya ini?

JavaScript dapat melakukan satu hal pada satu waktu karena hanya memiliki satu tumpukan panggilan

Tumpukan panggilan adalah mekanisme yang membantu penerjemah JavaScript untuk melacak fungsi yang dipanggil skrip

Setiap kali skrip atau fungsi memanggil suatu fungsi, itu ditambahkan ke bagian atas tumpukan panggilan. Setiap kali fungsi keluar, juru bahasa menghapusnya dari tumpukan panggilan

Suatu fungsi keluar melalui pernyataan pengembalian atau dengan mencapai akhir ruang lingkup

Saya membuat visualisasi kecil ini agar lebih mudah dipahami

const addOne = (value) => value + 1;
const addTwo = (value) => addOne(value + 1);
const addThree = (value) => addTwo(value + 1);
const calculation = () => {
  return addThree(1) + addTwo(2);
};
calculation();
_
tambahkanSatu(3)
tambahkanDua(2)
tambahkanTiga(1)
perhitungan()
utama()

Perhatikan bagaimana setiap panggilan fungsi ditambahkan ke tumpukan panggilan dan dihapus setelah selesai
Setiap kali suatu fungsi memanggil fungsi lain, fungsi itu ditambahkan ke bagian atas tumpukan, di atas fungsi pemanggil
Urutan di mana stack memproses setiap pemanggilan fungsi mengikuti prinsip LIFO (Last In, First Out)
Langkah-langkah dari contoh sebelumnya adalah sebagai berikut
File dimuat dan fungsi 
function a() {
    b();
}

function b() {
    a();
}

a();
_0 dipanggil, yang merupakan singkatan dari eksekusi seluruh file. Fungsi ini ditambahkan ke tumpukan panggilan
function a() {
    b();
}

function b() {
    a();
}

a();
0 panggilan 
function a() {
    b();
}

function b() {
    a();
}

a();
2, itulah mengapa ditambahkan ke bagian atas tumpukan panggilan
function a() {
    b();
}

function b() {
    a();
}

a();
2 panggilan 
function a() {
    b();
}

function b() {
    a();
}

a();
4, yang lagi ditambahkan ke tumpukan panggilan
function a() {
    b();
}

function b() {
    a();
}

a();
5 panggilan 
function a() {
    b();
}

function b() {
    a();
}

a();
6, yang ditambahkan ke tumpukan panggilan
...
function a() {
    b();
}

function b() {
    a();
}

a();
7 tidak memanggil fungsi lain. Saat keluar, itu dihapus dari tumpukan panggilan
Dengan hasil 
function a() {
    b();
}

function b() {
    a();
}

a();
7, 
function a() {
    b();
}

function b() {
    a();
}

a();
6 keluar juga dan dihapus dari tumpukan panggilan
function a() {
    b();
}

function b() {
    a();
}

a();
5 juga sedang dihapus
const a = () => console.log('a');
const b = () => setTimeout(() => console.log('b'), 100);
const c = () => console.log('c');

a();
b();
c();
1 panggilan 
function a() {
    b();
}

function b() {
    a();
}

a();
6, yang menambahkannya ke tumpukan panggilan
function a() {
    b();
}

function b() {
    a();
}

a();
6 memanggil 
function a() {
    b();
}

function b() {
    a();
}

a();
7 dan menambahkannya ke tumpukan panggilan
function a() {
    b();
}

function b() {
    a();
}

a();
7 keluar dan dihapus dari tumpukan panggilan
function a() {
    b();
}

function b() {
    a();
}

a();
6 keluar dan dihapus dari tumpukan panggilan
const a = () => console.log('a');
const b = () => setTimeout(() => console.log('b'), 100);
const c = () => console.log('c');

a();
b();
c();
1 dapat keluar sekarang dengan hasil 
function a() {
    b();
}

function b() {
    a();
}

a();
5 dan 
function a() {
    b();
}

function b() {
    a();
}

a();
6 dan sedang dihapus dari tumpukan panggilan
Tidak ada pernyataan lebih lanjut atau pemanggilan fungsi dalam file, jadi 
function a() {
    b();
}

function b() {
    a();
}

a();
0 keluar juga dan dihapus dari tumpukan panggilan
Saya menyebut konteks yang mengeksekusi kode kami 
function a() {
    b();
}

function b() {
    a();
}

a();
0, tapi ini bukan nama resmi fungsi tersebut. Dalam pesan kesalahan yang dapat Anda temukan di konsol browser, nama fungsi ini adalah 
a
c
b
2
RangeError yang tidak tertangkap. Ukuran tumpukan panggilan maksimum terlampaui
Anda mungkin tahu tumpukan panggilan dari men-debug kode Anda. 
a
c
b
3 adalah salah satu kesalahan yang mungkin Anda temui. Di bawah ini kita dapat melihat snapshot dari callstack ketika kesalahan terjadi
Ikuti jejak tumpukan pesan kesalahan ini. Ini mewakili panggilan fungsi yang menyebabkan kesalahan ini. Dalam hal ini, kesalahannya ada pada fungsi b, yang telah dipanggil oleh a (yang telah dipanggil oleh b dan seterusnya)
Jika Anda melihat pesan kesalahan khusus ini di layar, salah satu fungsi Anda memanggil terlalu banyak fungsi. Ukuran tumpukan panggilan maksimum berkisar dari 10 hingga 50 ribu panggilan, jadi jika Anda melebihi itu, kemungkinan besar Anda memiliki pengulangan tak terbatas dalam kode Anda
Browser mencegah kode Anda membekukan seluruh halaman dengan membatasi tumpukan panggilan



Saya membuat ulang kesalahan dengan kode berikut. Cara untuk mencegah hal ini adalah dengan tidak menggunakan fungsi rekursif terlebih dahulu atau dengan memberikan kasus dasar, yang membuat fungsi Anda keluar di beberapa titik.
function a() {
    b();
}

function b() {
    a();
}

a();
Singkatnya, tumpukan panggilan melacak panggilan fungsi dalam kode Anda. Ini mengikuti prinsip LIFO (Last In, First Out), yang artinya selalu memproses panggilan yang ada di atas stack terlebih dahulu
JavaScript hanya memiliki satu tumpukan panggilan, oleh karena itu ia hanya dapat melakukan satu hal dalam satu waktu
Tumpukan
Tumpukan JavaScript adalah tempat objek disimpan saat kita mendefinisikan fungsi atau variabel
Karena tidak memengaruhi tumpukan panggilan dan loop peristiwa, ini akan berada di luar cakupan artikel ini untuk menjelaskan cara kerja alokasi memori JavaScript.
Jika Anda ingin mempelajari lebih lanjut tentang topik ini, saya sarankan untuk membaca artikel saya tentang manajemen memori JavaScript
API web
Di atas, saya mengatakan bahwa JavaScript hanya dapat melakukan satu hal dalam satu waktu
Meskipun ini berlaku untuk bahasa JavaScript itu sendiri, Anda masih dapat melakukan banyak hal secara bersamaan di browser. Seperti judulnya, ini dimungkinkan melalui API yang disediakan browser
Mari kita lihat bagaimana kita membuat permintaan API, misalnya. Jika kami mengeksekusi kode dalam juru bahasa JavaScript, kami tidak akan dapat melakukan apa pun sampai kami mendapat tanggapan dari server
Itu akan membuat aplikasi web tidak dapat digunakan
Sebagai solusi untuk ini, browser web memberi kami API yang dapat kami panggil dalam kode JavaScript kami. Eksekusi, bagaimanapun, ditangani oleh platform itu sendiri, oleh karena itu tidak akan memblokir tumpukan panggilan
Keuntungan lain dari API web adalah bahwa mereka ditulis dalam kode tingkat rendah (seperti C), yang memungkinkan mereka melakukan hal-hal yang tidak mungkin dilakukan dalam JavaScript biasa.
Mereka memungkinkan Anda membuat permintaan AJAX atau memanipulasi DOM, tetapi juga berbagai hal lainnya, seperti pelacakan geografis, mengakses penyimpanan lokal, pekerja layanan, dan lainnya
Jika Anda tertarik dengan API baru apa yang dapat kami perkirakan akan muncul di masa mendatang, lihat artikel saya di project Fugu, upaya lintas perusahaan, yang dihidupkan oleh Google, yang bermaksud menghadirkan lebih banyak fitur asli ke platform web
Antrean panggilan balik
Dengan fitur API web, kami sekarang dapat melakukan banyak hal secara bersamaan di luar penerjemah JavaScript. Tapi apa yang terjadi jika kita ingin kode JavaScript kita bereaksi terhadap hasil API Web, seperti permintaan AJAX, misalnya?
Di situlah panggilan balik berperan. Melalui mereka, API web memungkinkan kita menjalankan kode setelah eksekusi panggilan API selesai
Apa itu panggilan balik?
Callback adalah fungsi yang diteruskan sebagai argumen ke fungsi lain. Callback biasanya akan dieksekusi setelah kode selesai
Anda dapat membuat fungsi panggilan balik sendiri dengan menulis fungsi yang menerima fungsi sebagai argumen. Fungsi seperti itu juga dikenal sebagai fungsi tingkat tinggi. Perhatikan bahwa callback tidak asinkron secara default
Mari kita lihat sebuah contoh
const a = () => console.log('a');
const b = () => setTimeout(() => console.log('b'), 100);
const c = () => console.log('c');

a();
b();
c();
a
c
b
4 menambahkan batas waktu x ms sebelum panggilan balik dijalankan
Anda mungkin sudah bisa memikirkan seperti apa hasilnya nanti
a
c
b
4 dieksekusi secara bersamaan sementara juru bahasa JS terus mengeksekusi pernyataan berikutnya
Ketika batas waktu telah berlalu, dan tumpukan panggilan kosong lagi, fungsi panggilan balik yang telah diteruskan ke 
a
c
b
4 akan dieksekusi
Hasil akhir akan terlihat seperti ini



a
c
b
Tapi bagaimana dengan antrian callback?
Sekarang, setelah 
a
c
b
4 menyelesaikan eksekusinya, itu tidak langsung memanggil fungsi callback. Tapi kenapa begitu?
Ingat bahwa JavaScript hanya dapat melakukan satu hal dalam satu waktu?
Panggilan balik yang kami berikan sebagai argumen untuk 
a
c
b
4 ditulis dalam JavaScript. Jadi, juru bahasa JavaScript perlu menjalankan kode, yang berarti perlu menggunakan tumpukan panggilan, yang lagi-lagi berarti kita harus menunggu sampai tumpukan panggilan kosong untuk mengeksekusi panggilan balik.
Anda dapat mengamati perilaku ini dalam animasi berikut, memvisualisasikan eksekusi kode yang kita lihat di atas
Memanggil 
a
c
b
4 memicu eksekusi API web, yang menambahkan panggilan balik ke antrean panggilan balik. Perulangan peristiwa kemudian mengambil panggilan balik dari antrean dan menambahkannya ke tumpukan segera setelah kosong
Berbagai hal terjadi di sini secara bersamaan. Ikuti jalur yang diambil eksekusi 
a
c
b
_4, dan dalam proses lain, fokus pada apa yang dilakukan tumpukan panggilan
Tidak seperti tumpukan panggilan, antrean panggilan balik mengikuti urutan FIFO (Masuk Pertama, Keluar Pertama), yang berarti bahwa panggilan diproses dalam urutan yang sama seperti saat ditambahkan ke antrean
Putaran acara
Loop peristiwa JavaScript mengambil panggilan pertama di dan menambahkannya ke tumpukan panggilan segera setelah kosong
Kode JavaScript dijalankan dengan cara run-to-completion, artinya jika stack panggilan sedang mengeksekusi beberapa kode, event loop diblokir dan tidak akan menambahkan panggilan apa pun dari antrian hingga stack kosong lagi
Itulah mengapa penting untuk tidak memblokir tumpukan panggilan dengan menjalankan tugas intensif komputasi
Jika Anda mengeksekusi terlalu banyak kode atau menyumbat antrean panggilan balik, situs web Anda akan menjadi tidak responsif karena tidak dapat mengeksekusi kode JavaScript baru
Penangan acara, seperti 
window.onscroll = () => console.log('scroll');
_1, menambahkan lebih banyak tugas ke antrean panggilan balik saat dipicu. Itu sebabnya Anda harus mendebounce callback ini, artinya callback ini hanya akan dieksekusi setiap x ms
Lihat sendiri
Tambahkan kode berikut ke konsol browser Anda. Saat Anda menggulir, Anda dapat mengamati seberapa sering panggilan balik mencetak 
window.onscroll = () => console.log('scroll');
2
window.onscroll = () => console.log('scroll');
setTimeout(fn, 0)
Kami dapat mengambil perilaku yang dijelaskan di atas untuk keuntungan kami jika kami ingin menjalankan beberapa tugas tanpa terlalu lama memblokir utas utama
Menempatkan kode asinkron Anda dalam panggilan balik dan menyetel 
a
c
b
4 ke 0ms akan memungkinkan browser melakukan hal-hal seperti memperbarui DOM sebelum melanjutkan eksekusi panggilan balik
Antrian pekerjaan dan kode asinkron
Dalam yang saya tunjukkan pada awalnya, saya meninggalkan satu fitur tambahan yang penting untuk diketahui
Selain antrean panggilan balik, ada antrean lain yang secara eksklusif menerima janji—antrian pekerjaan
Janji. Rekap cepat
EcmaScript 2015 (atau ES6) pertama kali memperkenalkan promise, meskipun telah tersedia sebelumnya di Babel
Janji adalah cara lain untuk menangani kode asinkron selain menggunakan panggilan balik. Mereka memungkinkan Anda untuk dengan mudah menghubungkan fungsi asinkron tanpa berakhir di apa yang disebut neraka panggilan balik atau piramida malapetaka
setTimeout(() => {
  console.log('Print this and wait');
  setTimeout(() => {
    console.log('Do something else and wait');
    setTimeout(() => {
      // ...
    }, 100);
  }, 100);
}, 100)
Dengan sedikit imajinasi, Anda dapat melihat bagaimana callback berantai dapat berakhir di piramida malapetaka—atau kode yang benar-benar jelek
Dengan janji, kode ini bisa menjadi lebih mudah dibaca
// A promise wrapper for setTimeout
const timeout = (time) => new Promise(resolve => setTimeout(resolve, time));
timeout(1000)
  .then(() => {
    console.log('Hi after 1 second');
    return timeout(1000);
  })
  .then(() => {
    console.log('Hi after 2 seconds');
  });



Kode ini terlihat lebih mudah dibaca dengan sintaks 
window.onscroll = () => console.log('scroll');
4/
window.onscroll = () => console.log('scroll');
5
const logDelayedMessages = async () => {
  await timeout(1000);
  console.log('Hi after 1 second');
  await timeout(1000);
  console.log('Hi after 2 seconds');
};

logDelayedMessages();
Itu adalah rangkuman singkat tentang cara kerja janji, tetapi dalam artikel ini, saya tidak akan mendalami topik ini lebih dalam. Lihat dokumen web MDN jika Anda ingin mempelajarinya lebih lanjut
Di mana letak janji?
Mengapa saya berbicara tentang janji di sini?
Mengingat gambaran yang lebih besar, janji berperilaku sedikit berbeda dari panggilan balik karena mereka memiliki antrean sendiri
Antrean pekerjaan, juga dikenal sebagai antrean janji, memiliki prioritas di atas antrean panggilan balik, seperti antrean jalur cepat di taman hiburan
Perulangan peristiwa akan mengambil panggilan dari antrean janji terlebih dahulu sebelum memproses antrean panggilan balik
Mari kita lihat sebuah contoh
console.log('a');
setTimeout(() => console.log('b'), 0);
new Promise((resolve, reject) => {
  resolve();
})
.then(() => {
  console.log('c');
});
console.log('d');
Mempertimbangkan pengetahuan Anda tentang cara kerja antrean callback, Anda mungkin berpikir bahwa hasilnya adalah 
window.onscroll = () => console.log('scroll');
6
Tetapi karena antrian janji memiliki prioritas di atas antrian panggilan balik, 
window.onscroll = () => console.log('scroll');
7 akan dicetak sebelum 
window.onscroll = () => console.log('scroll');
8, meskipun keduanya asinkron
a
d
c
b
Kesimpulan
Saya harap Anda sekarang mengerti apa yang terjadi di balik layar kode JavaScript Anda. Seperti yang sudah saya sebutkan di awal, silakan tinggalkan komentar jika Anda memiliki pertanyaan atau umpan balik
Saya telah mempelajari hal ini di internet juga; 
Apa-apaan sih event loop itu?. Philip Roberts
Pembicaraan / video terbaik di luar sana tentang topik ini. Saya sangat menyarankan Anda memeriksanya
Model konkurensi dan loop peristiwa - MDN Web Docs
Visualisasi JavaScript
Alat yang memungkinkan Anda memvisualisasikan bagaimana kode Anda dieksekusi
Lebih banyak artikel yang mungkin menarik bagi Anda
9 topik favorit saya tentang "The Pragmatic Programmer"
Membaca adalah cara yang bagus untuk meningkatkan keterampilan pemrograman Anda. Pada artikel ini, saya membagikan intisari dari buku pemrograman favorit saya
JavaScript Heap Out Of Memory Kesalahan
Artikel ini terkait erat dengan artikel ini karena menjelaskan apa yang dapat Anda lakukan tentang Node.js Anda. aplikasi js kehabisan memori
Cara Membuat React App Anda menjadi Progressive Web App (PWA)
Panduan lengkap tentang bagaimana Anda dapat membuat aplikasi Bereaksi Anda menjadi Aplikasi Web Progresif (lebih mudah daripada kedengarannya)
 

			
Apa itu event loop A Apa perbedaan antara call stack dan task queue?
			
Event Loop memiliki pekerjaan yang cukup spesifik. Memiliki tanggung jawab untuk melihat cuaca  tumpukan panggilan kosong dan apakah antrian tugas berisi tugas yang tertunda untuk diproses . Jika tumpukan panggilan kosong, itu akan mendorong tugas ke tumpukan panggilan dari antrian dan tugas diproses. 
		
			
Apa itu tumpukan panggilan JavaScript?
			
Tumpukan panggilan adalah  mekanisme untuk juru bahasa (seperti juru bahasa JavaScript di browser web) untuk melacak tempatnya dalam skrip yang memanggil beberapa fungsi — what function is currently being run and what functions are called from within that function, etc.
		
			
Mengapa antrean panggilan balik digunakan dan bukan tumpukan panggilan balik?
			
Keuntungan antrian Callback
 . Artinya, jika utas utama diblokir, antrean panggilan balik tidak akan diproses. the callback queue is processed in the same event loop as the main thread. This means that if the main thread is blocked, the callback queue will not be processed.
		
			
Bagaimana kode JavaScript dijalankan & tumpukan panggilan?
			
Saat mesin JS menemukan pemanggilan fungsi pertama, FEC baru dibuat untuknya.  Konteks baru ini ditempatkan di atas konteks saat ini, membentuk apa yang disebut Tumpukan Eksekusi . Selama pemanggilan fungsi pertama, Konteks Eksekusinya menjadi konteks aktif tempat kode JavaScript pertama kali dieksekusi.