Tôi đã thử tự làm một trình duyệt nhỏ trong 8 tuần.
(github.com/beginner-jhj)Xin chào! Mình là học sinh lớp 12, sắp nhập học ngành Khoa học Máy tính.
Trong 8 tuần, mình đã thử tự xây dựng từ đầu một engine trình duyệt nhỏ bằng C++ và QT.
Vì đây là lần đầu mình tiếp xúc với C++, nên đã có vô số lần thử và sai, nhưng mình đã học được rất nhiều khi trực tiếp chuyển các phần cốt lõi của pipeline render thành mã nguồn.
Mình đã chia toàn bộ pipeline render thành 5 giai đoạn để triển khai:
-
Phân tích chuỗi HTML để tạo cây DOM (bao gồm cả sửa lỗi)
-
Phân tích các quy tắc CSS và tính Computed Style thông qua Cascade
-
Tính toán vị trí và kích thước box dựa trên mô hình block/inline
-
Xử lý cache và tải ảnh, sau đó tính toán lại layout (Reflow)
-
Painting cuối cùng bằng Qt Graphics View Framework
Vì mã được viết bằng C++ mà mình mới học lần đầu, nên có thể vẫn còn nhiều thiếu sót.
Nếu mọi người có thể góp ý về cấu trúc mã hoặc hướng cải thiện, mình sẽ rất cảm kích và học hỏi!
Bạn có thể xem chi tiết hơn tại https://github.com/beginner-jhj/mini_browser/blob/main/README.ko.md
14 bình luận
Trước hết xin gửi lời cổ vũ.
Dám nghĩ đến chuyện tự làm một trình duyệt web nữa chứ..
Giờ bạn đã có một trải nghiệm tốt rồi..
Có lẽ cũng nên thử tải mã nguồn Chromium về..
biên dịch nó
và thử phân tích nó nữa.
Bởi vì sáng tạo là mẹ của sự mô phỏng.
Bạn đã làm một việc thú vị đấy. Có lẽ nếu tự làm mà không dùng Claude thì đã học được nhiều hơn, nhưng vì việc tận dụng AI đang là xu hướng nên đây cũng có vẻ là một trải nghiệm tốt.
Nếu được góp một ý tưởng, thì dựa trên trải nghiệm này, bạn có thể thử tạo một
og tag parser.og taglà thông tin đơn giản như ảnh thumbnail đại diện được thiết lập trên trang web; việc lấy nó ra thì khá đơn giản nếu dùng DOM parser, nhưng vấn đề là DOM parser khá nặng.Vì vậy, nếu không dùng DOM parser khác, không parse toàn bộ DOM, mà triển khai một parser nhỏ gọn và hiệu quả chỉ để lấy thông tin của các tag cụ thể, thì nó có thể trở thành một thư viện hữu ích.
Đặc biệt là trên ứng dụng di động, tôi thấy khá thiếu những thư viện như vậy. Nếu làm cho mobile bằng các ngôn ngữ javascript/kotlin/swift, nó có thể trở thành một thư viện mã nguồn mở rất được ưa chuộng.
Tôi chỉ nhớ sau khi thi đại học xong thì đã chơi thả ga cho đến lúc vào đại học thôi... Đọc README thấy có vẻ bạn đã hiểu rất rõ những nội dung cốt lõi. Tôi cũng từng đọc cuốn sách này và thử triển khai bằng Swift rồi. haha
Ồ, không biết là sách gì nhỉ? Mình đã thử đọc README một lần rồi mà hình như không thấy nhắc đến cuốn sách nào cả...!
README không có nội dung đó nhỉ. Vì nội dung khá giống với cuốn sách nên tôi đã nhầm... xin lỗi;;;
Đó là cuốn sách có tên Bắt đầu từ con số 0 để xây dựng web browser. Ví dụ trong sách được triển khai bằng Python.
Cảm ơn bạn đã cho mình biết, thật sự luôn :D Có lẽ mình sẽ ghé xem thử ở Kyobo Book Centre..!
Hồi lớp 12, chỉ vì biết cài
apmtrên Linux chút chút mà mình từng lên mặt trong cộng đồng devWow ghê thật
Mình đã đọc rất thích!
Mình nghĩ ngay từ việc đã cố gắng và thử tự làm ra nó thôi cũng đã là hạng nhất rồi. README giống như một bản báo cáo hoàn chỉnh nên lại càng thú vị hơn.
Lần tới sẽ là gì nữa đây, mình rất mong chờ haha
Thật sự rất xuất sắc.
Tôi chỉ mới lướt qua thôi, nhưng hồi tôi học lớp 12 thì còn chẳng dám nghĩ tới chuyện này; mong bạn học CS thật tốt và trở thành một kỹ sư tuyệt vời.
Cảm ơn bạn! Mình sẽ nỗ lực hết sức để trưởng thành thành một kỹ sư xuất sắc!
Tôi đã đọc bài này rất thích và thấy cực kỳ thú vị! Cá nhân tôi có một điều muốn hỏi, không biết có cách nào để tôi liên hệ với bạn không?
Cảm ơn bạn rất nhiều vì đã đọc bài viết dài này! Bạn có thể liên hệ qua hj5014221@gmail.com.
Có vẻ liên kết bị hỏng rồi T_T
Ôi, mình gửi bạn link repo chính nhé! https://github.com/beginner-jhj/mini_browser