ลดขอบเขตและความซับซ้อนของการคำนวณรูปแบบ

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

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

เบราว์เซอร์จะเริ่มคํานวณสไตล์โดยสร้างชุดตัวเลือกที่ตรงกันเพื่อระบุคลาส ตัวเลือกจำลอง และรหัสที่จะใช้กับองค์ประกอบหนึ่งๆ จากนั้นจะประมวลผลกฎสไตล์จากตัวเลือกที่ตรงกันและหาสไตล์สุดท้ายขององค์ประกอบ

บทบาทของการคำนวณรูปแบบใหม่ในเวลาในการตอบสนองของการโต้ตอบ

Interaction to Next Paint (INP) คือเมตริกประสิทธิภาพรันไทม์ที่เน้นผู้ใช้เป็นหลัก ซึ่งประเมินการตอบสนองโดยรวมของหน้าเว็บต่ออินพุตของผู้ใช้ โดยจะวัดเวลาในการตอบสนองของการโต้ตอบตั้งแต่ที่ผู้ใช้โต้ตอบกับหน้าเว็บจนกว่าเบราว์เซอร์จะแสดงเฟรมถัดไปซึ่งแสดงการอัปเดตภาพที่เกี่ยวข้องในอินเทอร์เฟซผู้ใช้

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

ลดความซับซ้อนของตัวเลือก

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

.title {
  /* styles */
}

แต่เมื่อทุกโปรเจ็กต์เติบโตขึ้น ก็มักต้องใช้ CSS ที่ซับซ้อนมากขึ้น ซึ่งคุณอาจพบตัวเลือกที่มีลักษณะเช่นนี้

.box:nth-last-child(-n+1) .title {
  /* styles */
}

หากต้องการระบุว่าสไตล์เหล่านี้มีผลกับหน้าเว็บอย่างไร เบราว์เซอร์ต้องถามอย่างมีประสิทธิภาพว่า "องค์ประกอบนี้มีคลาส title ที่มีองค์ประกอบหลักเป็นคลาส box ซึ่งเป็นองค์ประกอบย่อยที่ลบ n บวก 1 ขององค์ประกอบหลักหรือไม่ เบราว์เซอร์อาจใช้เวลาสักครู่ในการแก้ปัญหานี้ หากต้องการลดความซับซ้อน คุณสามารถเปลี่ยนตัวเลือกเป็นชื่อคลาสที่เฉพาะเจาะจงมากขึ้นได้ ดังนี้

.final-box-title {
  /* styles */
}

ชื่อคลาสการแทนที่เหล่านี้อาจดูแปลกๆ แต่ทำให้งานของเบราว์เซอร์ง่ายขึ้นมาก ตัวอย่างเช่น ในเวอร์ชันก่อนหน้า หากต้องการให้เบราว์เซอร์ทราบว่าองค์ประกอบเป็นองค์ประกอบสุดท้ายของประเภทนั้น เบราว์เซอร์จะต้องทราบข้อมูลทั้งหมดเกี่ยวกับองค์ประกอบอื่นๆ ทั้งหมดก่อน เพื่อพิจารณาว่าองค์ประกอบใดที่ตามหลังมาอาจเป็น nth-last-child ได้หรือไม่ ซึ่งอาจใช้การประมวลผลมากกว่าการจับคู่ตัวเลือกกับองค์ประกอบตามชื่อคลาสเพียงอย่างเดียว

ลดจำนวนองค์ประกอบที่มีการจัดสไตล์

ข้อควรพิจารณาด้านประสิทธิภาพอีกประการหนึ่งและมักเป็นปัจจัยที่สำคัญมากกว่าความซับซ้อนของตัวเลือกคือปริมาณงานที่จำเป็นต้องเกิดขึ้นเมื่อองค์ประกอบเปลี่ยนแปลง

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

