JavaScript มักเป็นตัวทริกเกอร์การเปลี่ยนแปลงด้านภาพ บางครั้งก็ทำให้เกิดการเปลี่ยนแปลงเหล่านั้นโดยตรงผ่านการดัดแปลงสไตล์ และบางครั้งก็ผ่านการคำนวณที่ส่งผลให้เกิดการเปลี่ยนแปลงด้านภาพ เช่น การค้นหาหรือการจัดเรียงข้อมูล JavaScript ที่ใช้เวลาไม่นานหรือเป็นเวลานานอาจเป็นสาเหตุของปัญหาด้านประสิทธิภาพที่พบได้ทั่วไป และคุณควรลดผลกระทบในส่วนที่สามารถทำได้
การคำนวณรูปแบบ
การเปลี่ยน DOM โดยการเพิ่มและนำองค์ประกอบออก การเปลี่ยนแปลงแอตทริบิวต์ คลาส หรือการเล่นภาพเคลื่อนไหวจะทำให้เบราว์เซอร์คำนวณรูปแบบองค์ประกอบอีกครั้ง และในหลายกรณี เลย์เอาต์ของหน้าเว็บบางส่วนหรือทั้งหมด กระบวนการนี้เรียกว่าการคำนวณรูปแบบที่คำนวณ
เบราว์เซอร์จะเริ่มคำนวณรูปแบบโดยการสร้างชุดตัวเลือกที่ตรงกันเพื่อกำหนดว่าจะใช้คลาส ตัวเลือกเทียม และรหัสใดกับองค์ประกอบที่กำหนด จากนั้นจึงประมวลผลกฎของรูปแบบจากตัวเลือกการจับคู่ และหารูปแบบสุดท้ายที่องค์ประกอบมี
เวลาในการคำนวณรูปแบบใหม่และเวลาในการตอบสนองของการโต้ตอบ
การโต้ตอบกับ Next Paint (INP) เป็นเมตริกประสิทธิภาพรันไทม์ที่เน้นผู้ใช้ ซึ่งประเมินการตอบสนองโดยรวมของหน้าเว็บต่ออินพุตของผู้ใช้ โดยจะวัดเวลาในการตอบสนองของการโต้ตอบตั้งแต่ตอนที่ผู้ใช้โต้ตอบกับหน้าเว็บจนกว่าเบราว์เซอร์จะระบายสีเฟรมถัดไปซึ่งแสดงการอัปเดตภาพที่สอดคล้องกันไปยังอินเทอร์เฟซผู้ใช้
องค์ประกอบสำคัญของการโต้ตอบคือเวลาที่ใช้ในการระบายสีเฟรมถัดไป การแสดงผลที่ทำเพื่อนำเสนอเฟรมถัดไปประกอบด้วยหลายส่วน รวมถึงการคำนวณรูปแบบหน้าเว็บที่เกิดขึ้นก่อนการออกแบบ การลงสี และการจัดองค์ประกอบ หน้านี้จะเน้นที่ต้นทุนการคำนวณสไตล์ แต่การลดบางส่วนของระยะการแสดงผลที่เกี่ยวข้องกับการโต้ตอบจะลดเวลาในการตอบสนองทั้งหมด รวมถึงการคำนวณสไตล์ด้วย
ลดความซับซ้อนของตัวเลือก
การลดความซับซ้อนของชื่อตัวเลือกจะช่วยให้คำนวณรูปแบบของหน้าเว็บได้เร็วขึ้น ตัวเลือกที่ง่ายที่สุดจะอ้างอิงองค์ประกอบใน CSS โดยใช้เพียงชื่อคลาสเท่านั้น
.title {
/* styles */
}
แต่เมื่อโปรเจ็กต์เติบโตขึ้น อาจต้องใช้ CSS ที่ซับซ้อนมากขึ้น และคุณอาจพบตัวเลือกที่มีลักษณะดังต่อไปนี้
.box:nth-last-child(-n+1) .title {
/* styles */
}
หากต้องการตรวจสอบว่ารูปแบบเหล่านี้มีผลกับหน้าเว็บอย่างไร เบราว์เซอร์ต้องถามอย่างมีประสิทธิภาพว่า "องค์ประกอบนี้เป็นองค์ประกอบที่มีคลาสของ title ซึ่งมีองค์ประกอบย่อยที่เป็นเครื่องหมายลบด้วย nth-plus-1 พร้อมคลาส box ไหม" การตรวจหาสิ่งนี้อาจใช้เวลานาน ทั้งนี้ขึ้นอยู่กับตัวเลือกที่ใช้และเบราว์เซอร์ที่เป็นปัญหา หากต้องการลดความซับซ้อนนี้ คุณสามารถเปลี่ยนตัวเลือก
ให้เป็นชื่อชั้นเรียนเพียงอย่างเดียว
.final-box-title {
/* styles */
}
ชื่อคลาสที่ใช้แทนที่เหล่านี้อาจดูแปลกๆ แต่จะทำให้งานของเบราว์เซอร์ง่ายขึ้นมาก ตัวอย่างเช่น ในเวอร์ชันก่อนหน้า เบราว์เซอร์จะรู้ว่าองค์ประกอบใดเป็นองค์ประกอบสุดท้ายของประเภท คือต้องรู้ทุกอย่างเกี่ยวกับองค์ประกอบอื่นๆ ทั้งหมดก่อนเพื่อกำหนดว่าองค์ประกอบใดที่ตามมาอาจเป็น nth-last-child หรือไม่ ซึ่งมีค่าใช้จ่ายในการคำนวณสูงกว่าการจับคู่ตัวเลือกกับองค์ประกอบเพียงเพราะว่าคลาสของการจับคู่ตรงกัน
ลดจำนวนองค์ประกอบที่กำลังจัดรูปแบบ
ข้อควรพิจารณาเกี่ยวกับประสิทธิภาพอีกประการหนึ่งและมักจะสำคัญกว่าความซับซ้อนของตัวเลือก คือปริมาณงานที่ต้องเกิดขึ้นเมื่อองค์ประกอบมีการเปลี่ยนแปลง
โดยทั่วไปแล้ว ต้นทุนที่แย่ที่สุดในการคำนวณรูปแบบองค์ประกอบที่คำนวณคือจำนวนองค์ประกอบคูณด้วยจำนวนตัวเลือก เนื่องจากเบราว์เซอร์ต้องตรวจสอบองค์ประกอบแต่ละรายการอย่างน้อย 1 ครั้งกับทุกรูปแบบเพื่อดูว่ารูปแบบนั้นตรงกันหรือไม่
การคำนวณรูปแบบจะกำหนดเป้าหมายองค์ประกอบไม่กี่อย่างโดยตรง แทนที่จะทำให้ทั้งหน้าเป็นโมฆะ สำหรับเบราว์เซอร์รุ่นใหม่ๆ ปัญหานี้มักจะไม่เกิดขึ้นเนื่องจากเบราว์เซอร์ไม่จำเป็นต้องตรวจสอบองค์ประกอบทั้งหมดที่การเปลี่ยนแปลงอาจมีผลกระทบเสมอไป ในทางกลับกัน เบราว์เซอร์รุ่นเก่าอาจไม่ได้รับการเพิ่มประสิทธิภาพเพื่อการทำงานเช่นนี้เสมอไป คุณควรลดจำนวนองค์ประกอบที่ใช้งานไม่ได้หากทำได้
วัดต้นทุนการคำนวณรูปแบบอีกครั้ง
วิธีหนึ่งในการวัดต้นทุนการคำนวณรูปแบบใหม่คือการใช้แผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ทำตามขั้นตอนต่อไปนี้เพื่อเริ่มต้นใช้งาน
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- ไปที่แท็บประสิทธิภาพ
- คลิกบันทึก
- โต้ตอบกับเพจ
เมื่อหยุดบันทึก คุณจะเห็นสิ่งต่างๆ เช่นรูปภาพต่อไปนี้
แถบที่ด้านบนคือแผนภูมิเปลวไฟขนาดเล็กที่พล็อตเฟรมต่อวินาทีด้วย ยิ่งกิจกรรมอยู่ใกล้กับด้านล่างของแถบ เบราว์เซอร์จะระบายสีเฟรมที่เร็วขึ้น ถ้าคุณเห็นแผนภูมิเปลวไฟเลื่อนออกมาที่ด้านบนโดยมีแถบสีแดงอยู่ด้านบน แสดงว่าคุณมีงานที่ทำให้เฟรมใช้เวลานาน
เฟรมที่ใช้เวลานานในระหว่างการโต้ตอบ เช่น การเลื่อน ควรดูให้ไกลขึ้น หากคุณเห็นบล็อกสีม่วงขนาดใหญ่ ให้ซูมเข้าไปที่กิจกรรมและเลือกงานใดก็ตามที่มีป้ายกำกับว่าคำนวณรูปแบบใหม่ เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการคำนวณสไตล์ใหม่ที่อาจมีค่าใช้จ่ายสูง
การคลิกเหตุการณ์จะแสดงการเรียกใช้สแต็ก หากการแสดงผลเกิดจากการโต้ตอบของผู้ใช้ ระบบจะเรียก JavaScript ที่ทริกเกอร์การเปลี่ยนรูปแบบ นอกจากนี้ยังแสดงจำนวนองค์ประกอบที่การเปลี่ยนแปลงมีผลต่อ (เพียงองค์ประกอบมากกว่า 900 รายการในกรณีนี้เท่านั้น) รวมถึงระยะเวลาในการคำนวณสไตล์ คุณสามารถใช้ข้อมูลนี้เพื่อเริ่มค้นหาวิธีแก้ไขโค้ด
ใช้บล็อก องค์ประกอบ แป้นกดร่วม
แนวทางการเขียนโค้ด เช่น BEM (Block, Element, Modifier) Bake ในตัวเลือกที่ตรงกับประโยชน์ของประสิทธิภาพ BEM แนะนำว่าทุกอย่างมีคลาสเดียว และในกรณีที่คุณต้องการ ระบบจะรวมลำดับชั้นดังกล่าวไว้ในชื่อคลาสด้วย
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
หากต้องการใช้ตัวปรับแต่ง เช่น ในตัวอย่างรายการย่อยสุดท้าย ก็เพิ่มได้ดังต่อไปนี้
.list__list-item--last-child {
/* Styles */
}
BEM เป็นจุดเริ่มต้นที่ดีในการจัดระเบียบ CSS ของคุณ ทั้งจากมุมมองด้านโครงสร้าง และเนื่องจากการค้นหารูปแบบทำให้การค้นหารูปแบบดังกล่าวเป็นเรื่องง่าย
หากคุณไม่ชอบ BEM ก็ยังมีวิธีอื่นๆ ในการเข้าถึง CSS ของคุณ แต่คุณควรประเมินประสิทธิภาพและหลักสรีรศาสตร์ของ CSS ก่อนที่จะเริ่มต้น
แหล่งข้อมูล
รูปภาพหลักจาก Unsplash โดย Markus Spiske