Jawaban Cepat: Pohon Document Object Model (DOM) menyimpan hingga 92% token mubazir dari SVG sebaris, kelas CSS, skrip pelacak, dan menu navigasi. Menggunakan html parser berkecepatan tinggi seperti lxml, Cheerio, atau Tree-sitter untuk memangkas node non-semantik menghasilkan token reduction html 85–92%, memangkas biaya inferensi LLM dan melipatgandakan akurasi RAG.
1. Pengantar: Apa itu Document Object Model (DOM) dan Mengapa HTML Mentah Merusak LLM
Agen penjelajah web otonom, pipeline RAG (Retrieval-Augmented Generation), dan scraper berbasis kecerdasan buatan menghadapi hambatan tersembunyi yang krusial: markup web mentah tanpa pembersihan. Ketika agen AI mengakses suatu URL melalui Playwright atau klien HTTP, mesin perender mengubah aliran data menjadi grafik memori berhierarki yang dikenal sebagai pohon document object.
Apa itu Document Object Model (DOM)?
Untuk mengoptimalkan pemrosesan data web bagi model bahasa besar, para rekayasawan harus memahami fondasi teknisnya: what is document object model dom?
Document Object Model (DOM) adalah antarmuka pemrograman standar dan netral-platform yang dibangun oleh mesin peramban (Blink di Chromium, Gecko di Firefox, WebKit di Safari). Ketika kode HTML diterima melalui jaringan, mesin melakukan tokenisasi leksikal, membangun hierarki node (Document $\rightarrow$ Element $\rightarrow$ Text), dan memadukan aturan CSSOM untuk menghitung tata letak visual. Di peramban manusia, struktur document object ini dirancang untuk manipulasi visual dan interaksi dinamis melalui JavaScript.
Tokenisasi Peramban dan Pembentukan Pohon Document Object Model (DOM):
┌─────────────────────────────────────────────────────────────────────────────┐
│ Aliran Biner HTML Mentah │
│ <!DOCTYPE html><html lang="id"><head>... │
└──────────────────────────────────────┬──────────────────────────────────────┘
│ Tokenizer (Algoritma HTML5 Parser)
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ Aliran Token Leksikal (Tokens) │
│ [StartTag: html] [StartTag: head] [StartTag: script] [EndTag: head] │
└──────────────────────────────────────┬──────────────────────────────────────┘
│ Pembangun Pohon (Tree Builder)
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ Pohon Document Object Model (DOM) │
│ Document │
│ │ │
│ <html> │
│ ┌─────────────────┴─────────────────┐ │
│ <head> <body> │
│ ┌───────┴───────┐ ┌───────┴───────┐ │
│ <title> <script> <header> <main> │
│ │ │ │ │ │
│ "Judul" [Tracking JS] <nav> <article> │
│ │ │ │
│ <ul>... <p> "Teks Bersih" │
└─────────────────────────────────────────────────────────────────────────────┘Mengapa DOM Mentah Menghancurkan Kinerja LLM:
- Pembengkakan Ruang Konteks: Halaman web modern rata-rata menghasilkan 45.000 hingga 120.000 token HTML. Sebanyak 85% hingga 92% di antaranya merupakan sampah: koordinat kurva SVG sebaris, kelas utilitas CSS, skrip analitik pelacak, dan jendela persetujuan cookie.
- Penipisan Atensi dan Degradasi RAG: Menimbun teks utama di bawah 40.000 token kode pembungkus memicu fenomena "Lost in the Middle", yang memangkas akurasi penemuan informasi (recall) RAG hingga 34%–48%.
- Biaya Finansial Melonjak: Memproses 100.000 halaman mentah per hari memerlukan biaya hingga $18.000 per bulan untuk panggilan API. Melakukan pemangkasan terstruktur pada document object menekan biaya tersebut hingga di bawah $2.200.
2. Pipeline Pemangkasan DOM 5 Tahap untuk Pengurangan Token 85-92%
- Tahap 1: Eliminasi Tag Daftar Hitam: Menghapus seketika elemen non-renderable seperti