Ngu ngơ học làm web (4) - Hoạt động của trình duyệt

tiếp theo của: Ngu ngơ học làm web (3) - Cơ bản về HTML
---------

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