ผมลองสร้างเบราว์เซอร์ขนาดเล็กตลอด 8 สัปดาห์ครับ
(github.com/beginner-jhj)สวัสดีครับ! ผมเป็นนักเรียนมัธยมปลายปี 3 ที่กำลังจะเข้าศึกษาต่อในคณะวิศวกรรมคอมพิวเตอร์ครับ
ตลอด 8 สัปดาห์ที่ผ่านมา ผมได้ลองสร้างเอนจินเบราว์เซอร์ขนาดเล็กตั้งแต่พื้นฐานด้วย C++ และ QT ครับ
เนื่องจากนี่เป็นครั้งแรกที่ผมได้สัมผัสกับ C++ จึงมีการลองผิดลองถูกอยู่มากมาย แต่ผมก็ได้เรียนรู้อะไรหลายอย่างจากการลงมือถ่ายทอดแกนหลักของ rendering pipeline ออกมาเป็นโค้ดด้วยตัวเอง
ผมแบ่งการพัฒนา rendering pipeline ทั้งหมดออกเป็น 5 ขั้นตอนดังนี้:
-
วิเคราะห์สตริง HTML เพื่อสร้าง DOM tree (รวมการแก้ไขข้อผิดพลาด)
-
parse กฎของ CSS และคำนวณ Computed Style ผ่าน Cascade
-
คำนวณตำแหน่งและขนาดของกล่องตามโมเดล block/inline
-
จัดการ image caching และหลังจากโหลดเสร็จแล้วจึงคำนวณ layout ใหม่ (Reflow)
-
ทำ Painting ขั้นสุดท้ายด้วย Qt Graphics View Framework
เนื่องจากเป็นโค้ดที่เขียนด้วย C++ ซึ่งเพิ่งเริ่มเรียนเป็นครั้งแรก จึงอาจยังมีจุดที่ไม่สมบูรณ์อยู่มากครับ
หากช่วยให้คำแนะนำเกี่ยวกับโครงสร้างโค้ดหรือทิศทางในการปรับปรุง ผมจะขอบคุณมากและยินดีเรียนรู้ครับ!
ดูรายละเอียดเพิ่มเติมได้ที่ https://github.com/beginner-jhj/mini_browser/blob/main/README.ko.md
14 ความคิดเห็น
ก่อนอื่นขอเป็นกำลังใจให้นะครับ
แค่คิดจะสร้างเว็บเบราว์เซอร์ก็สุดยอดแล้ว..
ตอนนี้คุณได้ประสบการณ์ที่ดีแล้ว..
ลองดาวน์โหลดโค้ด Chromium มาดู..
ลอง build
และลองวิเคราะห์มันดูบ้าง
ก็น่าจะเป็นประสบการณ์ที่ดีเหมือนกันครับ
เพราะการสร้างสรรค์คือมารดาแห่งการเลียนแบบนั่นเอง
เป็นงานที่น่าสนุกดีนะครับ ถ้าลงมือทำเองโดยไม่ใช้ Claude ก็น่าจะได้เรียนรู้อะไรมากกว่านี้ แต่ไหน ๆ การใช้ AI ก็เป็นกระแสหลักอยู่แล้ว เลยมองว่านี่ก็น่าจะเป็นประสบการณ์ที่ดีเหมือนกัน
ขอเสนอไอเดียหนึ่งนะครับ จากประสบการณ์นี้ลองทำ
og tagparser ดูไหมครับog tagคือข้อมูลง่าย ๆ อย่างรูปภาพ thumbnail หลักที่ตั้งค่าไว้ในเว็บเพจ การดึงข้อมูลพวกนี้ถ้าใช้ DOM parser ก็เป็นงานที่ทำได้ไม่ยาก แต่ปัญหาคือ DOM parser ค่อนข้างหนักดังนั้นถ้าทำ parser ขนาดเล็กและมีประสิทธิภาพที่ไม่ต้องพึ่ง DOM parser ตัวอื่น ไม่ต้อง parse DOM ทั้งหมด แต่ดึงมาเฉพาะข้อมูลของ tag ที่ต้องการได้ ก็อาจกลายเป็นไลบรารีที่มีประโยชน์มากครับ
โดยเฉพาะบนแอปมือถือ รู้สึกว่าขาดไลบรารีแบบนี้อยู่พอสมควรเลยครับ ถ้าทำสำหรับมือถือด้วยภาษา javascript/kotlin/swift ก็อาจกลายเป็นไลบรารีโอเพนซอร์สยอดนิยมได้เลย
ผมจำได้แค่ว่าหลังสอบซูนึงเสร็จก็เอาแต่เที่ยวเล่นยาวจนกว่าจะเข้ามหาวิทยาลัย... แต่พออ่าน README แล้วรู้สึกว่าคุณเข้าใจประเด็นสำคัญได้ดีมากครับ ผมเองก็เคยอ่านหนังสือเล่มนี้แล้วลองทำด้วย
swiftเหมือนกันครับ ฮ่าๆอ๊ะ ไม่ทราบว่าเป็นหนังสือเล่มไหนเหรอครับ? ผมลองอ่าน README ดูแล้ว แต่เหมือนจะไม่เห็นมีการพูดถึงหนังสือเลย...!
ดูเหมือนว่าใน README จะไม่มีเนื้อหาแบบนั้นนะครับ เนื้อหาคล้ายกับในหนังสือมากจนผมเข้าใจผิดเอง... ขอโทษครับ;;;
เป็นหนังสือชื่อ 'เริ่มต้นสร้างเว็บเบราว์เซอร์จากพื้นฐาน' ครับ ตัวอย่างในหนังสือเขียนด้วย Python
ขอบคุณที่บอกมาก ๆ เลยครับ :D สงสัยต้องแอบไปลองเปิดดูที่ Kyobo Book Centre สักครั้งแล้ว..!
ตอนอยู่ ม.6 แค่พอติดตั้ง Linux APM ได้บ้างก็เคยไปทำอวดเก่งในคอมมูนิตี้สายพัฒนาซอฟต์แวร์
ว้าว ดุเดือดมาก
อ่านเพลินมากเลยครับ!
ผมคิดว่าแค่ความพยายามและการได้ลองลงมือทำก็ถือว่ายอดเยี่ยมแล้ว README ก็เหมือนรายงานฉบับหนึ่งเลย เลยยิ่งอ่านสนุกเข้าไปอีก
ครั้งหน้าจะเป็นอะไรต่อก็รอติดตามนะครับ 55
เก่งมากจริง ๆ นะครับ
ผมลองไล่อ่านคร่าว ๆ แล้ว แต่ตอนที่ผมอยู่ ม.6 นั้นไม่กล้าแม้แต่จะคิดเลย ขอให้ตั้งใจเรียน CS ให้ดี และเติบโตเป็นวิศวกรที่ยอดเยี่ยมครับ
ขอบคุณมากครับ! ผมจะพยายามอย่างเต็มที่เพื่อเติบโตเป็นวิศวกรที่ยอดเยี่ยมให้ได้!
อ่านได้สนุกมากจริง ๆ ครับ! มีเรื่องที่อยากขอถามเป็นการส่วนตัวอยู่หนึ่งอย่าง ไม่ทราบว่าพอจะมีช่องทางให้ติดต่อได้ไหมครับ?
ขอบคุณมากจริงๆ ที่สละเวลาอ่านบทความยาวนี้! ติดต่อมาได้ที่ hj5014221@gmail.com
ลิงก์เสียอยู่ครับ ฮือๆ
อ๊ะ ขอแปะลิงก์ repo หลักให้เลยนะ! https://github.com/beginner-jhj/mini_browser