Hệ thống Web hiện đại

Mục tiêu đạt được

• Truy vết một yêu cầu từ DNS và TLS xuyên qua trình duyệt đến ranh giới ứng dụng.
• So sánh các phương pháp dựng hình và tải dữ liệu frontend chính dựa trên ràng buộc và đánh đổi kỹ thuật.
• Nhận diện vị trí bộ nhớ đệm (caching), bảo mật trình duyệt và thiết kế backend API định hình hành vi web.

Các bước trong lộ trình

1. DNS Resolution

   Mức độ mục tiêu: Hiểu bản chất

   Nội dung Atlas hiện có

   • Phân giải DNS & TLS: Từ hostname đến HTTPS được xác thực

2. HTTP Request Lifecycle

   Mức độ mục tiêu: Vận hành thực tế

   Nội dung Atlas hiện có

   • Vòng đời Request HTTP: Từ URL đến phản hồi

3. TLS and HTTPS

   Mức độ mục tiêu: Hiểu bản chất

   Nội dung Atlas hiện có

   • Phân giải DNS & TLS: Từ hostname đến HTTPS được xác thực

4. Browser Runtime

   Mức độ mục tiêu: Hiểu bản chất

   Chưa có bài học Atlas

5. Browser Event Loop

   Mức độ mục tiêu: Hiểu bản chất

   Nội dung Atlas hiện có

   • Cơ chế hoạt động của Event Loop trong Trình duyệt

6. Browser Rendering Pipeline

   Mức độ mục tiêu: Hiểu bản chất

   Chưa có bài học Atlas

7. Same-Origin Policy and CORS

   Mức độ mục tiêu: Hiểu bản chất

   Nội dung Atlas hiện có

   • Cẩm nang Debug Auth: 401, 403, CORS, Redirect, Issuer, Audience & Claim

8. HTTP Caching

   Mức độ mục tiêu: Hiểu bản chất

   Nội dung Atlas hiện có

   • CSR vs SSR vs SSG: Lựa chọn mô hình rendering

9. CDN Behavior

   Mức độ mục tiêu: Hiểu bản chất

   Nội dung Atlas hiện có

   • CSR vs SSR vs SSG: Lựa chọn mô hình rendering

10. CSR, SSR, and SSG

    Mức độ mục tiêu: Hiểu bản chất

    Nội dung Atlas hiện có

    • CSR, SSR và SSG: HTML được tạo ở đâu và khi nào
    • CSR vs SSR vs SSG: Lựa chọn mô hình rendering

11. Hydration

    Mức độ mục tiêu: Hiểu bản chất

    Nội dung Atlas hiện có

    • Hydration: Biến HTML đã render thành ứng dụng có thể tương tác
    • CSR vs SSR vs SSG: Lựa chọn mô hình rendering

12. Frontend Data Fetching

    Mức độ mục tiêu: Hiểu bản chất

    Nội dung Atlas hiện có

    • Frontend Data Fetching: Làm dữ liệu từ xa trở nên tường minh
    • Redux Khắp Nơi: Sắp xếp lại State trong Ứng dụng React Cũ
    • Modernize một Ứng dụng React Bảy Năm Tuổi
    • CSR vs SSR vs SSG: Lựa chọn mô hình rendering

13. Component Boundaries

    Mức độ mục tiêu: Hiểu bản chất

    Nội dung Atlas hiện có

    • Ranh giới Component: Làm rõ phạm vi sở hữu và giao diện
    • Giảm Over-Engineering Frontend: Loại bỏ Kiến trúc Vô tình
    • Migration Frontend Tăng dần: Strangler Pattern, Boundary Tương thích và Cutover
    • Modernize React: Nâng cấp mà Không Viết lại Cả Ứng dụng
    • Modernize một Ứng dụng React Bảy Năm Tuổi
    • Hướng dẫn Quyết định Modernization Frontend: Nâng, Thay, Bọc hay Xóa?

14. Frontend Bundle Performance

    Mức độ mục tiêu: Hiểu bản chất

    Nội dung Atlas hiện có

    • Khảo cổ Dependency: Thư viện Chết, Prerelease và Chuỗi Nâng cấp
    • Hiệu năng Bundle Frontend: Gửi ít JavaScript hơn, tải muộn hơn
    • Modernize một Ứng dụng React Bảy Năm Tuổi

15. Backend Request Lifecycle

    Mức độ mục tiêu: Vận hành thực tế

    Nội dung Atlas hiện có

    • Vòng đời yêu cầu phía máy chủ

16. API Design

    Mức độ mục tiêu: Vận hành thực tế

    Nội dung Atlas hiện có

    • Thiết kế API
    • Luồng thanh toán đáng tin cậy — Phân tích kiến trúc