Đã 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, …

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

“Using DOM API, developers can add or remove HTML elements, change its appearance or bind event listeners. Using DOM API, HTML elements can be created or cloned in memory and maniuplated without affecting the rendered DOM tree. This gives developers the ability to construct highly dynamic web page with rich user experience.” – How the browser renders a web page?

“Sử dụng DOM API, lập trình viên có thể thêm hoặc xóa các đối tượng HTML, thay đổi cách mà nó xuất hiện, hoặc gán các event listeners. Sử dụng DOM API, HTML elements có thể khởi tạo hoặc sao chép vào trong bộ nhớ, thay đổi nhưng không nhất thiết phải render lại cây DOM. Điều này đem tới cho các lập trình viên khả năng xây dựng các website có trải nghiệm người dùng tốt”.

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;
}

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

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.

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).

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.

Nếu có hứng thú về Javascript, các bạn có thể nghía qua bài viêt Javascript prototype ở Kieblog nha.

5. Tham khảo thêm về browser renders website

• How the browser render HTML&CSS.
• Introducing ‘Layout boundaries’.
• Render-tree Construction, Layout, and Paint.