เริ่มจาก Component ของ web browser 1) UI - UI ของเบราว์เซอร์ 2) Browser Engine - ทำงานระหว่าง UI + Rendering 3) Rendering Engine - Render จอตามประเภทของไฟล์ Chrome จะใช้ 1 instance : 1 tab. IE use Trident, FireFox use Gecko, Safari use WebKit, Chrome use Blink (modified WebKit) 4) Networking ตามชื่อ 5) JS Interpreter ตามชื่อ 6) UI Backend - Render แค่พวก Standard Web Control เช่น - Text Box, Dropdown list, Radio, Scroll Bar หัวใจสำคัญของการทำงานคือ Rendering Flow เริ่มจาก HTML Tag > Parsing DOM > สร้าง DOM Tree > คลอดเป็น Attachment ขณะเดียวกัน ฝั่ง CSS > Parsing ออกมาเป็น Style Rules > เอา Attachment จาก DOM Tree มารวมร่างกัน > ออกมาเป็น Render Tree เจ้านี่แหละสำคัญสุด Render Tree จะคำนวนจุด coordinate บนจอในการวาด แล้วค่อยวาดลงบนจอ กระบวนการนี้ Webkit เรียกว่า Layout ส่วน Gecko เรียกว่า Reflow ขั้นตอน Html & Css Parsing ไม่มีอะไรหวือหวา HTML / CSS จะทำการ parse พร้อมกันแล้วค่อยไปสร้าง DOM Tree / Style Rules parser จะมีความเท่ห์ตรง error tolerance ความยากและที่เกี่ยวข้องกับ front end จะเริ่มที่ Render tree ... หมดเวลา ต่อตอนสอง