---------
Phần 4. Hoạt
động của trình duyệt
Trình duyệt đã làm gì, để từ đoạn mã HTML trong tập tin
trangweb.html sau:
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title>Document</title>
</head>
<body>
Xin chào!
</body>
</html>
Cho ra kết quả là chữ ‘Xin chào!’ trên màn hình trình duyệt.
Đây là clip trình bày về quá trình hiển thị một trang web
của trình duyệt. Vì trình bày bằng tiếng Anh, nên chịu khó một chút, không nghe
được từ tiếng Anh nào cũng không sao, quan sát hình ảnh minh họa, vừa xem vừa
hình dung. Nghe nhiều tiếng Anh cho quen, cứ quan sát một em bé học tiếng Việt
thì rõ, em bé cứ nghe xong rồi bắt chước nói theo, em ấy có biết ngữ pháp, thi
cử là gì đâu!!! thế mà vẫn hiểu và nói được tiếng Việt. Sau này học ngữ pháp
sau, nếu thích.
Đầu tiên, người dùng phải chỉ cho trình duyệt biết vị trí
của tập tin HTML. Vị trí của tập tin HTML được chỉ định bằng một địa chỉ dạng
URL (Uniform Resource Locator). Địa chỉ này được nhập trên thanh địa chỉ
(address bar) của trình duyệt. URL cũng xuất hiện trong các thẻ của HTML, như
các thẻ: <a href=URL>, <img
src=URL>, <script src=URL>, <link href=URL>.
URL có định dạng như sau:
Scheme://domain:port/path?query_string#fragment_id
Ví dụ URL:
https://en.wikipedia.org/wiki/Uniform_Resource_Locator
http://daotao.edu.vn/e-learning/ViewCourses.php?cSval=3151&SjTemp=158
file:///C:/Users/Win%208.1/Downloads/openemr/trangweb.html
Trong URL,
- Scheme (hay protocol) là giao thức được sử dụng để giao tiếp giữa web
client và web server. Ví dụ: http, https, ftp, file.
- Domain là tên miền của web server, nơi chứa (các) trang web.
Ví dụ: en.wikipedia.org, daotao.edu.vn.
- Port là cổng được sử dụng để giao tiếp giữa web client và
web server, nếu không chỉ định rõ, thì giá trị của port sẽ được ngầm hiểu là
80.
- Path là đường dẫn (thư mục) của trang web hoặc nơi chứa
các tài nguyên của một website tại web server. Ví dụ: wiki/Uniform_Resource_Locator,
e-learning/ViewCourses.php, C:/Users/Win%208.1/Downloads/openemr/trangweb.html.
- Ngoài ra, URL cũng có thể chứa chuỗi truy vấn (query
string) hoặc một định danh trên trang HTML (fragment_id).
Đây là định nghĩa về web client và web server:
- Web client là một chương trình có thể giao tiếp với web
server, gửi yêu cầu và nhận thông tin từ web server, sau đó xử lý các thông tin
nhận được, để hiển thị hoặc phục vụ các mục đích khác. Trình duyệt chính là một
loại web client.
- Web server là một máy tính, cung cấp các dịch vụ WWW trên
Internet. Web server gồm có: phần cứng, hệ điều hành, phần mềm web server, và
nội dung của website.
Xem hình minh họa web client và web server dưới đây.
Sau khi người dùng nhập URL, gõ Enter, trình duyệt sẽ gửi
một yêu cầu (request) tới web server.
Web server nhận và xử
lý request, sau khi xử lý xong, sẽ gửi kết quả về cho web client (ví dụ:
gửi trang HTML về trình duyệt).
Tại trình duyệt, khi nhận được kết quả do web server trả về,
trình duyệt sẽ thực hiện các việc sau:
- Phân tích (parsing) và tạo cây DOM (DOM tree)
+ Phân tích HTML
+ Phân tích CSS
+ Phân tích & thực thi Javascript
- Tạo cây kết xuất (Render tree)
- Dựng khung kết xuất (layout)
- Hiển thị (paint)
Có thể tìm hiểu kĩ hơn về các thành phần và hoạt động của
trình duyệt ở trang web dưới đây, tuy nhiên vì viết bằng tiếng Anh và khá sâu,
nên để đỡ mất thời gian, chỉ xem qua thôi, sau này nếu cần phần nào sẽ quay
lại. http://taligarsiel.com/Projects/howbrowserswork1.htm
Quá trình hiển thị nội dung HTML được thực hiện dựa trên các
đặc tả HTML và CSS của W3C (tổ chức tiêu chuẩn về web).
Trình duyệt gồm nhiều bộ phận, mỗi bộ phận có nhiệm vụ
riêng. Hình sau là các bộ phận của trình duyệt.
Trong đó, rendering engine (tạm gọi là bộ phận kết xuất) có
nhiệm vụ hiển thị nội dung web. Ví dụ, nếu nội dung web là HTML, bộ phận kết
xuất sẽ thực hiện phân tích cú pháp HTML, CSS; sau đó, hiển thị kết quả lên cửa
sổ trình duyệt.
Bộ phận kết xuất có thể hiển thị nội dung web dạng HTML, XML
và hình ảnh. Để hiển thị các loại nội dung khác, trình duyệt sẽ sử dụng các bộ
phận bổ sung như các plug-in, extension.
Các trình duyệt khác nhau thường sử dụng các bộ kết xuất
khác nhau. Ví dụ, IE sử dụng Trident, Firefox sử dụng Gecko, Safari sử dụng
WebKit, Chrome và Opera sử dụng Blink (một nhánh của Webkit). Đọc thêm về web rendering
engine tại đây: https://en.wikipedia.org/wiki/Web_browser_engine.
Bộ phận kết xuất bắt đầu công việc của nó bằng cách lấy từng
khối dữ liệu từ tầng mạng (networking layer), kích thước mỗi khối là 8KB.
Sau khi đã có dữ liệu, quá trình kết xuất sẽ được thực hiện
theo quy trình sau:
Tạm dịch quy trình trên như sau:
- 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)
Sau đây là chi tiết các bước của quy trình:
Tạo cây DOM
Đầu tiên, bộ phận kết xuất sẽ thực hiện phân tích cú pháp
(parsing) mã HTML, mục đích là chuyển nội dung tài liệu HTML sang dạng DOM tree
(tạm gọi là cây DOM).
DOM là viết tắt của Document Object Model (trong vi.wiki
người ta dịch nó là 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ụ: 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à các đố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.
Trong tài liệu HTML, phần tử là các thành phần cấu tạo nên
một tài liệu HTML. Mỗi phần tử được bắt đầu bằng thẻ mở (start tag), đến phần
nội dung và kết thúc bằng thẻ đóng (end tag). Cấu trúc phổ biến của một phần tử
là <tên thẻ> nội dung </tên thẻ>.
Ví dụ một số phần tử của HTML:
- <html></html>:
phần tử gốc của mọi phần tử trong tài liệu HTML.
- <head></head>: phần tử chứa phần đầu của tài
liệu HTML, nơi đặt các tham chiếu, các khai báo cho tài liệu HTML.
- <body></body>: phần tử chứa phần thân của tài
liệu HTML.
Nội dung tài liệu HTML sẽ được chuyển thành một trong các
loại nút của cây DOM 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 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 thẻ 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.
Hình dưới đây là ví dụ về cây DOM và cây kết xuất.
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.
Lưu ý: quá trình kết xuất thường mất rấ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. 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.
Hình dưới đây là sơ đồ khối, minh họa quá trình kết xuất của
WebKit.
Hình dưới đây là sơ đồ khối, minh họa quá trình kết xuất của
Gecko.
-----------
Cập nhật [23/08/2020]
-----------