การสร้างโมเดลออบเจ็กต์

Ilya Grigorik

ก่อนที่จะแสดงผลหน้าเว็บได้นั้น เบราว์เซอร์จำเป็นต้องสร้างต้นไม้ DOM และ CSSOM ด้วยเหตุนี้ เราจึงต้องนำส่งทั้ง HTML และ CSS ไปยังเบราว์เซอร์โดยเร็วที่สุด

สรุป

  • ไบต์ → อักขระ → โทเค็น → โหนด → โมเดลออบเจ็กต์
  • มาร์กอัป HTML ได้รับการเปลี่ยนรูปแบบเป็น Document Object Model (DOM) ส่วนมาร์กอัป CSS จะแปลงเป็น CSS Object Model (CSSOM)
  • DOM และ CSSOM เป็นโครงสร้างข้อมูลที่เป็นอิสระ
  • แผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้เราบันทึกและตรวจสอบต้นทุนการสร้างและการประมวลผลของ 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 ที่มีข้อความเล็กน้อย และรูปภาพเดียว เบราว์เซอร์ประมวลผลหน้านี้อย่างไร

ขั้นตอนการสร้าง DOM

  1. Conversion: เบราว์เซอร์จะอ่านไบต์ดิบของ HTML ออกจากดิสก์หรือเครือข่าย และแปลเป็นอักขระแต่ละตัวตามการเข้ารหัสไฟล์ที่ระบุ (เช่น UTF-8)
  2. การทำให้เป็นโทเค็น: เบราว์เซอร์แปลงสตริงอักขระให้เป็นโทเค็นที่แตกต่างกันตามที่ระบุโดยมาตรฐาน W3C HTML5 เช่น "<html>" "<body>" และสตริงอื่นๆ ในวงเล็บมุม โทเค็นแต่ละรายการมีความหมายพิเศษและกฎของตัวเอง
  3. Lexing: ระบบจะแปลงโทเค็นที่สร้างขึ้นเป็น "ออบเจ็กต์" ซึ่งกําหนดพร็อพเพอร์ตี้และกฎของโทเค็นเหล่านั้น
  4. การสร้าง DOM: สุดท้าย เนื่องจากมาร์กอัป HTML กำหนดความสัมพันธ์ระหว่างแท็กที่ต่างกัน (บางแท็กอยู่ภายในแท็กอื่น) ออบเจ็กต์ที่สร้างจึงลิงก์อยู่ในโครงสร้างข้อมูลแบบต้นไม้ที่จะบันทึกความสัมพันธ์หลักกับย่อยที่ระบุในมาร์กอัปดั้งเดิมด้วย เช่น ออบเจ็กต์ HTML เป็นระดับบนสุดของออบเจ็กต์ body ส่วน body เป็นระดับบนสุดของออบเจ็กต์ paragraph เป็นต้น

แผนผัง DOM

ผลลัพธ์สุดท้ายของกระบวนการทั้งหมดนี้คือ Document Object Model (DOM) ของหน้าเว็บที่เรียบง่ายของเรา ซึ่งเบราว์เซอร์จะใช้ในการประมวลผลหน้าเว็บเพิ่มเติม

ทุกครั้งที่ประมวลผลมาร์กอัป HTML เบราว์เซอร์จะทำตามขั้นตอนทั้งหมดข้างต้น ซึ่งได้แก่ แปลงไบต์เป็นอักขระ ระบุโทเค็น แปลงโทเค็นเป็นโหนด และสร้างต้นไม้ DOM ทั้งกระบวนการทั้งหมดนี้อาจใช้เวลา โดยเฉพาะหากเรามี HTML จำนวนมากที่ต้องประมวลผล

การติดตามการสร้าง DOM ในเครื่องมือสำหรับนักพัฒนาเว็บ

หากคุณเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และบันทึกลำดับเวลาขณะโหลดหน้าเว็บ คุณจะเห็นเวลาจริงที่ใช้ในขั้นตอนนี้ ในตัวอย่างด้านบนเราใช้เวลาประมาณ 5 มิลลิวินาทีในการแปลง HTML เป็นต้นไม้ DOM สำหรับหน้าเว็บที่มีขนาดใหญ่กว่า กระบวนการนี้อาจใช้เวลานานกว่ามาก เมื่อสร้างภาพเคลื่อนไหวที่ลื่นไหล กรณีนี้อาจกลายเป็นคอขวดได้ง่ายหากเบราว์เซอร์ต้องประมวลผล HTML จำนวนมาก

