คำตอบด่วน: ทรี Document Object Model (DOM) มีโทเค็นส่วนเกินมากถึง 92% จาก SVG แบบอินไลน์, คลาส CSS, สคริปต์ติดตาม และเมนูนำทาง การใช้ html parser ประสิทธิภาพสูง เช่น lxml, Cheerio หรือ Tree-sitter ตัดโหนดที่ไม่จำเป็น จะช่วยลด token reduction html ได้ 85–92% ประหยัดค่าใช้จ่ายการประมวลผล LLM และเพิ่มความแม่นยำของ RAG
1. บทนำ: Document Object Model (DOM) คืออะไร และทำไม HTML ดิบถึงลดทอนประสิทธิภาพ LLM
เอเจนต์ท่องเว็บอัตโนมัติ ระบบ RAG (Retrieval-Augmented Generation) และเครื่องมือดึงข้อมูลอัจฉริยะมักเผชิญกับอุปสรรคสำคัญ นั่นคือ มาร์กอัปเว็บที่ไม่ได้ผ่านการทำความสะอาด เมื่อ AI เอเจนต์เข้าชมหน้าเว็บผ่าน Playwright หรือคำขอ HTTP เอนจินเบราว์เซอร์จะแปลงข้อมูลไบต์เป็นโครงสร้างต้นไม้ในหน่วยความจำที่เรียกว่าโครงสร้าง document object ทรี
Document Object Model (DOM) คืออะไร?
เพื่อเพิ่มประสิทธิภาพการประมวลผลข้อมูลสำหรับโมเดลภาษา วิศวกรจำเป็นต้องทำความเข้าใจโครงสร้างหลัก: what is document object model dom?
Document Object Model (DOM) คืออินเทอร์เฟซมาตรฐานที่เป็นกลางทางภาษาซึ่งสร้างขึ้นโดยเบราว์เซอร์เอนจิน (Blink ใน Chromium, Gecko ใน Firefox, WebKit ใน Safari) เมื่อโค้ด HTML มาถึง เครื่องมือจะแยกวิเคราะห์คำศัพท์ สร้างโครงสร้างโหนด (Document $\rightarrow$ Element $\rightarrow$ Text) และคำนวณเค้าโครงภาพร่วมกับ CSSOM ในเบราว์เซอร์ทั่วไป โครงสร้าง document object ถูกออกแบบมาเพื่อการแสดงผลทางสายตาและการควบคุมแบบไดนามิกผ่าน JavaScript
การประมวลผลคำศัพท์ในเบราว์เซอร์และการสร้างทรี Document Object Model (DOM):
┌─────────────────────────────────────────────────────────────────────────────┐
│ สตรีมไบต์ HTML ดิบจากเครือข่าย │
│ <!DOCTYPE html><html lang="th"><head>... │
└──────────────────────────────────────┬──────────────────────────────────────┘
│ ตัวแยกโทเค็น (HTML5 Parser Algorithm)
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ สตรีมโทเค็นคำศัพท์ (Tokens) │
│ [StartTag: html] [StartTag: head] [StartTag: script] [EndTag: head] │
└──────────────────────────────────────┬──────────────────────────────────────┘
│ ตัวสร้างทรี (Tree Builder)
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ โครงสร้างทรี Document Object Model (DOM) │
│ Document │
│ │ │
│ <html> │
│ ┌─────────────────┴─────────────────┐ │
│ <head> <body> │
│ ┌───────┴───────┐ ┌───────┴───────┐ │
│ <title> <script> <header> <main> │
│ │ │ │ │ │
│ "ชื่อหน้า" [สคริปต์สถิติ] <nav> <article> │
│ │ │ │
│ <ul>... <p> "เนื้อหาหลัก" │
└─────────────────────────────────────────────────────────────────────────────┘ปัญหาที่เกิดจาก DOM ดิบเมื่อป้อนเข้าสู่ LLM:
- การบวมของบริบทข้อความ: หน้าเว็บทั่วไปมีโทเค็น HTML ดิบระหว่าง 45,000 ถึง 120,000 โทเค็น ซึ่ง 85% ถึง 92% เป็นข้อมูลขยะ เช่น พิกัดเส้นโค้ง SVG, คลาส CSS, สคริปต์วิเคราะห์ และป๊อปอัปคุกกี้
- การเจือจางความสนใจและความแม่นยำของ RAG ลดลง: เมื่อเนื้อหาสำคัญจมอยู่ใต้โทเค็นขยะ 40,000 ตัว จะเกิดปรากฏการณ์ "Lost in the Middle" ทำให้ความแม่นยำในการดึงข้อมูลของ RAG ลดลง 34% ถึง 48%
- ต้นทุนการประมวลผลสูงเกินจริง: การประมวลผล 100,000 หน้าดิบต่อวันมีค่าใช้จ่ายมากกว่า $18,000 ต่อเดือน แต่การตัดแต่ง DOM จะช่วยลดค่าใช้จ่ายลงเหลือไม่ถึง $2,200
2. ไปป์ไลน์การตัดแต่ง DOM 5 ขั้นตอนเพื่อลดโทเค็น 85-92%
- ขั้นตอนที่ 1: ลบแท็กต้องห้ามทั้งหมด: ลบ