เผยแพร่เมื่อ: 31 มีนาคม 2014
ก่อนที่เบราว์เซอร์จะแสดงผลหน้าเว็บได้นั้น เบราว์เซอร์จำเป็นต้องสร้าง DOM และ ต้นไม้ CSSOM ด้วยเหตุนี้ เราจึงต้องแน่ใจว่าเราจะแสดงทั้งไฟล์ HTML และ CSS ไปยังเบราว์เซอร์โดยเร็วที่สุด
สรุป
- ไบต์ → อักขระ → โทเค็น → โหนด → โมเดลออบเจ็กต์
- มาร์กอัป HTML จะเปลี่ยนรูปแบบเป็น Document Object Model (DOM) ส่วนมาร์กอัป CSS จะเปลี่ยนรูปแบบเป็น CSS Object Model (CSSOM)
- DOM และ CSSOM เป็นโครงสร้างข้อมูลที่แยกกัน
- แผงประสิทธิภาพของ Chrome DevTools ช่วยให้เราบันทึกและตรวจสอบการก่อสร้างได้ และต้นทุนในการประมวลผลของ DOM และ CSSOM
Document Object Model (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
เริ่มต้นด้วยกรณีที่ง่ายที่สุดเท่าที่จะเป็นไปได้ คือ หน้า HTML ธรรมดาที่มีข้อความบางอย่าง และรูปภาพเดียว เบราว์เซอร์ดำเนินการกับหน้านี้อย่างไร
- Conversion: เบราว์เซอร์อ่านไบต์ดิบของ HTML นอกดิสก์ หรือ เครือข่ายและแปลเป็นอักขระแต่ละตัวตามที่ระบุ การเข้ารหัสไฟล์ (เช่น UTF-8)
- การแปลงข้อมูลเป็นโทเค็น: เบราว์เซอร์จะแปลงสตริงอักขระให้แตกต่างกัน
โทเค็น - ตามที่ระบุโดยมาตรฐาน W3C HTML5
เช่น
<html>
,<body>
และสตริงอื่นๆ ภายใน วงเล็บมุม โทเค็นแต่ละรายการมีความหมายพิเศษและกฎของตัวเอง - Lexing: โทเค็นที่สร้างขึ้นจะแปลงเป็น "ออบเจ็กต์" ซึ่งเป็นตัวกำหนด พร็อพเพอร์ตี้และกฎ
- การสร้าง DOM: สุดท้าย เนื่องจากมาร์กอัป HTML กำหนดความสัมพันธ์ ระหว่างแท็กต่างๆ (บางแท็กอยู่ภายในแท็กอื่น) ออบเจ็กต์ที่สร้างขึ้นจะลิงก์ในโครงสร้างข้อมูลแบบต้นไม้ที่รวม ความสัมพันธ์ระดับบน-ย่อยที่กำหนดไว้ในมาร์กอัปต้นฉบับ: HTML เป็นพาเรนต์ของออบเจ็กต์ body ขณะที่ body คือระดับบนสุดของ paragraph จนกว่าจะมีการสร้างการนำเสนอเอกสารทั้งหมด
ผลลัพธ์สุดท้ายของกระบวนการทั้งหมดนี้คือ Document Object Model (DOM) ของหน้าเว็บง่ายๆ ของเรา ซึ่งเบราว์เซอร์จะใช้ในการประมวลผล
ทุกครั้งที่เบราว์เซอร์ประมวลผลมาร์กอัป HTML ระบบจะทําตามขั้นตอนที่กําหนดไว้ก่อนหน้านี้ทั้งหมด ได้แก่ แปลงไบต์เป็นอักขระ ระบุโทเค็น แปลงโทเค็นเป็นโหนด และสร้างต้นไม้ DOM กระบวนการทั้งหมดนี้อาจใช้เวลาสักครู่ โดยเฉพาะในกรณีที่มี HTML จำนวนมากที่ต้องประมวลผล
หากคุณเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และบันทึกไทม์ไลน์ขณะโหลดหน้าเว็บ คุณจะเห็นเวลาจริงที่ใช้ในการทำขั้นตอนนี้ ในตัวอย่างก่อนหน้านี้ เราใช้เวลาประมาณ 5 มิลลิวินาทีในการแปลง HTML ชุดหนึ่งให้เป็นแผนผัง DOM สำหรับหน้าเว็บขนาดใหญ่ กระบวนการนี้อาจใช้เวลานานกว่ามาก เมื่อสร้าง ภาพเคลื่อนไหวที่ลื่นไหล อาจกลายเป็นจุดคอขวดหากเบราว์เซอร์ต้อง ประมวลผล HTML จำนวนมาก
ต้นไม้ DOM จะบันทึกพร็อพเพอร์ตี้และความสัมพันธ์ของมาร์กอัปเอกสาร แต่ไม่ได้บอกเราว่าองค์ประกอบจะมีลักษณะอย่างไรเมื่อแสดงผล นั่นคือ ของ CSSOM
โมเดลออบเจ็กต์ CSS (CSSOM)
ขณะที่เบราว์เซอร์สร้าง DOM ของหน้าพื้นฐานของเรา พบองค์ประกอบ <link>
ใน <head>
ของเอกสารที่อ้างอิงสไตล์ชีต CSS ภายนอก: style.css
เนื่องจากคาดว่าต้องใช้ทรัพยากรนี้ในการแสดงผลหน้าเว็บ จึงส่งคำขอทรัพยากรนี้ทันที ซึ่งกลับมาพร้อมเนื้อหาต่อไปนี้
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
เราอาจประกาศสไตล์ภายในมาร์กอัป HTML (อินไลน์) ได้โดยตรง แต่การทำให้ CSS แยกจาก HTML จะช่วยให้เราจัดการเนื้อหาและการออกแบบแยกกันได้ นักออกแบบจะทํางานกับ CSS ได้ ส่วนนักพัฒนาซอฟต์แวร์จะมุ่งเน้นที่ HTML และปัญหาอื่นๆ ได้
เช่นเดียวกับ HTML เราจำเป็นต้องแปลงกฎ CSS ที่ได้รับให้เป็นสิ่งที่เบราว์เซอร์เข้าใจและใช้งานได้ เราจึงต้องทำซ้ำกระบวนการ HTML แต่สำหรับ CSS แทนที่จะเป็น HTML
ระบบจะแปลงไบต์ CSS เป็นอักขระ จากนั้นเป็นโทเค็น แล้วเป็นโหนด และสุดท้ายจะลิงก์เป็นโครงสร้างต้นไม้ที่เรียกว่า "CSS Object Model" (CSSOM)
เหตุใด CSSOM จึงมีโครงสร้างเป็นต้นไม้ เมื่อคำนวณชุดสไตล์สุดท้ายสำหรับออบเจ็กต์ในหน้าเว็บ เบราว์เซอร์จะเริ่มด้วยกฎทั่วไปที่สุดที่ใช้กับโหนดนั้น (เช่น หากเป็นองค์ประกอบย่อยขององค์ประกอบ body ระบบจะใช้สไตล์ body ทั้งหมด) จากนั้นจะปรับแต่งสไตล์ที่คำนวณแล้วแบบซ้ำซ้อนโดยใช้กฎที่เฉพาะเจาะจงมากขึ้น กล่าวคือ กฎจะ "มีผลแบบเป็นลําดับชั้น"
ลองดูที่ต้นไม้ CSSOM ที่อธิบายไว้ก่อนหน้านี้เพื่อให้เข้าใจได้ชัดเจนยิ่งขึ้น ข้อความที่อยู่ในแท็ก <span>
ซึ่งวางไว้ภายในองค์ประกอบ body มีขนาดแบบอักษร 16 พิกเซล และมีข้อความสีแดง คำสั่ง font-size
จะส่งผลต่อ body
ไปจนถึง span
อย่างไรก็ตาม หาก span
เป็นรายการย่อยของแท็กย่อหน้า (p
) ระบบจะไม่แสดงเนื้อหาของ span
นอกจากนี้ โปรดทราบว่าต้นไม้ที่อธิบายก่อนหน้านี้ไม่ใช่ต้นไม้ CSSOM ที่สมบูรณ์ และแสดงเฉพาะสไตล์ที่เราตัดสินใจลบล้างในสไตล์ชีตเท่านั้น ทุกเบราว์เซอร์มีชุดสไตล์เริ่มต้นหรือที่เรียกว่า "สไตล์ User Agent" ซึ่งเป็นสไตล์ที่เราเห็นเมื่อไม่ได้ระบุสไตล์ของเราเอง และสไตล์ของเราจะลบล้างค่าเริ่มต้นเหล่านี้
หากต้องการดูระยะเวลาในการประมวลผล CSS คุณสามารถบันทึกไทม์ไลน์ใน DevTools และมองหาเหตุการณ์ "คํานวณสไตล์ใหม่" ซึ่งแตกต่างจากการแยกวิเคราะห์ DOM ตรงที่ไทม์ไลน์จะไม่แสดงรายการ "แยกวิเคราะห์ CSS" แยกต่างหาก แต่จะบันทึกการแยกวิเคราะห์และการสร้างต้นไม้ CSSOM รวมถึงการคํานวณแบบย้อนกลับของสไตล์ที่คอมไพล์แล้วภายใต้เหตุการณ์นี้
ไฟล์สไตล์เล็กน้อยของเราใช้เวลาประมวลผลประมาณ 0.6 มิลลิวินาทีและส่งผลต่อองค์ประกอบ 8 รายการในหน้าเว็บ ซึ่งถือว่าไม่มากนัก แต่เราก็ขอย้ำอีกครั้งว่าไม่ได้ไม่มีค่าใช้จ่าย อย่างไรก็ตาม องค์ประกอบ 8 อย่างมาจากไหน CSSOM และ DOM เป็นโครงสร้างข้อมูลที่เป็นอิสระ ปรากฏว่าเบราว์เซอร์ซ่อนขั้นตอนที่สำคัญอยู่ ถัดไป ฟิลด์ แผนผังการแสดงผลจะ ลิงก์ DOM และ CSSOM เข้าด้วยกัน