Để mang lại trải nghiệm web nhanh, trình duyện cũng phải trải qua rất nhiều quy trình như nhận các files HTML, CSS và JavaScript từ server và thực hiện các bước cụ thể để biến đổi thành các pixel trên màn hình.

Chú ý: Nếu đang sử dụng Angular framework

  • Khi bạn build ứng dụng Angular, Webpack sẽ biên dịch và đóng gói các file TypeScript và HTML của component thành JavaScript (như main.js).JavaScript này sẽ “kết xuất” HTML vào trong DOM của trình duyệt (cụ thể là bên trong thẻ ` ``). Nên khi tải trang lần đầu, server thường chỉ cung cấp một file HTML cơ bản (thường là index.html). File này chủ yếu chứa một thẻ ````.

Critical Rendering Path là gì?

CRP (Critical Rendering Path) là trình tự các bước browser thực hiện để chuyển đổi Resources (HTML, CSS và JS) thành pixel trên màn hình.

  • Để tối ưu hoá Critical Rendering Path thì chúng ta phải tối ưu hoá trong quy trình trên.

Các bước trong Critical Rendering Path

Bước 1. Browser tải xuống từ Network và phân tích cú pháp HTML sau đó tạo ra DOM.

Bước 2. Tiếp theo, nó tải xuống và xử lý CSS và xây dựng CSSOM.

Bước 3. Sau đó, nó kết hợp các nodes cần thiết từ cây DOM và CSSOM để tạo ra Render Tree, một cấu trúc cây chứa tất cả các nodes cần thiết để hiển thị trang.

Bước 4. Nó tính toán kích thước và vị trí của từng element trên trang thông qua quá trình Layout.

Bước 5. Cuối cùng, trình duyệt vẽ (paints) các điểm ảnh lên màn hình.

Kết

Tài liệu tham khảo