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 (บล็อก องค์ประกอบ ตัวปรับแต่ง) อบรมประโยชน์ด้านประสิทธิภาพของการจับคู่ตัวเลือก BEM ขอแนะนำว่า ทุกอย่างมีคลาสเดียว และที่ที่คุณต้องการลำดับชั้นนั้น จะรวมอยู่ในชื่อชั้นเรียนด้วย:
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
หากต้องการใช้ตัวแก้ไข เช่น ในตัวอย่างรายการย่อยสุดท้าย คุณสามารถเพิ่ม ดังนี้
.list__list-item--last-child {
/* Styles */
}
BEM เป็นจุดเริ่มต้นที่ดีในการจัดระเบียบ CSS ทั้งจากโครงสร้าง และเพราะรูปแบบของการค้นหารูปแบบที่ช่วยลดความซับซ้อนของรูปแบบ
หากคุณไม่ชอบ BEM ยังมีวิธีอื่นๆ ในการจัดการ CSS ของคุณ ประเมินประสิทธิภาพและหลักสรีรศาสตร์ของพวกเขาก่อนเริ่มต้น
แหล่งข้อมูล
รูปภาพหลักจาก Unsplash โดย Markus Spiske