ต้นไม้ DOM จับพร็อพเพอร์ตี้และความสัมพันธ์ของมาร์กอัปเอกสาร แต่ไม่บอกเราว่าองค์ประกอบจะมีหน้าตาอย่างไรเมื่อแสดงผล ซึ่งทั้งหมดนี้ เป็นความรับผิดชอบของ CSSOM

โมเดลออบเจ็กต์ CSS (CSSOM)

ในระหว่างที่เบราว์เซอร์สร้าง DOM ของหน้าเว็บแบบง่ายของเรา ก็พบแท็กลิงก์ในส่วนหัวของเอกสารที่อ้างอิงสไตล์ชีต 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 ได้ เป็นต้น

เราต้องแปลงกฎ CSS ที่ได้รับให้เป็นสิ่งที่เบราว์เซอร์เข้าใจและทำงานได้ เช่นเดียวกับ HTML เราจึงต้องทำตามขั้นตอน HTML อีกครั้ง แต่สำหรับ CSS แทนที่จะเป็น HTML

ขั้นตอนการสร้าง CSSOM

ระบบจะแปลงไบต์ CSS เป็นอักขระ จากนั้นเป็นโทเค็นและโหนด และสุดท้ายจะลิงก์ลงในโครงสร้างต้นไม้ที่เรียกว่า "โมเดลออบเจ็กต์ CSS" (CSSOM) ดังนี้

ต้นไม้ CSSOM

ทำไม CSSOM มีโครงสร้างต้นไม้ ในการคำนวณรูปแบบชุดสุดท้ายสำหรับวัตถุใดๆ ในหน้าเว็บ เบราว์เซอร์จะเริ่มต้นด้วยกฎทั่วไปที่สุดที่ใช้กับโหนดนั้น (เช่น หากเป็นองค์ประกอบย่อยขององค์ประกอบเนื้อหา รูปแบบร่างกายทั้งหมดจะถูกนำมาใช้) จากนั้นปรับแต่งรูปแบบที่คำนวณแล้วซ้ำอีกโดยใช้กฎที่เจาะจงยิ่งขึ้น กล่าวคือ กฎ "แบบ Cascade ลง"

โปรดดูต้นไม้ CSSOM ด้านบนเพื่อให้เห็นภาพ ข้อความที่อยู่ในแท็ก <span> ที่วางอยู่ภายในองค์ประกอบเนื้อหามีขนาดแบบอักษร 16 พิกเซลและมีข้อความสีแดง โดยคำสั่ง font-size จะเลื่อนลงจาก body เป็น span แต่หากแท็ก span เป็นระดับย่อยของแท็กย่อหน้า (p) เนื้อหาก็จะไม่แสดง

นอกจากนี้ โปรดทราบว่าโครงสร้างด้านบนไม่ใช่ต้นไม้ CSSOM ที่สมบูรณ์และแสดงเฉพาะรูปแบบที่เราตัดสินใจลบล้างในสไตล์ชีตเท่านั้น ทุกเบราว์เซอร์มีชุดรูปแบบเริ่มต้นหรือที่เรียกว่า "รูปแบบ User Agent" ซึ่งเราจะเห็นเมื่อไม่ได้ระบุรูปแบบเอง และสไตล์ของเราจะลบล้างค่าเริ่มต้นเหล่านี้

หากต้องการทราบระยะเวลาที่ใช้ในการประมวลผล CSS คุณจะสามารถบันทึกลำดับเวลาในเครื่องมือสำหรับนักพัฒนาเว็บและมองหาเหตุการณ์ "คำนวณรูปแบบอีกครั้ง" ไทม์ไลน์จะไม่แสดงรายการ "แยกวิเคราะห์ CSS" แยกต่างหาก แต่จะจับการแยกวิเคราะห์และการสร้างต้นไม้ CSSOM รวมถึงการคำนวณรูปแบบที่คำนวณแล้วซ้ำในเหตุการณ์เดียวนี้

การติดตามการสร้าง CSSOM ในเครื่องมือสำหรับนักพัฒนาเว็บ

สไตล์ชีตธรรมดาๆ ของเราใช้เวลาประมวลผลประมาณ 0.6 มิลลิวินาที และมีผลกับองค์ประกอบ 8 รายการในหน้าเว็บ ซึ่งถือว่าไม่มากก็จริง แต่ก็ขอย้ำอีกครั้งว่าไม่ฟรี แต่องค์ประกอบ 8 อย่าง มาจากไหน CSSOM และ DOM เป็นโครงสร้างข้อมูลที่เป็นอิสระ ปรากฏว่าเบราว์เซอร์ซ่อนขั้นตอนที่สำคัญอยู่ ต่อไป เราจะพูดถึงโครงสร้างการแสดงผลที่ลิงก์ DOM และ CSSOM เข้าด้วยกัน

ความคิดเห็น