คู่มือเริ่มต้นสำหรับ CSS Object Model (CSSOM)

เกิดขึ้นมากมายระหว่าง คำขอ HTTP แรก และ การส่งมอบครั้งสุดท้าย ของหน้าเว็บ การส่งข้อมูลและไพพ์ไลน์การแสดงผลของเบราว์เซอร์ต้องการเทคโนโลยีที่แตกต่างกันมากมายหนึ่งในนั้นคือ โมเดลวัตถุ CSS, หรือ CSSOM.

CSS Object Model ใช้โค้ด CSS และแสดงผลตัวเลือกทุกตัว เป็นโครงสร้างต้นไม้ สำหรับการแยกวิเคราะห์ง่ายขึ้น บางทีมันอาจไม่สำคัญสำหรับนักพัฒนาในการทำความเข้าใจแนวคิดนี้อย่างสมบูรณ์ แต่เป็นหัวข้อที่มีค่าสำหรับการศึกษาหากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ วิธีที่เบราว์เซอร์แสดงรหัสในเว็บไซต์ที่ใช้งานได้.

ในโพสต์นี้ฉันจะกล่าวถึงพื้นฐานของ CSS Object Model และแสดงให้คุณเห็นว่ามันทำงานอย่างไร.

CSSOM คืออะไร?

คำว่า CSS Object Model อธิบายถึง แผนที่ของตัวเลือก CSS ทั้งหมด & คุณสมบัติที่เกี่ยวข้องสำหรับตัวเลือกแต่ละตัว. สไตล์เหล่านี้อาจเป็นองค์ประกอบรูทหรือมีลูกซ้อนกัน.

CSSOM คล้ายกับ DOM ใน HTML, ซึ่งย่อมาจาก Document Object Model ทั้งคู่เป็นส่วนหนึ่งของ เส้นทางการเรนเดอร์ที่สำคัญ ซึ่งเป็นชุดของขั้นตอนที่ต้องเกิดขึ้น แสดงผลเว็บไซต์อย่างถูกต้อง. กระบวนการทั้งหมดนี้เกิดขึ้น อัตโนมัติ, เบื้องหลัง.

ทำไม CSSOM ถึงมีความสำคัญ มันเป็นแผนที่ที่เบราว์เซอร์ใช้ แสดงผลสไตล์ CSS อย่างถูกต้อง บนหน้าเว็บ ไม่มีวิธีที่ง่ายที่จะบอกคอมพิวเตอร์ว่าย่อหน้าทั้งหมดใน .เนื้อหาหลัก div ต้องมีความสูงของบรรทัดเป็นพิเศษ.

การแก้ปัญหาคือ CSS Object Model ซึ่ง แม็พอิลิเมนต์และคุณสมบัติทั้งหมดออก จากรหัส CSS ของคุณ.

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

มันทำงานอย่างไร

ทั้ง DOM และ CSSOM นั้น ใช้อย่างกว้างขวางโดยเว็บเบราว์เซอร์ทั้งหมด เพื่อแปลและแสดงผลหน้าเว็บ แผนภาพด้านล่างมาจากคำแนะนำเกี่ยวกับเว็บพื้นฐานของ Google Developers และอธิบายวิธีการ DOM แสดงผลในเว็บเบราว์เซอร์.

ทั้งใน DOM & CSSOM ข้อมูลทั้งหมดคือ แปลงจากไบต์เป็นแผนที่ดิจิตอล ที่แสดงทุกองค์ประกอบในเอกสารเว็บ กระบวนการทำงานดังต่อไปนี้:

1. เบราว์เซอร์ ดาวน์โหลด HTML สำหรับหน้าเว็บ.
2. ขณะประมวลผล HTML ตัวแยกวิเคราะห์อาจชนองค์ประกอบลิงก์ การอ้างอิงสไตล์ชีทภายนอก.
3. สไตล์ชีท CSS นี้นั้น แยกวิเคราะห์เป็นแผนที่ ใช้รายละเอียดโมเดลวัตถุ CSS.
4. รหัสผลลัพธ์สามารถเป็นได้ นำไปใช้กับองค์ประกอบใน DOM.

ทั้งหมดนี้เกิดขึ้นอย่างรวดเร็วและเกิดขึ้น พร้อมคำขอหน้าเดียวทุกครั้ง. แผนภาพอื่นด้านล่างนี้แสดงให้เห็นถึง ตัวอย่างโครงสร้างต้นไม้ของ CSSOM.

