Critical Rendering Path
Hiểu cách trình duyệt parse HTML, xây dựng DOM & CSSOM, tính toán Render Tree, và thực hiện các bước Layout + Paint.
DOM
CSSOM
Reflow
Repaint
Layers
Critical CSS
Inline CSS above-the-fold để mở khóa rendering và lazy-load phần còn lại, cải thiện đáng kể First Contentful Paint.
FCP
Inline CSS
Lazy CSS
Render Blocking
Code Splitting
Tách bundle thành các chunk nhỏ tải theo nhu cầu — qua lazy import theo route và async component với Suspense.
Dynamic import()
defineAsyncComponent
Vue Router
Bundle Analyzer
Tree Shaking
Loại bỏ dead code khỏi bundle. Chỉ những hàm thực sự được import mới có mặt trong build cuối.
ES Modules
Dead Code
Bundle Size
Visualizer
Async & Defer
So sánh cách tải script thường, async và defer. Xem mỗi chiến lược ảnh hưởng đến parse blocking và thứ tự thực thi như thế nào.
async
defer
Parse Blocking
DOMContentLoaded
Long Tasks
Chia nhỏ các JavaScript task chạy lâu (>50ms) để giữ main thread luôn responsive bằng task scheduling và Web Workers.
Main Thread
setTimeout
Web Workers
INP
Scheduler API
Blocking Resources
Quan sát cách script và stylesheet render-blocking làm trễ hiển thị trang. Chạy server local để giả lập tài nguyên chậm.
Render Blocking
Script Order
CSS Loading
Compression (Gzip / Brotli)
Cấu hình Nginx để serve asset đã nén gzip. Giảm đến 70% kích thước file văn bản như HTML, CSS và JS.
Gzip
Brotli
Nginx
Transfer Size
Lazy Loading
Trì hoãn tải ảnh ngoài màn hình bằng thuộc tính native loading="lazy" và IntersectionObserver API.
loading="lazy"
IntersectionObserver
LCP
Bandwidth
Preload & Prefetch
Dùng resource hint để tải sớm asset quan trọng hoặc prefetch tài nguyên cho điều hướng tiếp theo, giảm độ trễ cảm nhận.
rel="preload"
rel="prefetch"
dns-prefetch
Priority
Giảm Độ Trễ Nhập Liệu
Tái hiện kỹ thuật của Grammarly để giảm ~91% độ trễ nhập liệu: cập nhật underline theo chunk qua requestAnimationFrame, xử lý gợi ý debounced và thu gọn UI thông minh.
rAF Chunking
Debounce
Time Budget
INP
Main Thread
Code Virtualization
Tái hiện renderer ảo hóa code của Codecov — render file có 50.000+ dòng mà không crash. Chỉ các dòng hiển thị tồn tại trong DOM nhờ overscan, translateY và tối ưu pointer-events.
Virtualization
Overscan
translateY
Pointer Events
Absolute Position