JavaScript là đơn luồng (Single-threaded). Điều đó có nghĩa nếu bạn chạy một vòng lặp while(true) hoặc xử lý ảnh 4K, giao diện (UI) sẽ bị đơ hoàn toàn.
Giải pháp của trình duyệt là đưa các tác vụ nặng ra khỏi luồng chính (Main Thread).
1. Web Workers: Đa luồng cho Web
Web Worker cho phép chạy JS trong một luồng nền (Background Thread), hoàn toàn tách biệt với DOM.
- Main Thread: Xử lý UI, Event Listener, DOM manipulation.
- Worker Thread: Xử lý tính toán nặng (Image processing, Data crunching, Encryption).
Hạn chế: Worker không được đụng vào DOM (window, document). Chỉ giao tiếp qua Message.
2. Service Workers: Proxy mạng
Service Worker là một loại Worker đặc biệt, đóng vai trò như một Proxy Server nằm giữa Browser và Internet.
- Chạy ngầm: Kể cả khi user đóng tab.
- Network Interception: Bắt chặn mọi request mạng.
- Offline Caching: Quyết định trả về data từ Cache hay gọi mạng.
Vòng đời (Lifecycle)
- Install: Cache các file tĩnh (HTML, CSS, JS).
- Activate: Dọn dẹp cache cũ.
- Fetch: Lắng nghe request.
3. Progressive Web Apps (PWA)
PWA là ứng dụng Web nhưng cư xử như App Native. 3 trụ cột của PWA:
- HTTPS: Bắt buộc.
- Web App Manifest: File JSON khai báo icon, tên app, màu sắc để cài đặt lên Home Screen.
- Service Worker: Để chạy Offline và nhận Push Notification.
Tại sao PWA thất thế?
Dù Google đẩy mạnh, nhưng Apple (iOS) hỗ trợ PWA rất hạn chế (trước iOS 16.4 không có Push Notification). Tuy nhiên, PWA vẫn cực tốt cho các ứng dụng nội bộ (Enterprise) hoặc thị trường máy cấu hình thấp.
Tổng kết Series Web Fundamentals
Bạn đã đi qua một chặng đường dài:
- Network: DNS, TCP/IP, HTTPS.
- Browser: Rendering Engine, V8, Event Loop.
- Capabilities: Storage, Workers, Offline.
Đây là nền tảng phân biệt giữa một "Coder" (biết viết code) và một "Software Engineer" (hiểu hệ thống).