- Hướng dẫn học tập tương tác được tạo ra để giúp kỹ sư web và người dùng phổ thông hiểu trực quan về nguyên lý hoạt động bên trong của trình duyệt
- Trực quan hóa từng bước toàn bộ quá trình, từ nhập thanh địa chỉ đến tạo yêu cầu HTTP, phân giải DNS, kết nối TCP, phân tích HTML, xây dựng DOM, pipeline kết xuất
- Mỗi bước được tạo thành từ ví dụ có thể tự nhập hoặc thao tác trực tiếp, cho phép trải nghiệm mang tính thử nghiệm về giao tiếp mạng và quá trình kết xuất
- Cho thấy rõ vai trò của DOM và sự khác biệt giữa các bước Layout–Paint–Composite, đồng thời có thể quan sát trực quan các yếu tố ảnh hưởng đến hiệu năng
- Là tài liệu giúp nắm vững có hệ thống các khái niệm cốt lõi dành cho nhà phát triển muốn học cấu trúc trình duyệt hoặc hiểu tối ưu hiệu năng web
Tổng quan
- Hướng dẫn này được tạo ra dành cho những người dùng web hằng ngày nhưng chưa hiểu rõ cách trình duyệt hoạt động
- Bù đắp hạn chế của các tài liệu hiện có vốn quá thiên về kỹ thuật hoặc quá hời hợt
- Được thiết kế để có thể học trực quan các chi tiết kỹ thuật thông qua những ví dụ tương tác nhỏ
- Bỏ qua các chi tiết như phiên bản HTTP, SSL/TLS, cách DNS hoạt động cụ thể, và được tổ chức ngắn gọn xoay quanh các khái niệm cốt lõi
- Dự án được công bố dưới dạng mã nguồn mở, và có thể đề xuất cải thiện qua GitHub
Trình duyệt và URL
- Mọi chuỗi ký tự mà người dùng nhập vào thanh địa chỉ đều được chuyển đổi nội bộ thành dạng URL
- Sau khi nhập xong và nhấn Enter, có giao diện thực hành cho phép tự kiểm tra trực tiếp quá trình chuyển đổi
Chuyển URL thành yêu cầu HTTP
Phân giải địa chỉ máy chủ (DNS)
- Trình duyệt không thể trực tiếp sử dụng tên miền như
example.com
- Cần phải chuyển đổi sang địa chỉ IP thông qua hệ thống DNS thì mới có thể giao tiếp với máy chủ
- Khi nhập tên miền vào ô nhập, có thể xem kết quả phân giải DNS (địa chỉ IP)
Thiết lập kết nối TCP
- Sau khi lấy được IP từ DNS, trình duyệt dùng giao thức TCP để thiết lập kết nối đáng tin cậy với máy chủ
- Kết nối được thiết lập qua quá trình bắt tay 3 bước
- SYN: client gửi yêu cầu kết nối
- SYN-ACK: server phản hồi và xác nhận
- ACK: client xác nhận lần cuối
- TCP duy trì giao tiếp ổn định nhờ bảo đảm thứ tự dữ liệu và cơ chế truyền lại
- Có thể thử nghiệm độ ổn định truyền tải bằng cách ngắt mạng hoặc thao tác gói tin
Yêu cầu và phản hồi HTTP
- Sau khi có kết nối TCP, trình duyệt gửi yêu cầu HTTP, còn máy chủ trả về phản hồi HTTP
- Quá trình di chuyển của yêu cầu và phản hồi được hiển thị trực quan, cho phép quan sát luồng gói tin
- Khi phản hồi đến nơi, trình duyệt tách header và phần thân rồi bắt đầu kết xuất HTML
Phân tích HTML và tạo cây DOM
- Trình duyệt chuyển các byte HTML vào parser để tạo cây DOM
- Khi nhập HTML mẫu, có thể quan sát trực quan quá trình các thẻ như
<h1>, <p> được chuyển thành các node DOM
- Việc phân tích được thực hiện theo kiểu streaming, nên vẫn có thể tạo node ngay cả trước khi toàn bộ tài liệu được tải xong
- Khi gặp thẻ
<script>, quá trình phân tích sẽ tạm dừng để thực thi script
- DOM hoàn chỉnh sẽ kết hợp với CSS để tạo thành render tree
Tầm quan trọng của DOM
- DOM(Document Object Model) là mô hình tài liệu trong bộ nhớ của trình duyệt,
là cấu trúc cốt lõi được HTML parser, CSS selector engine và JavaScript runtime cùng chia sẻ
- Thay đổi DOM sẽ được phản ánh ngay vào layout, style và tương tác người dùng
- Có tính năng xem trước cho phép phản ánh thay đổi của DOM theo thời gian thực khi chỉnh sửa mã JavaScript
Layout, Paint, Composite
- Khi DOM và CSS đã sẵn sàng, trình duyệt sẽ chạy pipeline kết xuất
- Layout(Reflow): tính toán kích thước và vị trí của phần tử
- Paint: tô pixel
- Composite: ghép các layer trên GPU
- Việc thay đổi màu sắc chỉ khiến Paint chạy lại, nhưng thay đổi kích thước sẽ chạy lại cả Layout và Paint
- Có thể bấm để kiểm tra xem mỗi bước có được chạy lại hay không
- Trực quan cho thấy trang có nhiều phép tính Layout sẽ kết xuất chậm hơn
Tóm tắt
- Đây là hướng dẫn cho phép tự trải nghiệm và học toàn bộ quá trình từ nhập địa chỉ đến kết xuất
- Sau khi hoàn thành tất cả các bước, có thể hình thành mô hình tư duy rõ ràng về nguyên lý hoạt động của trình duyệt
- Dự án là mã nguồn mở, có thể đề xuất cải thiện qua issue hoặc Pull Request trên GitHub
1 bình luận
Ý kiến trên Hacker News
Không phải trình duyệt nào cũng có DOM ngay từ đầu
Ban đầu có WorldWideWeb(Nexus, 1990), Erwise(1992), ViolaWWW(1992), Lynx(1992), NCSA Mosaic(1993), Netscape 1.0(1994), IE 1.0(1995)
Lynx đến nay vẫn cố ý duy trì là một trình duyệt không có DOM
AOL 1.0–2.0 dùng một engine tĩnh (AOLPress) không có các đối tượng có thể lập trình
Việc có thể tương tác với DOM bắt đầu từ Netscape 2.0(1995), IE 3.0(1996), AOL 3.0(1996), Opera 3.0(1997)
Sau đó Netscape 4.0(document.layers) và IE 4.0(document.all) mỗi bên dùng một mô hình khác nhau
DOM tiêu chuẩn đầu tiên là W3C DOM Level 1(1998), được IE 5.0(1999) hỗ trợ một phần, còn Konqueror 2.0(2000) và Netscape 6.0(2000) bắt đầu hỗ trợ đầy đủ
Safari 1.0(2003), Firefox 1.0(2004), Chrome 1.0(2008) đều hỗ trợ DOM tiêu chuẩn ngay từ đầu, và hiện nay tuân theo WHATWG DOM Living Standard
Vì diễn giải và render trực tiếp văn bản HTML nên mức dùng RAM rất thấp
Dự án rất tuyệt
Nếu là độc giả HN thì nên xem cùng High-Performance Browser Networking và Every Layout
Cả hai đều là tài liệu rất hay, đi sâu vào hiệu năng web và cấu trúc CSS
Ở chương 4, tôi đã hiểu được cấu trúc frame của TLS, nhờ đó có thể debug vấn đề độ trễ ở chỗ làm trước đây
Phần nói về các đánh đổi khi điều chỉnh kích thước frame TLS cũng rất thú vị
Có thể không có nhiều dịp dùng đến trong thực tế, nhưng tôi biết được rằng có thể tinh chỉnh ở mức mạng như vậy
Đây là một cách tiếp cận thú vị, kiểu như trải nghiệm browser.engineering mà không cần cài đặt
Khi minh họa ví dụ về trình duyệt và máy chủ, có lẽ thêm biểu tượng trực quan (ví dụ: desktop/server) sẽ giúp dễ hiểu hơn
Hiện tại trước hết đang thu thập phản hồi, và đề xuất về icon là một ý tưởng hay nên sẽ xem xét
Tôi rất thích nên đã đánh dấu trang
Tuy vậy hơi tiếc là phần quy trình tải tài nguyên như hình ảnh, stylesheet, script dựa trên HTML/DOM lại bị thiếu
Phần này quan trọng để hiểu vì sao style của trang bị vỡ hoặc hình ảnh bị thiếu
Đang nghĩ cách thêm các khối này mà không làm nó trở nên quá phức tạp
Khi cửa sổ trình duyệt hẹp lại (dưới 1170px), có vấn đề phần mục lục bị chồng lên phần nội dung
Sẽ tốt hơn nếu tinh chỉnh thêm logic phân tích URL
Phần lớn người dùng có lẽ sẽ không gặp vấn đề, nhưng trình duyệt cũng có xử lý đặc biệt khi nhập protocol scheme ngoài
https://hayhttp://Có vẻ nên bắt các trường hợp như vậy
Tham khảo: List of URI schemes
Dự án rất xuất sắc
Tôi tò mò không biết ở bước tiếp theo có kế hoạch bổ sung chi tiết về quá trình reflow hay không
Hơi tiếc là hơn một nửa trang lại dành cho các yêu cầu mạng
Trên thực tế, phần phức tạp của trình duyệt nằm ở pipeline phân tích và render
Vì không biết nên đào sâu ở mục nào nên trước mắt cứ công bố rồi nhận phản hồi đã
Có thể là một câu hỏi hơi kỳ, nhưng tôi tự hỏi nếu bỏ hẳn truy vấn DNS và chỉ vận hành bằng tên miền mà con người có thể đọc được thì sẽ thế nào
Tức là biến toàn bộ internet thành một switch khổng lồ
Tôi nhớ đã từng thấy nhà sáng lập Tailscale viết về một ý tưởng tương tự
Làm rất tốt