FEMastery
Lộ trình Frontend chuyên sâu

Từ nền tảng đến kiến trúc hệ thống.

10 level, 100 chủ đề. Mỗi level có bài học, lý thuyết ôn tập và bài tập tương tác đa dạng — học tới đâu, tự kiểm tra tới đó.

Bắt đầu Level 1→Xem toàn bộ lộ trình
10
Level
100
Chủ đề
8
Kiểu bài tập
Bản đồ học tập

10 chặng để master

  1. 1
    Level 1

    Cơ bản nhưng không được mơ hồ

    0%

    Nền móng: mơ hồ ở đây là bug ở khắp nơi.

    HydrationVirtual DOM diffing complexityEvent loop (macro vs microtasks)Critical rendering path+6 nữa
  2. 2
    Level 2

    React Core & Rendering Mechanics

    0%

    React biến component thành pixel như thế nào — và những cái bẫy.

    Reconciliation algorithmFiber architectureConcurrent renderingTime slicing+6 nữa
  3. 3
    Level 3

    Performance nền tảng trình duyệt

    0%

    Trình duyệt biến DOM thành pixel ở đâu — và chỗ nào nó khựng.

    Layout thrashingPaint vs Layout vs CompositeBrowser compositing layersGPU acceleration in CSS+6 nữa
  4. 4
    Level 4

    Data & State Management nâng cao

    0%

    State đúng đắn: bất biến, tất định, không có state bất khả thi.

    Structural sharingImmutable data patternsReferential equalityMemoization pitfalls+6 nữa
  5. 5
    Level 5

    Caching & Networking chiến lược

    0%

    Cache đúng, mạng đúng — nhanh mà vẫn tươi.

    Cache invalidation strategiesStale-while-revalidateETag vs Cache-ControlHTTP/3 and QUIC+6 nữa
  6. 6
    Level 6

    Security — không biết là toang

    0%

    Input không tin được ở khắp nơi. Mặc định là từ chối.

    Content Security Policy (CSP)Trusted TypesDOM clobberingPrototype pollution+6 nữa
  7. 7
    Level 7

    Web Platform Internals

    0%

    Nền tảng web bên dưới framework: islands, observers, shadow DOM.

    Islands architecturePartial hydrationStreaming SSRShadow DOM+6 nữa
  8. 8
    Level 8

    Concurrency & Streams

    0%

    Bất đồng bộ tất định: không starvation, không tearing.

    Task starvationPriority inversion in async codeScheduler internalsConcurrent rendering tearing+6 nữa
  9. 9
    Level 9

    Performance Metrics thực chiến

    0%

    Đo bằng số thật: INP, LCP, CLS — không đoán bằng cảm giác.

    First Input Delay (FID)Interaction to Next Paint (INP)Cumulative Layout Shift (CLS)Largest Contentful Paint (LCP)+6 nữa
  10. 10
    Level 10

    Kiến trúc hệ thống Frontend hiện đại

    0%

    Edge, micro-frontend, offline-first — và các trade-off.

    Edge renderingMicro-frontend orchestrationModule federationWebAssembly integration+6 nữa