สังเกตว่าคุณสมบัติบางอย่างในแผนภาพมีสีตัวอักษรสีเทาอ่อน คุณสมบัติเหล่านี้คือ สืบทอดมาจากผู้ปกครอง. เนื่องจากเนื้อความมีขนาดแบบอักษรที่ระบุองค์ประกอบทั้งหมดในร่างกายจึงได้รับขนาดตัวอักษรนั้นด้วยเว้นแต่จะถูกเขียนทับ.

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

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

ทำไมนักพัฒนาเว็บจึงควรใส่ใจ

ตั้งแต่การเรนเดอร์ทั้งหมด เกิดขึ้นในแบ็กเอนด์, คุณไม่ต้องกังวลกับต้นไม้ CSSOM มากนัก แต่มันอาจมีประโยชน์ที่จะเข้าใจวิธีการทำงาน.

สิ่งหนึ่งที่ต้องจำคือ ต้องโหลด CSSOM อย่างสมบูรณ์ ก่อนที่หน้าเว็บจะปรากฏขึ้นเนื่องจากจะกำหนดว่าองค์ประกอบทุกอย่างในหน้าเว็บควรมีลักษณะอย่างไร หากหน้าเว็บโหลดก่อน CSSOM หน้านั้นจะปรากฏเป็น HTML ธรรมดาก่อนตามด้วยสไตล์หลังจากนั้นไม่กี่วินาที.

เบราว์เซอร์หลีกเลี่ยงสิ่งนั้นเป็นพิเศษเพราะจะทำให้ผู้ใช้สับสน และมันก็เป็นที่น่าสังเกตว่า CSSOM ไม่สามารถแคชได้; มันจะต้องเป็น สร้างขึ้นใหม่ในแต่ละหน้า.

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

ฉันขอแนะนำให้อ่านบทความนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับทรัพยากร CSS / JS ภายนอกและเวลาในการโหลด.

วิธีที่ดีที่สุดในการเพิ่มประสิทธิภาพไซต์ของคุณคือการสร้าง น้ำตกธรรมชาติ ของทรัพยากรที่ มีการโหลดควบคู่.

เป็นไปได้ที่จะจัดการ CSSOM โดยใช้ JavaScript เพราะเป็นเทคนิค JS API แต่มันไม่ได้มีวัตถุประสงค์มากนักเมื่อเทียบกับการจัดการ JavaScript DOM.

เหตุผลที่ใหญ่กว่าในการเรียนรู้เกี่ยวกับ CSSOM คือเพื่อให้ความรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของเว็บไซต์.

มีหลายสิ่งที่เราให้ความสำคัญเพื่อให้อินเทอร์เน็ตทำงานได้อย่างราบรื่น เมื่อคุณเข้าใจเพิ่มเติมเล็กน้อยเกี่ยวกับกระบวนการทั้งหมดคุณสามารถเห็นภาพว่าสิ่งทั้งหมดมารวมกันได้อย่างไรและหวังว่าจะได้รับความชื่นชมจากการมีอยู่ของเวิลด์ไวด์เว็บ.

อ่านเพิ่มเติม

ฉันหวังว่าบทนำนี้จะช่วยให้คุณมีความคิดที่ชัดเจนว่า CSS Object Model คืออะไรและมีผลกับหน้าเว็บอย่างไร ที่นั่น ไม่มากที่จะจัดการใน CSSOM, ดังนั้นมันจึงแตกต่างจาก DOM เล็กน้อย.

อย่างไรก็ตามมันยังคงเป็นเทคโนโลยีที่สำคัญในการพัฒนาเว็บและควรอธิบายประเด็นสำคัญของการแสดงผลเบราว์เซอร์.

มีแหล่งข้อมูลมากมายที่พูดถึง CSSOM และวิธีการทำงาน หากคุณกำลังมองหาที่จะเรียนรู้เพิ่มเติมนี่คือบางโพสต์ที่ฉันแนะนำ:

• ภาพรวมโมเดลวัตถุ CSS
• การสำรวจ CSSOM: การสร้าง CSS Object Analyzer
• สิ่งที่ผู้พัฒนาส่วนหน้าทุกคนควรรู้เกี่ยวกับการแสดงผลหน้าเว็บ