+15

🚀 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 - Critical Rendering Path (CRP)

Critical Rendering Path (CRP) là gì và tại sao lại cần hiểu về CRP ? Anh em hãy cùng mình tìm hiểu ngay dưới đây nhé.

Việc anh em nắm được trình tự các bước trong CRP sẽ giúp cho anh em hiểu được bản chất, cách thức mà trình duyệt render lên một trang web. Từ việc hiểu bản chất, anh em sẽ dễ dàng tối ưu hiệu năng Frontend một cách hiệu quả hơn.

Khái niệm

Tên gọi khác: Browser Rendering Pipeline

Là trình tự các bước Trình duyệt thực hiện để chuyển đổi các Resource (HTML, CSS và JS) thành các Pixel hiển thị lên màn hình.

Tổng quan

Dưới đây là mô hình tổng quan trình tự các bước browser thực hiện render. image.png

Critical rendering path (Browser rendering pipeline)
  1. Chuyển đổi HTML thành DOM.
  2. Chuyển đổi CSS thành CSSDOM.
  3. Kết hợp DOM và CSSDOM tạo thành Render Tree.
  4. Từ thông tin style trên Render Tree, thực hiện tính toán vị trí và kích thước của các phần tử trong bước Layout.
  5. Từ thông tin trên Render Tree và Layout, thực hiện vẽ các phần tử lên màn hình ở bước Paint.

Chi tiết

Trước khi trình duyệt render trang web, DOMCSSDOM cần phải được xây dựng xong.

1. DOM

Đây là quá trình chuyển đổi HTML thành DOM.

Output: Một cây các Node có chứa thông tin thuộc tính (class, id, ...) và mối quan hệ với các Node khác trên DOM.


VD: Từ đoạn code HTML dưới đây, trình duyệt xây dựng DOM tương ứng

<!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>

image.png

Dom

Nếu anh em chạy trên tab Performance thì task parse HTML sẽ tương ứng với bước xây dựng DOM này.

image.png

Task parse HTML trên Performance tab

2. CSSDOM

Đây là bước chuyển các style CSS thành CSSDOM.

Output: Các quy tắc Style.

Lưu ý:

  1. Đây là bước độc lập với bước xây dựng DOM, chưa phải là bước xác định style cuối cùng được áp dụng lên DOM.
  2. CSS ở đây có thể là các style mặc định của trình duyệt (VD: các thẻ h1, h2, b, strong, i, ...) và các CSS tự định nghĩa trong <style> hoặc file CSS.

VD: Từ đoạn code CSS, trình duyệt sẽ thực hiện tạo CSSDOM

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

image.png

CSSDOM


Nếu anh em chạy trên tab Performance thì task Parse Stylesheet sẽ tương ứng với bước xây dựng CSSDOM này.

image.png

Task Parse Stylesheet trên Performance tab

3. Render Tree

Đây là quá trình kết hợp DOM và CSSDOM để tạo lên Render Tree.

Output: Một cây các Node được render và các quy tắc Style đã được tính toán cho các Node đó.

Cây không chứa các Node ẩn mặc định (VD: các thẻ html, head, script, header, style, meta, ...) và các Node được ẩn bởi CSS (VD: display: none).

Lưu ý: Render Tree cũng gồm tất cả visible pseudo element (VD: ::before, ::after, ...), mặc dù element này có thể không có trên DOM.

Nói chung Render Tree chứa các Node mà người dùng nhìn thấy được trên màn hình.


VD: Từ DOM và CSSDOM trong bước 1 và 2 ở trên, anh em sẽ có Render Tree image.png

Render Tree = DOM + CSSDOM

Nếu anh em chạy tab Performance thì task Recalculate Style sẽ tương ứng với bước xây dựng Render Tree này.

image.png

Task Recalculate Style trên Performance tab

4. Layout

Là quá trình tính toán kích thước, vị trí của các phần tử trên browser. Layout còn có tên khác là Reflow.

Output: Box model

image.png

Box Model

VD: Anh em khai báo style cho width, height, ... ở dạng %, em, rem, ... (width: 50% chẳng hạn). Trình duyệt sẽ phải thực hiện tính toán kích thước bằng cách chuyển đổi về px và xác định vị trí của phần tử trên màn hình. image.png

Layout

Nếu anh em chạy tab Performance thì task Layout sẽ tương ứng với bước này.

image.png

Task Layout trên Performance tab

5. Paint

Từ các thông tin Style trên Render Tree và thông tin kích thước, vị trí từ Layout, trình duyệt thực hiện vẽ các pixel lên màn hình, đây chính là giao diện mà người dùng nhìn thấy.


Nếu anh em chạy tab Performance thì task Paint sẽ tương ứng với bước này.

image.png

Task Paint trên Performance tab

6. Composite

Đến đây anh em sẽ đặt câu hỏi là theo hình ảnh ở phần Tổng quan thì đến quá trình Paint là kết thúc pipeline rồi mà, vậy bước 6 này là sao ?

Thực tế ngoài 5 bước chính, sẽ có thêm một quá trình có tên là Composite. Quá trình này có nhiệm vụ xác định số lượng layer và gom tất cả các layer để hiển thị lên màn hình.

Anh em mình lại đặt câu hỏi tiếp, vậy layer là gì ?

Khái niệm Layer lại rất đơn giản anh em ạ. Layer đề cập đến việc các phần tử tách biệt, có thể xếp chồng lên nhau.

1 VD để anh em dễ hình dung hơn nhé: Chắc hẳn anh em đã từng gắn position: absolute cho 2 thẻ div, và sử dụng z-index để 1 thẻ đè lên thẻ còn lại rồi đúng không. Đấy chính là việc anh em đang tạo ra 2 layer riêng biệt, có thể xếp chồng lên nhau. image.png

Layer

Nếu anh em chạy tab Performance thì task Layerize sẽ tương ứng với bước này.

image.png

Task Layerize trên Performance tab

Kết

Bài viết này sẽ giúp cho anh em nắm rõ được bản chất, cách thức mà trình duyệt thực hiện render một trang web. Từ đó, anh em sẽ tự tin bắt tay vào tối ưu hiệu năng Frontend.

Trong các bài viết tiếp theo, mình sẽ chia sẻ tới anh em các phương pháp tối ưu hiệu năng Frontend dựa trên Critical Rendering Path - những thứ mà chúng ta đã tìm hiểu trong bài này.


Rất cảm ơn anh em đã đọc bài viết. Hi vọng bài viết sẽ giúp ích cho anh em và đừng quên đón chờ những bài viết tiếp theo của mình nha.

Anh em hãy kết nối với mình qua linkedin để có nhiều bài viết hay khác nhé: www.linkedin.com/in/pdthien

Tham khảo

https://web.dev/articles/critical-rendering-path


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.