Bài trước: Web front-end (1) - Web là gì?
-----
1.1
Trình duyệt web
Web là không gian thông tin toàn cầu, để có thể truy cập vào
không gian thông tin toàn cầu này, người dùng cần có phần mềm chuyên dụng. Phần
này sẽ tìm hiểu kĩ hơn về trình duyệt, một phần mềm chuyên dụng để truy cập web.
Với người dùng, trình duyệt là công cụ để khai thác và sử dụng
tài nguyên web. Với lập trình viên, trình duyệt là công cụ để dịch mã nguồn, để
hiển thị kết quả.
Trình duyệt web là gì?
Trình duyệt web (web browser) hay được gọi tắt là trình duyệt
(browser) là một phần mềm, được sử dụng để truy cập thông tin trên web. Mỗi một
tài nguyên web (dạng văn bản, hình ảnh, âm thanh, video) đều có một URL xác định,
trình duyệt sẽ dựa theo các URL này để tải nội dung về và hiển thị cho người
dùng.
Do web hoạt động theo kiến trúc client-server, nên thông tin
web sẽ được đặt tại các máy server, người dùng sẽ sử dụng trình duyệt để yêu cầu
thông tin từ một server cụ thể (bước 1). Khi nhận được yêu cầu từ trình duyệt,
server sẽ xử lý yêu cầu (bước 2) và gửi lại kết quả (bước 3) để hiển thị lên
trình duyệt (bước 4). Xem hình minh họa.
Trình duyệt đầu tiên do Tim Berners-Lee tạo ra năm 1990, có
tên ban đầu là WorldWideWeb, sau đổi tên thành Nexus.
Trình duyệt thường được cài đặt trên một số thiết bị phổ biến
như máy tính để bàn (desktop), máy tính xách tay (laptop), máy tính bảng
(tablet) và điện thoại thông minh (smartphone). Hiện nay có rất nhiều trình duyệt
khác nhau, ví dụ Chrome, Firefox, Microsoft Edge, Safari, Opera, Cốc Cốc.
Trình duyệt gồm nhiều thành phần như: User interface,
Browser engine, Rendering engine, Networking, JavaScript Interpreter, UI
Backend, Data Persistence. Xem hình minh họa.
Trong đó,
– User interface: là toàn bộ giao diện của trình duyệt, ngoại
trừ phần cửa sổ chứa nội dung của trang web, cho phép người dùng tương tác với
trình duyệt. Một số thành phần của User interface: menu, thanh địa chỉ, các
nút, thanh trạng thái.
– Browser engine: thực hiện ghép nối, điều phối hoạt động giữa
User interface và Rendering engine. Ví dụ, Browser engine sẽ nhận lệnh từ User
interface và gửi cho Rendering engine thực thi. Ví dụ, khi bạn bấm nút Reload
this page (thuộc thành phần User interface), lệnh này sẽ được Browser engine gửi
cho Rendering engine để tải và hiển thị lại nội dung trang web hiện thời.
– Rendering engine: phân tích mã HTML, CSS để hiển thị nội
dung web ra cửa sổ trình duyệt
– Networking: thực hiện các giao tiếp mạng, truyền dữ liệu
giữa trình duyệt và máy server
– 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ữ dữ liệu trên máy cục
bộ (ví dụ cookie, cache)
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[1] 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) |
Có thể thấy, trình duyệt là một phần mềm khá đặc biệt, nó vừa nhận mã nguồn từ máy server gửi tới, vừa thực thi mã nguồn để xuất ra kết quả (đóng vai trò là trình thông/biên dịch) và cho người dùng tương tác với kết quả hiển thị (chạy ứng dụng).
Là một lập trình viên, bạn cần phải xem xét trình duyệt ở cả
hai vai trò. Thứ nhất, là người sử dụng, bạn sẽ sử dụng trình duyệt để duyệt web. Thứ hai, là lập trình viên, bạn sẽ sử dụng trình duyệt để xem trước trang web kết quả,
sửa lỗi, và thiết kế giao diện.
Sử dụng trình duyệt để
duyệt web
Với vai trò là người sử dụng, cần phân biệt hai khu vực khác
nhau của trình duyệt. Một là giao diện của trình duyệt (vùng 1) và hai là giao diện của trang web hay ứng dụng web (vùng 2). Xem hình minh họa.
Giao diện của
trình duyệt
Mỗi
loại trình duyệt sẽ có giao diện khác nhau, tuy nhiên, thường sẽ
gồm các phần sau: các tab, thanh địa chỉ, các nút điều khiển, menu, thanh trạng
thái, thanh cuộn (ngang, dọc).
–
Người dùng thường có nhu cầu mở nhiều trang web cùng một lúc, mỗi trang web sẽ
nằm trên một tab. Để mở trang web trên một tab mới, người dùng sẽ bấm vào nút
“New tab”.
–
Sau khi mở tab mới, người dùng sẽ nhập địa chỉ của trang web (ứng dụng web, hoặc
tài nguyên web bất kỳ) vào thanh địa chỉ. Bấm phím Enter để trình duyệt lấy tài
nguyên web từ server về và hiển thị.
–
Thanh trạng thái (status bar): hiển thị URL khi người dùng rê chuột lên các
liên kết của trang web, hoặc hiển thị thông báo khi trang web đang được tải về.
Thường thì thanh trạng thái sẽ không xuất hiện, nó chỉ xuất hiện khi có thông
tin cần được hiển thị.
– Trên
giao diện của trình duyệt cũng có các nút điều khiển, chúng được sử dụng để tải
lại trang web hiện tại (reload), trở về trang mặc định do người dùng thiết lập
(home page), trở về trang trước (go back), đi tới trang sau (go forward), và
nhiều nút chức năng khác.
–
Menu: chứa các chức năng cho phép người dùng thiết lập chế độ hiển thị, ngôn ngữ,
bảo mật, cài thêm các chức năng mở rộng, mở bộ công cụ cho lập trình viên
(developer tools), và nhiều chức năng khác.
–
Thanh cuộn (của trình duyệt): cho phép người dùng cuộn ngang và dọc để xem các
phần thông tin chưa được hiển thị hết trong khung nhìn hiện tại.
Giao diện của
trang web
Giao diện của trang web, hay của ứng dụng web là phần nội
dung được trình duyệt lấy từ server về và hiển thị cho người dùng. Nó chính là trang
tin, trang thương mại điện tử hoặc các ứng dụng web khác, mà người sở hữu trang
web muốn gửi tới người dùng và khách hàng của họ.
Sử dụng trình duyệt
trong quá trình tạo ra trang web
Để tạo ra trang web, lập trình viên thường sử dụng các trình
viết mã (text editor, code editor) hoặc môi trường phát triển tích hợp (IDE). Tuy nhiên,
trong quá trình tạo ra trang web, lập trình viên cũng có thể kết hợp thêm một số
tiện ích của trình duyệt để thiết kế giao diện, kiểm tra và sửa lỗi, xem trước
kết quả.
Các hướng dẫn liên quan đến sử dụng trình duyệt trong quá
trình tạo ra trang web sẽ lần lượt trình bày trong những phần sau.
Quá trình hiển thị trang web của trình duyệt
Như đã biết, do web hoạt động theo kiến trúc client-server,
nên để có trang web trên trình duyệt cần trải qua các bước sau:
– Người dùng nhập địa chỉ trang web (URL) vào thanh địa chỉ
– Trình duyệt dựa vào URL trong thanh địa chỉ, kết nối tới
máy web server, gửi yêu cầu tới web server (ví dụ yêu cầu: gửi cho nội dung
trang web en.wikipedia.org).
– Web server xử lý yêu cầu, gửi trả kết quả về cho trình duyệt
(ví dụ nội dung trang web dưới dạng mã nguồn HTML, CSS và JavaScript).
– Quá trình hiển thị trang web của trình duyệt được thực hiện
sau khi trình duyệt đã nhận được kết quả trả về của web server (gồm mã HTML,
CSS, JavaScript). Xem hình minh họa.
Các bước của quá trình hiển thị:
– Phân tích mã HTML để tạo cây DOM (DOM tree)
– Phân tích mã CSS để tạo CSSOM (CSS Object Model - mô hình
đối tượng CSS)
– Kết hợp cây DOM và CSSOM để tạo ra cây kết xuất (Render
tree)
– Dựng khung giao diện (layout) dựa trên cây kết xuất
– Hiển thị nội dung lên trình duyệt (painting)
Lưu ý: do việc hiển thị nội dung lên trang web có liên quan
đến việc xử lý ba loại mã khác nhau là HTML, CSS và JavaScript. Quá trình xử lý
mỗi loại mã cũng khác nhau. Vì vậy, kĩ thuật viết và tổ chức mã nguồn của một
trang web có ảnh hưởng rất nhiều đến tốc độ hiển thị. Ngoài ra, các trình duyệt
khác nhau thường sử dụng các Rendering engine khác nhau nên kết quả hiển thị cũng
sẽ khác nhau trên mỗi trình duyệt.
Xem và đọc thêm
Trình duyệt (tiếng Việt): https://vi.wikipedia.org/wiki/Tr%C3%ACnh_duy%E1%BB%87t_web
Trình duyệt (tiếng Anh): https://en.wikipedia.org/wiki/Web_browser
Hiểu về quá trình hiển thị trang web của trình duyệt (tiếng
Việt): https://vntesters.com/hieu-ve-trinh-duyet-how-browsers-work/.
Hiểu về quá trình hiển thị trang web của trình duyệt (tiếng
Anh): http://taligarsiel.com/Projects/howbrowserswork1.htm
Trình duyệt web (xem): https://www.youtube.com/watch?v=mxpost8rwXE
How a web browser builds and displays a web page (view): https://www.youtube.com/watch?v=DuSURHrZG6I&t=121s
How do web browser work (view): https://www.youtube.com/watch?v=WjDrMKZWCt0
Các từ khóa (sử dụng các từ khóa này để tìm kiếm trên Google
hoặc Youtube để đọc và xem thêm): trình duyệt là gì, web browser là gì, web
browser tutorial, how to web browser display a web page.
Bài tập và thực hành
Bài tập 1. Truy cập và sử dụng một số trang web, ghi
lại các thông tin được hiển thị trên thanh trạng thái (nằm ở phía dưới cùng của
cửa sổ trình duyệt). Mục đích: để giúp bạn quan sát được quá
trình lấy mã nguồn trang web từ server về trình duyệt, và quan sát các liên kết
có trong một trang web.
[Gợi ý]
– Bước 1. Mở trình duyệt web
– Bước 2. Nhập địa chỉ của một trang web (URL) vào thanh địa
chỉ (ví dụ trang https://en.wikipedia.org), bấm Enter.
– Bước 3. Ngay khi bấm Enter ở bước 2, nhìn xuống phía dưới
cùng, góc trái của cửa sổ trình duyệt sẽ thấy dòng chữ “waiting for ….”. Ví dụ
“waiting for en.wikipedia.org”.
– Bước 4. Khi trang web đã hiển thị xong, dùng chuột di chuyển
trên các danh mục, các tiêu đề bài viết, hoặc các nút bấm của trang web, quan
sát nội dung xuất hiện trên thanh trạng thái, đó chính là các URL của các liên
kết. Ghi lại các thông tin để hiểu thêm về URL.
Bài tập 2. Tạo bookmark cho 5 trang web hữu ích đối với bạn.
[Gợi ý]
(thực hiện trên trình
duyệt Chrome)
– Bước 1. Mở trang web cần tạo bookmark
– Bước 2. Bấm vào nút Bookmark this tab (hình ngôi sao) ở cuối
thanh địa chỉ, để mở cửa
sổ Bookmark added, chọn Edit bookmark để mở cửa sổ Edit bookmark
– Bước 3. Trong cửa sổ Edit bookmark thực hiện đặt lại tên,
và chọn vị trí lưu bookmark phù hợp
– Bước 4. Khi cần mở lại một trang web đã được lưa vào
bookmark, chỉ cần bấm vào tên tương ứng trong bookmark.
Bài tập 3. Lưu đoạn
mã nguồn của trang web sau vào một tập tin (test.html). Sau đó mở tập tin bằng
trình duyệt. Sử dụng tab Elements của Developer tools, chỉ ra mã nguồn HTML,
CSS và cây DOM của trang web.
[test.html]
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: red; }
p { color: green; }
</style>
</head>
<body>
<h1>Trang web đầu tiên của bác Tèo</h1>
<p>Học về web browser</p>
</body>
</html>
[Gợi ý]
Để mở developer tools, cần mở trình duyệt, và sử dụng một
trong các cách sau:
– Bấm tổ hợp ba phím Ctrl+Shift+I
– Bấm phím F12
– Vào menu của trình duyệt tìm tới mục Developer tools
– Bấm chuột phải vào trang web, chọn Inspect
Trong cửa sổ của Developer tools, chọn tab Elements
– Khung bên trái của cửa sổ Elements chính là cây DOM, cũng
là nội dung mã HTML của trang web hiện tại
– Khung bên phải của cửa sổ Elements (tab Styles) chính là
CSS của trang web
Bài tập 4 (nâng cao). Add-on của trình duyệt là gì? Thực hành thêm một add-on bất kỳ cho trình duyệt. Tìm hiểu cách lập trình một add-on cho trình duyệt (dùng JavaScript), ví dụ, tạo ra chức năng THÊM, XÓA, SỬA các mục từ cho trang Google Sheet sau: https://docs.google.com/spreadsheets/d/1koyx85jh12QUat8FQxkVh8AI4Gr-E6NZkfXN84Fc1oE/edit?usp=sharing
Câu hỏi ôn tập
Câu hỏi 1. Trình duyệt web đầu tiên do ai tạo ra?
A. Steve Jobs
B. Tim Berners-Lee
C. Bill Gates
D. Chrome
Câu hỏi 2. Có thể sử dụng trình duyệt web để?
A. Xem nội dung trang web
B. Hỗ trợ quá trình thiết kế giao diện
C. Giúp tìm và sửa lỗi trong quá trình phát triển web
D. Cả A, B, và C
Câu hỏi 3. A web browser (commonly referred to as a browser
or internet browser) is an _________ for accessing the World Wide Web.
A. application software
B. operating system
C. library
D. framework
Câu hỏi 4. Mã nguồn trang web, khi trình duyệt nhận về từ
web server có thể gồm?
A. HTML, CSS, PHP, JavaScript
B. HTML, CSS, C#
C. CSS, C#, SQL
D. CSS, JavaScript, HTML
Câu hỏi 5. Một số kết quả trung gian được tạo ra khi trình
duyệt hiển thị trang web là gì?
A. DOM, CSSOM, Trang web kết quả, HTML
B. CSS, DOM, Trang web kết quả, DOM Tree
C. DOM tree, CSSOM, Trang web kết quả, Render tree
D. CSSOM, DOM tree, OOP, Render tree
Câu hỏi 6. CSSOM là viết tắt của?
A. CSS Object Modern
B. CSS Oriented Model
C. CSS Object
Mode
D. CSS Object Model
---------
-----