event loop
event loop
Một luồng duy nhất, mà vẫn xử lý được hàng nghìn việc chờ. Ba chặng, đi từ luật ưu tiên tới chỗ luật đó làm bạn ngạc nhiên.
9 cột mốc · 3 có bài trong app
Bắt đầu
1Luật ưu tiên
Đoán đúng thứ tự in ra của một đoạn code có setTimeout và Promise.
- Ngăn xếp lời gọicó bàiChỗ duy nhất code thật sự chạy. Còn khung trên đó thì vòng lặp chỉ đứng nhìn.
- Hai hàng đợicó bàiMicrotask dọn sạch cả hàng; macrotask mỗi vòng lấy đúng một. Toàn bộ bài học nằm ở chỗ khác nhau đó.
- Web APIcó bàiĐếm giờ và gọi mạng chạy ngoài JavaScript, rồi trả kết quả về bằng một callback xếp hàng.
2Hệ quả nhìn thấy được
Nối luật ưu tiên với những thứ bạn gặp hằng ngày trên giao diện.
- Vì sao trang bị đứngtự tìm hiểuMột vòng lặp nặng giữ ngăn xếp, nên không click nào, không lượt vẽ nào chen vào được.
- setTimeout 0 không phải ngay lập tứctự tìm hiểuNó là sớm nhất có thể, và luôn sau khi hàng microtask đã sạch.
- requestAnimationFrametự tìm hiểuCó chỗ đứng riêng ngay trước lượt vẽ, nên hoạt cảnh mượt hơn setTimeout.
3Không chặn luồng
Làm việc nặng mà giao diện vẫn nhấp được.
- Chia nhỏ việctự tìm hiểuCắt một vòng lặp dài thành nhiều khúc, nhường lượt giữa các khúc.
- Web Workertự tìm hiểuMột luồng thật sự khác, cho việc nặng CPU mà chia nhỏ cũng không cứu được.
- Debounce · throttletự tìm hiểuÍt việc đi vào hàng đợi hơn thì vòng lặp thở được.
Đích
Lộ trình dừng ở đây
Ba chặng trên giải thích gần hết những chuyện lạ về thứ tự chạy. Phần dưới là hướng đi tiếp.
- Event loop của Node.jsCùng ý tưởng, nhưng chia thành nhiều pha và có thêm setImmediate.
- Đo bằng Performance panelNhìn thấy tận mắt tác vụ nào giữ luồng quá lâu.
- Long task và INPChỉ số Google dùng để chấm xem trang của bạn phản hồi nhanh hay chậm.