Browser renders website như thế nào?

1597

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Đã là lập trình viên, hẳn sẽ có đôi lần bạn nghe qua về DOM, nhưng liệu rằng bạn có biết cây DOM đóng vai trò gì khi trình duyệt hiển thị nội dung?. Ngoài DOM tree còn những loại tree nào được build khi trình duyệt render một website?. Ôi, vô vàn câu hỏi vì sao, nhưng túm váy lại, bài viết này sẽ trả lời cho câu hỏi browser renders website như thế nào?.

Nội dung trang web chúng ta hằng ngày vẫn thường xem được vẽ (paint) ra sao?. Tất cả những câu hỏi này sẽ có trong bài viết sau đây

1. DOM – Document object model

Khi trình duyệt đọc được resource, trước khi browser renders website, nó sẽ có được dữ liệu từ HTML. Cụ thể, các tag html, body, div, … Từng đối tượng sẽ được tạo ra như một Javascript objects – gọi là Node.

Ủa, vậy node là gì?. Node có phải là class cuối cùng của instance các HTML tag không?. Câu trả lời là có. Một node object cho tag div sẽ được tạo từ HTMLDivElement (kế thừa từ class Node).

À, tới đây ta có thể hiểu thêm một phần về cách browser renders website . Trình duyệt sẽ new một loạt các instance theo các thẻ được cung cấp ở HTML. HTMLDivElement, HTMLScriptElement, Node, …

Xem thêm các việc làm Web/Mobile lương cao trên TopDev

Sau khi browser đã khởi tạo xong các instance của node, nó sẽ tiến hành build
tree-like structure của những node đã được tạo. Nói tóm lại, toàn bộ nội dung HTML phía server cung cấp sẽ được xây dựng thành DOM Tree

2. CSSOM- CSS object model

Từ lúc thiết kế website, tất nhiên ai cũng muốn website của mình đẹp nhất có thể. Bằng cách nào? -> dùng css. Vậy mỗi element trên HTML đều sẽ gắn liền với một CSS selector nhất định. Ví dụ như thẻ h1 có font-size, color. Những thứ này sẽ được xây dựng lên thành CSSOM.

Theo thứ tự, sau khi xây dựng cây DOM, browser renders website sẽ đọc toàn bộ nội dung CSS từ tất cả các nơi (external, embedded, inline, user-agent). Từ những nội dung này, browser dựng lên CSSOM (với cấu trúc tương tự như DOM tree).

Lấy ví dụ, với nội dung CSS được mô tả như sau:

html {
padding: 0;
margin: 0;
}body {
font-size: 14px;
}.container {
width: 300px;
height: 200px;
color: black;
}.container > h1 {
color: gray;
}.container > p {
font-size: 12px;
display: none;
}
Xem tiếp...

Sau khi đọc được toàn bộ nội dung, browser sẽ dựng lên cây CSSOM như sau:

CSSOM tree được browser render sau khi đọc được nội dung CSS

3. Render Tree

Khi đã có cả DOM tree và CSSOM tree, đây là một trong những bước mà browser renders website. Bước này browser sẽ combined cả hai tree lại với nhau. Nội dung của 2 cây này sẽ cho ta thứ tự các nội dung trên website.

Một khi đã xây dựng xong reder tree, browser sẽ thực hiện vẽ từ element – đây là thứ mà chúng ta nhìn thấy. Nếu một node có CSSOM là display:none, hiển nhiên object này sẽ có kích thước 0px 0 0px -> không xuất hiện.

Các bước mà browser tạo ra Render-tree (nội dung website mà chúng ta thấy trên trình duyệt)

Lưu ý rằng, trong một số trường hợp, khi xây dựng cây combined giữa DOM và CSSOM, một số tag sẽ bị bỏ qua (vị dụ như tag meta, script, …). Một số node trên cây sẽ được ẩn đi (nếu CSS được viết với display:none).

  Cách để npm packages chạy trong browser
  Câu hỏi phỏng vấn mẹo về React: Component hay element được render trong browser?

4. Rendering sequence

Đọc tới đây, khi đã có cái nhìn khách quan về DOM, CSSOM và Render Tree, ta sẽ tiếp tục tìm hiểu về các bước (step) mà browser renders website.

4.1 Layout

Sau khi đã có nội dung mô tả chính xác các phần tử trên cây, trình duyệt sẽ thực hiện tính toán không gian cần thiết cho từng phần tử, vị trí của chúng ở trên màn hình.

4.2 Paint

Paint là quá trình trình duyệt vẽ từng pixel lên màn hình. Việc vẽ cũng được thực hiện trên nhiều lớp nếu như cần thiết (match color, layer hay phối màu)

4.3 Composite

Ở bước cuối cùng, browser kết hợp các layer lại với nhau, cho ta một cài nhìn hoàn chỉnh về website.

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

Xem thêm Việc làm IT hấp dẫn trên TopDev

RELATED ARTICLESMORE FROM AUTHOR