Phần “bên trong lõi trình duyệt” (đào sâu)
Đây là phần dành cho các lập trình viên đã biết trình duyệt là gì và muốn tìm hiểu kỹ bên trong cách nó hoạt động, kiến trúc của nó ra sao, và cách các engine (Chromium, WebKit, Gecko) khác nhau như thế nào. Chúng ta cũng sẽ đề cập đến mã nguồn, khái niệm và các thành phần bên trong.
Định nghĩa và Mục đích
Trình duyệt web là một ứng dụng phần mềm phía người dùng (client-side) có nhiệm vụ truy xuất, diễn giải và hiển thị nội dung web được cung cấp qua Internet. Nó chủ yếu sử dụng các giao thức HTTP/HTTPS để giao tiếp với máy chủ web và hiển thị nội dung HTML, CSS, JavaScript, hình ảnh và các tài nguyên khác lên màn hình.
Ở cấp độ cốt lõi, trình duyệt thực hiện các công việc sau:
- Gửi các yêu cầu mạng (GET, POST, v.v.)
- Phân tích cú pháp mã nguồn (HTML, XML, CSS, JavaScript)
- Xây dựng cây DOM và cây render
- Vẽ giao diện người dùng
- Xử lý đầu vào của người dùng và tính tương tác
Kiến trúc cốt lõi của trình duyệt
Hầu hết các trình duyệt hiện đại đều được cấu trúc bằng kiến trúc đa tiến trình hoặc đa luồng để tối ưu hóa hiệu suất và bảo mật. Giao diện người dùng (UI) bao gồm các thành phần như thanh địa chỉ, nút điều hướng, dấu trang và quản lý tab. Browser Engine đóng vai trò trung gian giữa UI và Rendering Engine, hướng dẫn Rendering Engine cách hoạt động và cập nhật.
Rendering Engine chịu trách nhiệm phân tích cú pháp HTML và CSS để xây dựng DOM và CSSOM, sau đó được hợp nhất thành một cây render. Cây này trải qua các tính toán bố cục và được vẽ lên màn hình, tiếp theo là quá trình tổng hợp. Mô-đun Networking xử lý các yêu cầu HTTP/HTTPS, bộ nhớ đệm, thiết lập proxy và quản lý cookie. JavaScript Engine (như V8 hoặc SpiderMonkey) phân tích cú pháp, biên dịch và thực thi JavaScript, quản lý các tác vụ bất đồng bộ bằng vòng lặp sự kiện và hàng đợi gọi lại.
Lưu trữ dữ liệu được quản lý thông qua các công nghệ như Web Storage (localStorage và sessionStorage), IndexedDB, API Cache và cookie truyền thống. Cuối cùng, trình duyệt chứa các Thành phần Bảo mật thiết yếu như cơ chế sandbox, thực thi Chính sách Cùng nguồn gốc, CORS (Chia sẻ Tài nguyên Liên nguồn) và Chính sách Bảo mật Nội dung (CSP).
Giao diện người dùng (UI)
- Thanh địa chỉ
- Nút quay lại / tiến / tải lại
- Thanh bookmark
- Quản lý tab
Bộ máy trình duyệt (Browser Engine)
- Là cầu nối giữa giao diện và bộ máy hiển thị
Nguồn: bởi Kishan Vikani trên Stack Overflow
- Điều khiển hành vi của bộ máy hiển thị (ví dụ: điều hướng, cập nhật)
Nguồn: bởi Kishan Vikani trên Stack Overflow
Bộ máy hiển thị (Rendering Engine)
DOM (Mô hình Đối tượng Tài liệu) biểu diễn cấu trúc HTML dưới dạng cây các phần tử, trong khi CSSOM (Mô hình Đối tượng CSS) nắm bắt các kiểu và quy tắc trong một cây tương tự. Kết hợp lại, các mô hình này tạo ra một cây hiển thị dùng để biểu diễn trực quan.
Trong quy trình Bố cục và Vẽ, vị trí và kích thước của từng nút được tính toán, được gọi là bố cục hoặc chỉnh sửa lại. Sau đó, trình duyệt sẽ vẽ các thành phần trực quan lên các lớp và cuối cùng thực hiện ghép nối để hợp nhất các lớp này để hiển thị.
Các engine phổ biến
Chromium / Blink (Chrome, Edge, Opera, Vivaldi, Brave,...)
Chromium là một nền tảng mã nguồn mở do Google phát triển. Blink, một nhánh của WebKit, là công cụ kết xuất của nó. Chromium sử dụng công cụ JavaScript V8 và có kiến trúc mô-đun hóa cao, hỗ trợ hộp cát và thiết kế đa quy trình. Vòng đời kết xuất bao gồm việc phân tích cú pháp JavaScript trong V8 và thực thi các mã như:
Kiến trúc của nó bao gồm một quy trình UI để quản lý tab và cửa sổ, một quy trình kết xuất cho mỗi tab và một quy trình GPU để xử lý việc tổng hợp.
Source: from Wikipedia
WebKit (Safari)
WebKit, do Apple phát triển và ban đầu được phân nhánh từ KHTML của KDE, sử dụng JavaScriptCore để thực thi JavaScript. Trên iOS, nó thường bị giới hạn ở một quy trình duy nhất vì lý do bảo mật App Store. WebKit được tối ưu hóa cho phần cứng của Apple, tiêu tốn ít bộ nhớ hơn trên thiết bị di động, nhưng khả năng mở rộng kém hơn so với Chromium.
Nguồn: Tom's Guide
Gecko (Firefox)
Gecko, do Mozilla phát triển, tích hợp chặt chẽ với SpiderMonkey, engine JavaScript của Firefox. Nó ưu tiên các tiêu chuẩn web và khả năng tùy chỉnh. Kiến trúc Quantum của nó bao gồm tính năng vẽ đa luồng và các thành phần được hỗ trợ bởi Rust, bao gồm engine CSS Stylo. Firefox cũng được biết đến với các mô hình bảo mật và sandbox mạnh mẽ.
Nguồn: Lifehacker
Công cụ JavaScript (Chi tiết thực thi)
Tất cả các công cụ JavaScript chính đều tuân theo một quy trình tương tự: chúng phân tích mã thành Cây cú pháp trừu tượng (AST), biên dịch thành mã bytecode và tối ưu hóa thêm thành mã máy gốc. Chúng cũng thực hiện thu gom rác tự động và quản lý bộ nhớ hiệu quả.
Bảo mật trong trình duyệt
Trình duyệt triển khai hộp cát để cô lập các tab và giảm nguy cơ phát tán nội dung độc hại. Chính sách Cùng nguồn gốc (SOP) ngăn chặn một trang web truy cập dữ liệu của trang web khác trừ khi được cho phép rõ ràng. Chính sách Bảo mật Nội dung (CSP) giúp hạn chế việc tải tài nguyên và thực thi tập lệnh. Trình duyệt cũng xác thực chứng chỉ SSL/TLS để đảm bảo độ tin cậy của HTTPS và bao gồm các biện pháp bảo vệ chống lừa đảo thông qua các dịch vụ như Google Safe Browsing.
Công cụ nhà phát triển & APIs
Các trình duyệt hiện đại cung cấp bộ công cụ lập trình mạnh mẽ và các API. DevTools cho phép lập trình viên kiểm tra phần tử, theo dõi hoạt động mạng, gỡ lỗi mã và truy vết mã nguồn. Các Web API như DOM API, Fetch API, WebSocket, Geolocation và WebRTC cung cấp các chức năng phong phú ở phía client. Ngoài ra, trình duyệt hỗ trợ các Extension API như Manifest v3 trong Chrome để xây dựng tiện ích mở rộng.
Ví dụ về kết xuất: Từ đầu đến cuối
Khi người dùng nhập một URL như https://example.com vào thanh địa chỉ, trình duyệt sẽ thực hiện tra cứu DNS để chuyển tên miền thành địa chỉ IP. Sau đó, nó gửi yêu cầu HTTP GET để truy xuất trang. Khi nhận được mã HTML, trình duyệt sẽ tải về các tệp CSS, JavaScript và hình ảnh liên kết. HTML được phân tích thành cây DOM, CSS thành CSSOM, rồi kết hợp thành cây render, thực thi JavaScript, tính toán bố cục các phần tử, vẽ giao diện và xử lý ghép lớp bằng GPU. Khi người dùng cuộn trang, trình duyệt tiếp tục thực hiện các thao tác repaint và compositing bổ sung.
Mã nguồn trình duyệt ví dụ