การคํานวณสไตล์สามารถกําหนดเป้าหมายองค์ประกอบ 2-3 รายการได้โดยตรงแทนที่จะทำให้ทั้งหน้าเว็บใช้งานไม่ได้ ในเบราว์เซอร์สมัยใหม่ ปัญหานี้มักจะไม่ค่อยเกิดขึ้น เนื่องจากเบราว์เซอร์ไม่จําเป็นต้องตรวจสอบองค์ประกอบทั้งหมดที่การเปลี่ยนแปลงอาจส่งผลเสมอไป ในทางกลับกัน เบราว์เซอร์รุ่นเก่าอาจไม่ได้รับการเพิ่มประสิทธิภาพสำหรับงานดังกล่าวเสมอไป คุณควรลดจํานวนองค์ประกอบที่ไม่ถูกต้องหากทําได้

วัดค่าใช้จ่ายในการคำนวณรูปแบบอีกครั้ง

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

วัดต้นทุนการคํานวณสไตล์ใหม่ในเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome

วิธีหนึ่งในการวัดต้นทุนของการคํานวณสไตล์ใหม่คือการใช้แผงประสิทธิภาพในเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome ทําตามขั้นตอนต่อไปนี้เพื่อเริ่มต้นใช้งาน

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. ไปที่แท็บประสิทธิภาพ
  3. เลือกช่องทําเครื่องหมายสถิติตัวเลือก (ไม่บังคับ)
  4. คลิกบันทึก
  5. โต้ตอบกับหน้าเว็บ

เมื่อหยุดบันทึก คุณจะเห็นบางอย่างเหมือนรูปภาพต่อไปนี้

เครื่องมือสำหรับนักพัฒนาเว็บที่แสดงการคำนวณสไตล์
รายงานเครื่องมือสำหรับนักพัฒนาเว็บที่แสดงการคำนวณรูปแบบ

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

การซูมเข้า
 บริเวณที่เกิดปัญหาในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ในสรุปกิจกรรมของแผงประสิทธิภาพที่มีการป้อนข้อมูลไว้ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
เฟรมที่ทำงานเป็นเวลานานในสรุปกิจกรรมของเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

หากคุณเลือกช่องทําเครื่องหมายสถิติตัวเลือกในการตั้งค่าแผงประสิทธิภาพก่อนทําการติดตาม แผงด้านล่างในการติดตามจะมีแท็บเพิ่มเติมที่ใช้ชื่อเดียวกัน

ตารางสถิติตัวเลือก CSS ตามที่ปรากฏในแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ตารางนี้ประกอบด้วยส่วนหัวและข้อมูลที่เกี่ยวข้องสำหรับสิ่งต่างๆ เช่น เวลาที่ผ่านไป ความพยายามในการจับคู่ จำนวนการจับคู่ เปอร์เซ็นต์ของโหนดที่ไม่ตรงกัน ตัวเลือก และสไตล์ชีตที่จะพบได้
ตารางสถิติตัวเลือกตามที่แสดงในแผงประสิทธิภาพของ Chrome DevTools

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

ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับสถิติตัวเลือก CSS

วัดต้นทุนการคำนวณรูปแบบอีกครั้งสำหรับผู้ใช้จริง

หากต้องการทราบว่าระบบใช้เวลานานเท่าใดในการคํานวณสไตล์ใหม่สําหรับผู้ใช้จริงของเว็บไซต์ Long Animation Frames API มีเครื่องมือที่จําเป็นในการดำเนินการนี้ ข้อมูลจาก API นี้เพิ่มลงในweb-vitalsไลบรารี JavaScript รวมถึงเวลาในการคํานวณสไตล์ใหม่

หากสงสัยว่าความล่าช้าในการแสดงผลของการโต้ตอบเป็นปัจจัยหลักที่ทําให้ INP ของหน้าเว็บเพิ่มขึ้น คุณจะต้องหาว่าเวลาดังกล่าวใช้เวลาไปกับการคํานวณสไตล์ในหน้าเว็บนานเท่าใด ดูข้อมูลเพิ่มเติมได้ที่วิธีวัดเวลาในการคํานวณสไตล์ใหม่ในสนาม

แหล่งข้อมูล