[JAVASCRIPT] JavaScript hoạt động như thế nào?
Javascript
297
workflow
1
White

xoandaica viết ngày 05/02/2019

1. Single Thread

  1. Làm một việc tại một thời điểm Không giống như đa số các ngôn ngữ lập trình khác, javascript đơn giản là đơn luồng. Điều này đồng nghĩa với việc tại một thời điểm nó chỉ xử lý duy nhất một việc. Bất cứ tác vụ nào đều phải thực hiện lần lượt, khi một tác vụ của bạn thực hiện quá lâu cũng tương ứng với việc trình duyệt sẽ chờ xử lý tác vụ đó xong mới thực thi các tác vụ tiếp.
  2. Mỗi tab hold một single thread Môi khi bạn mở thêm một tab mới trên trình duyệt, trình duyệt sẽ sinh ra một javascript single thread. các thread giữa các tab độc lập với nhau về logic xử lý. # 2. Heap And Stack Mỗi Single Thread javascript sẽ có một bộ nhớ heap và stack. Giống đại đa số các ngôn ngư lập trình khác, heap là nơi lưu trữ các dạng dữ liệu về object, còn stack là nơi lưu trữ dữ liệu trong quá trình thực thi code. Stack của javascript là một dạng LIFO data storage, nôm na có thể hiểu là nơi lưu trữ các hàm hay câu lệnh nào đang được thực thi. Các lệnh sẽ được push vào theo thứ tự vào sau cùng ra đầu tiền. NHững cái ô vàng vàng mà các bạn nhìn thấy trong hình vẽ được gọi là một stack frame. Nếu bất kì lời gọi nào tại frame hiện tại bị lỗi, javascript print stack trace ra console log của trình duyệt. function baz(){ throw new Error('Something went wrong.'); } function bar() { baz(); } function foo() { bar(); } foo();

3. Eventloop and callback queue

Eventloop và callback queue là 2 component khá thú vị của javascript.

Hãy hiểu đơn giản thế này, Bây giờ bạn có một tác vụ, đó là gửi một http-request để lấy thông tin từ một trang web nào đó chẳng hạn, và tác vụ này cần một thời gian dài cơ 1 phút để xử lý. Nếu như trình duyệt sử dụng cùng một thread xử lý javascript cho việc xử lý các tác vụ mang tính delay trên thì sẽ ảnh hưởng đến trải nghiệm người dùng vì họ phải đợi 1 phút để có thể tiếp tục sử dụng. Để tránh việc này, với những tác vụ mang tính delay, tức là đòi hỏi thời gian dài để xử lý, trình duyệt đã viết riêng các đoạn code xử lý đống ấy bằng một ngôn ngữ khác và cung cấp cho bạn api để gọi cái đống phức tạp ấy một cách rất sáng sủa. Ví dụ, setTimeout, setInterval, các tác vụ liên quan đến httpRequest v.v...
Đồng thời trong javascript runtime sẽ sinh ra thêm 2 component là eventloop và callback queue.

Callback queue ở đây là một queue chứa các hàm callback- thứ mà được ném vào cùng với lời gọi các api phức tạp ở trên.
Ví dụ:

setTimeout(function (){
console.log("this function is callback");
},3000);

Ở ví dụ trên cái funtion bên trong được gọi là callback, khi lời gọi hàm setTimeout được thì xong, thì hàm callback kia sẽ được đẩy vào callbackqueue.

Eventloop là thằng luôn luôn lắng nghe cái callback queue kia xem có thằng nào xuất hiện không thì bên nhấc nó ra thực thi lần lượt. Ở đây khi hàm callback được push vào callback queue thì thằng eventloop đang làm nhiệm vụ lắng nghe bống thấy một ông callback funtion được push vào, ngay lập tức, nó bê cái funtion callback đó ra stack để thực thi, và tiếp tục nhiệm vụ lắng nghe của mình.

Như vậy, về cơ bản, những component giúp javascript hoạt động m đã liệt kê ở trên.

Các bạn có thể đọc kĩ hơn ở bài viết này!

https://itnext.io/how-javascript-works-in-browser-and-node-ab7d0d09ac2f

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

xoandaica

14 bài viết.
6 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
3 0
Bài viết này sẽ hướng dẫn các bạn từng bước xây dựng một ứng dụng java sử dụng spring boot kết hợp với spring data jdbc để lưu trữ và nhận dữ liệu ...
xoandaica viết 6 tháng trước
3 0
White
2 0
1. Prepare Tools IDE: Netbean 8.2 JDK: 1.8 Maven: 3.5.0 2. Target Build project thỏa mãn các yêu cầu sau: Sử dụng spring boot + spring ...
xoandaica viết 7 tháng trước
2 0
White
2 0
1.Overview and Spring Architecture Spring security là một framework của spring được tạo ra nhằm phục vụ việc Authentication(Xác thực) và Authorizat...
xoandaica viết 7 tháng trước
2 0
Bài viết liên quan
White
59 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết gần 4 năm trước
59 8
White
8 0
_Có mấy chia sẻ nhỏ, mình muốn đưa ra để mọi người cùng thảo luận góp ý. Thread này không tập trung vào Technical nữa mà discuss về Coding Style & ...
Hùng Phong viết 8 tháng trước
8 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
14 bài viết.
6 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!