Event Loop in Javascript

Khác với các ngôn ngữ khác thằng javascript nó thực hiện đơn luồng, chính vì vậy việc thực thi song song 2 câu lệnh là việc KHÔNG THỂ. Javascript là một ngôn ngữ đồng bộ nhưng nó lại có khả năng xử lí bất đồng bộ

Ví dụ:

Nếu là động bộ thì code nó sẽ đọc theo dòng nhưng ở đây mình đã sử dụng thằng setTimeout() , nó sẽ nhận lại một hàm gọi lại, sau thi thực hiện log ra “logs1”, “logs3” rồi nó mới log ra “logs2”

Event Loop Visualisation

Một số khái niệm cơ bản

1.Stack:

•  Stack là một vùng nhớ đặc biệt trên con chip máy tính phục vụ cho quá trình thực thi các dòng lệnh mà cụ thể là các hàm. Hàm chẳng qua là một nhóm các lệnh và chương trình thì gồm một nhóm các hàm phối hợp với nhau. Mỗi khi một hàm được gọi thì nó sẽ được đẩy vào một hàng đợi đặc biệt có tên là stack. Stack là một hàng đợi kiểu LIFO (Last In First Out) nghĩa là vào đầu tiên thì ra sau cùng. Một hàm chỉ được lấy ra khỏi stack khi nó hoàn thành và return.

• Nếu trong một hàm (Foo) có gọi một hàm khác (Bar) thì trạng thái hiện tại của hàm Foo được cất giữ trong stack và hàm Bar sẽ được chèn vào stack. Vì đây là hàng đợi LIFO nên Bar sẽ được xử lý trước Foo. Khi Bar xong và return thì mới đến lượt Foo được xử lý. Khi Foo được xử lý xong và return thì Stack rỗng và sẽ đợi các hàm tiếp theo được đẩy vào.

2. Heap:

• Heap là vùng nhớ được dùng để chưa kết quả tạm thời phục vụ cho việc thực thi các hàm trong stack. Heap càng lớn thì khả năng tính toán càng cao. Heap có thể được cấp phát tĩnh hoặc cấp phát động bằng mấy lệnh kiểu alloc với malloc (đấy là những gì còn nhớ về C++).

3. Callback Queue

• Đây là nơi chưa mã code không đồng bộ được đẩy đến và chờ thực thi

4. Event Loop

• Mình hiểu đơn giản là nó là một vòng lặp vô hạn trong javascript Runtime(V8 trong Google Chrome) để lắng nghe mọi event và nó chỉ dừng lại khi có return

• Đoan này mọi người sẽ thắc mắc tại sao setTimeout = 0 mà lại log ra sau đúng không ạ! Tại vì nó đã được gọi vào Callback Queue, Promise nó cũng vào, nhưng thằng Promise lại có một hàm đợi công việc, nó có .then()  nên tất cả các ‘thenable’ sẽ được gọi ra đầu tiên!

Trên đây là toàn bộ cơ chế và quy trình hoạt động của Event Loop, mình mong mọi người hay đọc và chia sẻ thêm cho mình biết thêm những kiến thức mình còn thiếu!

You need to login in order to like this post: click here