Trình duyệt gồm nhiều thành phần, mỗi thành phần có nhiệm vụ riêng. Hình sau là các thành phần của nó.
Trong đó,
– User Interface: toàn bộ giao diện của trình duyệt (ví dụ: menu, thanh địa chỉ, các nút, thanh trạng thái), ngoại trừ phần cửa sổ chứa nội dung của trang web.
– Browser engine: ghép nối, điều phối hoạt động giữa User Interface và Rendering engine
– Rendering engine: phân tích mã HTML, CSS để hiển thị nội dung trang web
– Networking: thực hiện các giao tiếp mạng, truyền dữ liệu
– JavaScript Interpreter: phân tích và thực thi mã JavaScript
– UI Backend: thực hiện vẽ các đối tượng cơ bản, ví dụ các cửa sổ, combo box
– Data Persistence: thực hiện các công việc liên quan đến lưu trữ trên máy cục bộ (ví dụ cookie)
Rendering engine còn có tên gọi khác là Layout engine.
Các trình duyệt khác nhau thường sử dụng các Rendering engine và JavaScript Interpreter khác nhau. Ví dụ,
Trình duyệt | Rendering engine/ Layout engine | JavaScript Interpreter |
Chrome | Blink | V8 |
Mozilla Firefox | Gecko | SpiderMonkey |
Microsoft Edge | EdgeHTML | Chakra JavaScript engine |
Opera | Blink | V8 |
Internet Explorer | Trident | Chakra JavaScript engine |
Apple Safari | Webkit | JavaScript Core (Nitro) |
2: Quá trình biên dịch tài liệu HTML
Tới đây đã biết được là trình duyệt sẽ dùng giao thức file, http hoặc https để lấy tài liệu HTML về, sau đó thực hiện biên dịch và hiển thị nội dung ra màn hình. Lưu ý, tài liệu HTML thường bao gồm mã HTML, CSS và JavaScript; trong đó, HTML tạo ra nội dung trang web, CSS thực hiện trang trí, định dạng hiển thị cho phần nội dung và JavaScript thực hiện các xử lý, tương tác.
Thành phần Rendering engine (tạm gọi là Bộ phận kết xuất) của trình duyệt sẽ thực hiện việc biên dịch mã HTML và CSS, thành phần JavaScript Interpreter sẽ biên dịch và thực thi mã JavaScript.
Quá trình biên dịch và hiển thị nội dung gồm bốn bước sau:
– Phân tích (parsing) mã HTML để tạo cây DOM (DOM tree)
– Tạo cây kết xuất (render tree)
– Dựng khung kết xuất (layout)
– Hiển thị (paint)
Xem hình minh họa,
Phân tích tài liệu HTML để tạo cây DOM
DOM là viết tắt của Document Object Model (Mô hình đối tượng tài liệu). DOM là một chuẩn của W3C, dùng để biểu diễn tài liệu HTML, XML; cho phép người lập trình có thể truy cập và xử lý nội dung của tài liệu HTML, XML bằng ngôn ngữ lập trình, ví dụ ngôn ngữ JavaScript. DOM gồm ba loại là Core DOM, XML DOM và HTML DOM. Trong phần này chỉ quan tâm tới HTML DOM, để tiện trình bày, gọi tắt là DOM.
Ở dạng DOM, mỗi phần tử (element) của tài liệu HTML đều được xem là một đối tượng, có thuộc tính và phương thức. Do đó, người lập trình có thể lấy, thay đổi, thêm, xóa các phần tử của tài liệu HTML. Mỗi phần tử được biểu diễn bằng một nút (node) trong cây DOM.
Tài liệu HTML sẽ được chuyển thành một trong các loại nút sau:
– Document: là nút gốc, đại diện cho toàn bộ tài liệu HTML
– Element: tất cả các phần tử của HTML đều thuộc loại nút này
– Text: phần nội dung văn bản trong tài liệu HTML thuộc loại nút này
– Attribute: thuộc tính của các phần tử trong tài liệu HTML thuộc loại nút này
– Comment: các chú thích trong tài liệu HTML thuộc loại nút này
Dưới đây là hình minh họa, kết quả chuyển từ tài liệu HTML sang cây DOM.
Tạo cây kết xuất (Render tree)
Sau khi đã có cây DOM, bộ phận kết xuất tiếp tục phân tích nội dung CSS, kết hợp với một số thông tin khác trong tài liệu HTML để tạo ra cây kết xuất.
Cây kết xuất chứa thông tin để hiển thị các phần tử của tài liệu HTML lên cửa sổ trình duyệt. Các thông tin gồm: chiều rộng, chiều cao, vị trí, màu, hướng của phần tử.
Một cách trực quan, cây kết xuất chứa các hình chữ nhật cùng với thông tin về màu và hướng. Đây là các hình chữ nhật (hay các khung) sẽ được hiển thị trong cửa sổ trình duyệt.
Cây kết xuất có cấu trúc gần giống với cây DOM. Tuy nhiên, các nút trên cây DOM nếu không được hiển thị sẽ không có trong cây kết xuất, ví dụ nút [Element:<head>] và các nút con của nó. Các nút được đánh dấu là “không hiển thị” cũng không xuất hiện trong cây kết xuất. Ngược lại, một số nút trên cây DOM sẽ có nhiều nút tương ứng trên cây kết xuất.
Xem hình minh họa,
Dựng khung kết xuất (layout)
Sau khi đã có cây kết xuất, bộ phận kết xuất sẽ xác định tọa độ cho các nút trên cửa sổ trình duyệt. Quá trình này tạm gọi là dựng khung (layout).
Hiển thị (paint)
Bước cuối cùng, bộ phận kết xuất sẽ chuyển các dữ liệu cần thiết cho bộ phận UI Backend để xuất nội dung lên cửa sổ trình duyệt.
Hình dưới đây là sơ đồ khối, minh họa quá trình phân tích và hiểu thị một tài liệu HTML của WebKit.
Ở hình trên,
– HTML: nội dung tài liệu HTML
– Style Sheets: nội dung CSS
– HTML Parser: bộ phận phân tích mã HTML
– CSS Parser: bộ phận phân tích CSS
– DOM: mô hình DOM
– DOM Tree: cây DOM
– Style Rules: thông tin định dạng, và hiển thị các phần tử HTML
– Attachment: bộ phận kết hợp các thông tin định dạng(CSS) vào các nút của cây DOM
– Layout: khung kết xuất các phần tử HTML
– Render Tree: cây kết xuất
– Painting: Bộ phận hiển thị
– Display: trang web kết quả
Lưu ý: quá trình phân tích và hiển thị một tài liệu HTML thường mất nhiều thời gian. Vì vậy, trình duyệt sẽ không thực hiện trọn vẹn từng bước ở trên, mà nó sẽ cố gắng thực hiện song song nhiều bước cùng lúc trên các khối dữ liệu. Kích thước mỗi khối dữ liệu là 8KB. Nghĩa là, sẽ có những khối dữ liệu đang được phân tích để hiển thị, trong khi vẫn có những khối khác chưa được xử lý. Mục đích là hiển thị nội dung trang web càng sớm càng tốt.
.jpg)
.jpg)
0 Nhận xét