Advance Javascript - Javascript Runtime

Như chúng ta đã biết JS là đồng bộ, nó chỉ có thể thực thi 1 tác vụ tại một thời điểm do trong JSE chỉ có một CallStack.

=> Trên lý thuyết thì điều này dẫn tới vấn đề rằng khi một tác vụ tốn nhiều thời gian để xử lý thì ứng dụng (trình duyệt) sẽ bị đóng băng, điều này làm ảnh hưởng rất xấu đến trải nghiệm người dùng.

=> Khi xử lý các tác vụ liên quan đến hệ thống, đọc ghi file hay thao tác với DOM cần nhiều thời gian để xử lý thì trình duyệt web sẽ hoạt động ở chế độ nền trong khi V8 vẫn thực thi code JS bình thường.

=> Trình duyệt đơn giản là một môi trường chạy JS, bên trong trình duyệt không chỉ có mỗi V8 để thực thi code JS mà còn có rất nhiều thứ khác như RederingDom, setTimeOut, fetch() những thứ này không đến từ JS được gọi chung là WebAPI được tích hợp sẵn vào trong trình duyệt để tăng sức mạnh cho JS, giúp JS có khả năng xử lý code bất đồng bộ.Bạn có thể hiểu rằng JS không có khả năng xử lý những tác vụ bất đồng bộ (đọc ,ghi file) nhưng khi cho JS chạy trong các môi trường (Browse, NodeJS ) JS sẽ có khả năng xử lý các tác vụ bất đồng bộ (nói là xử lý thì chưa đúng lắm vì JS không trực tiếp xử lý các tác vụ này).

=> Nói tóm lại, bản thân Javascript về mặt ngôn ngữ luôn chạy đồng bộ nhưng do yêu cầu ngày càng lớn để Javascript xử lý các tác vụ nặng và phức tạp chúng ta nhúng Javascript vào các môi trường được gọi là Javascript runtime (JSR) điển hình là Node.js và Chrome, trong các JSR này nó cung cấp cho chúng ta một loạt các API nhưng tương tác với DOM (Chrome) hay FS.readFile (Node.js) lúc này chúng ta viết code Javascript như vai trò một client sử dụng các API của môi trường để xử lý các công việc phức tạp.

JS xử lý code bất đồng bộ như thế nào ?

Khi gặp phải một tác vụ bất đồng bộ V8 sẽ nhờ các WebAPI xử lý, trong thời gian đó V8 sẽ tiếp tục làm việc với callStack để thực thi các hàm JS Native , khi nào các WebAPI thực hiện xong tác vụ thì nó đẩy dữ liệu vào trong CallBack để xếp vào trong CallBackQueue.
=> EventLoop (có nhiệm vụ liên tục nhìn vào CallStack và CallbackQueue để quan sát xem CallStack trống hay chưa và CallBackQueue có callback nào được đẩy vào hay không ?) quan sát CallStack chạy xong hết các tác vụ JS Native rồi mới đẩy CallBack trong CallBackQueue vào CallStack để thực thi.

Runtime vs JSE.
Hãy nghĩ về Javscript Runtime Environment nhưng một container lớn.Trong container này chứa nhiều thành khác như V8 , WebAPI , CallbackQueue , EventLoop điển hình là Node.js hay Chrome
Hãy liên hệ thực tế Runtime vs JSE
=> Tệp JS giống như một bản nhạc
=> JSE giống như một người chơi nhạc, sử dụng bản nhạc đọc nhạc và hiểu nó để tạo ra âm thanh, nhưng người chơi nhạc thiếu các nhạc cụ để phát ra các âm thanh phù hợp.
=> Runtime giống như một nơi chứa toàn bộ 2 thứ bên trên, nơi chúng ta có cả ca sĩ lẫn bản nhạc cộng thêm cả những nhạc cụ cho ca sĩ thực hiện những bản nhạc.