Tối Ưu Hiệu Suất Frontend Qua Đường Dẫn Render Quan Trọng (CRP)

Critical Rendering Path (CRP) là gì và tại sao việc nắm vững khái niệm này lại là cần thiết trong lĩnh vực phát triển Frontend? Hãy cùng mình khám phá ngay dưới đây.

Tại Sao Nên Hiểu Về CRP?

Nắm vững trình tự các bước trong CRP sẽ giúp bạn hiểu rõ hơn về cách mà trình duyệt render một trang web. Nhờ việc này, bạn có thể tối ưu hiệu suất Frontend một cách hiệu quả và hợp lý hơn.

Khái Niệm Về CRP

Tên gọi khác: Browser Rendering Pipeline
CRP là trình tự các bước mà trình duyệt thực hiện để chuyển đổi các tài nguyên (HTML, CSS và JS) thành các Pixels hiển thị trên màn hình.

Tổng Quan Các Bước Render

Trình tự các bước trình duyệt thực hiện để render là:

Chuyển đổi HTML thành DOM.
Chuyển đổi CSS thành CSSOM.
Kết hợp DOM và CSSOM để tạo thành Render Tree.
Tính toán vị trí và kích thước của các phần tử trong bước Layout.
Vẽ các phần tử lên màn hình trong bước Paint.
Quá trình Composite để gom các layer và hiển thị chúng lên màn hình.

Chi Tiết Các Bước Render

1. Xây Dựng DOM

DOM (Document Object Model) là quá trình chuyển đổi HTML thành cấu trúc cây (tree structure) các Node có chứa thông tin thuộc tính và mối quan hệ với các Node khác.

Ví dụ: Từ đoạn mã HTML sau:

html Copy

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>

Tương ứng với các Node trong DOM.

Nếu bạn mở tab Performance, bạn sẽ thấy task parse HTML là bước xây dựng DOM.

2. Xây Dựng CSSOM

CSSOM (CSS Object Model) là bước chuyển đổi các quy tắc CSS thành CSSOM. Quá trình này độc lập với việc xây dựng DOM.

Lưu ý: Các style mặc định của trình duyệt cũng được tính vào.

Ví dụ: Từ đoạn mã CSS sau:

css Copy

body {
 font-size: 16px;
}
p {
 font-weight: bold;
}
span {
 color: red;
}
p span {
 display: none;
}
img {
 float: right;
}

Tương ứng với các quy tắc trong CSSOM.

Trong tab Performance, task Parse Stylesheet là bước xây dựng CSSOM.

3. Tạo Render Tree

Render Tree là kết quả kết hợp giữa DOM và CSSOM. Cây này chỉ chứa các Node có thể nhìn thấy trên màn hình.

Lưu ý: Các Node ẩn (như thẻ head, meta,...) không có trong Render Tree.

Nếu bạn mở tab Performance, bạn sẽ thấy task Recalculate Style là bước tạo Render Tree.

4. Tính Toán Layout

Layout hay còn gọi là Reflow, là quá trình xác định kích thước và vị trí của các phần tử.

Kết quả: Box model cho các phần tử trên giao diện người dùng.

Nếu mở tab Performance, task Layout là bước tính toán này.

5. Vẽ (Paint)

Trong bước này, trình duyệt sẽ vẽ các pixels lên màn hình dựa trên thông tin từ Render Tree và Layout.

Task Paint trên tab Performance đánh dấu bước này.

6. Composite

Bước Composite là một quá trình bổ sung sau khi Paint. Bước này gom các layer (tầng) và hiển thị chúng trên màn hình.

Layer đề cập đến việc các phần tử có thể xếp chồng lên nhau với các thuộc tính như position: absolute và z-index.

Trong tab Performance, bạn sẽ thấy task Layerize trong bước này.

Kết Luận

Bài viết này đã giúp bạn hiểu rõ hơn về bản chất và các bước mà trình duyệt thực hiện để render một trang web. Từ kiến thức này, bạn có thể tự tin bắt tay vào việc tối ưu hiệu suất cho Frontend.

Hãy theo dõi các bài viết tiếp theo, nơi mình sẽ chia sẻ các phương pháp tối ưu hiệu suất Frontend dựa trên Critical Rendering Path đã trình bày ở đây.

Kết Nối Với Mình

Đừng quên kết nối với mình để cùng cập nhật nhiều bài viết hay khác:

Tham Khảo

Web.dev - Critical Rendering Path
source: viblo

🚀 Tối Ưu Hiệu Suất Frontend Qua Đường Dẫn Render Quan Trọng (CRP)