JavaScript มักเป็นตัวทริกเกอร์การเปลี่ยนแปลงภาพ บางครั้งก็ทำให้ เปลี่ยนแปลงโดยตรงผ่านการปรับแต่งรูปแบบ และบางครั้งก็ผ่านการคำนวณ ซึ่งส่งผลให้เกิดการเปลี่ยนแปลงด้านการมองเห็น เช่น การค้นหาหรือการจัดเรียงข้อมูล ตั้งเวลาไม่ดีหรือ JavaScript ที่ทำงานเป็นเวลานานอาจเป็นสาเหตุที่พบบ่อยของปัญหาด้านประสิทธิภาพ และคุณ ควรลดผลกระทบให้เหลือน้อยที่สุดเท่าที่จะทำได้
การคำนวณรูปแบบ
การเปลี่ยน DOM โดยการเพิ่มและนำองค์ประกอบออก เปลี่ยนแอตทริบิวต์ คลาส หรือการเล่นภาพเคลื่อนไหว จะทำให้เบราว์เซอร์คำนวณรูปแบบองค์ประกอบใหม่ ในหลายกรณี เช่น เลย์เอาต์ของหน้าบางส่วนหรือทั้งหมด กระบวนการนี้เรียกว่า การคำนวณรูปแบบ
เบราว์เซอร์จะเริ่มคำนวณรูปแบบด้วยการสร้างชุดตัวเลือกการจับคู่ กำหนดคลาส, ตัวเลือกเทียม และรหัสที่ใช้กับองค์ประกอบหนึ่งๆ จากนั้นจึงประมวลผลกฎสไตล์จากเครื่องมือเลือกที่ตรงกันและตัวเลข องค์ประกอบสุดท้ายมีรูปแบบอย่างไร
บทบาทของการคำนวณรูปแบบใหม่ในเวลาในการตอบสนองของการโต้ตอบ
การโต้ตอบกับ Next Paint (INP) เป็นรันไทม์ที่มีผู้ใช้เป็นศูนย์กลาง เมตริกประสิทธิภาพที่ประเมินการตอบสนองโดยรวมของหน้าเว็บต่อข้อมูลจากผู้ใช้ วัดเวลาในการตอบสนองของการโต้ตอบตั้งแต่ตอนที่ผู้ใช้โต้ตอบกับหน้าเว็บจนถึง เบราว์เซอร์จะระบายสีเฟรมถัดไปเพื่อแสดงการอัปเดตภาพที่เกี่ยวข้อง อินเทอร์เฟซผู้ใช้
องค์ประกอบสำคัญของการโต้ตอบคือเวลาที่ใช้ในการวาดการโต้ตอบถัดไป เฟรม การแสดงผลงานที่ทำขึ้นเพื่อนำเสนอเฟรมถัดไปประกอบด้วยหลายส่วน ซึ่งรวมถึงการคำนวณรูปแบบหน้าเว็บ ที่เกิดขึ้นก่อนการจัดวาง สี และ การประสานงานเข้าด้วยกัน คู่มือนี้เน้นไปที่ต้นทุนในการคํานวณสไตล์โดย ระยะเวลาการแสดงผลรวมของการโต้ตอบส่วนใดส่วนหนึ่งจะลด เวลาในการตอบสนอง
ลดความซับซ้อนของตัวเลือก
การลดความซับซ้อนของตัวเลือก CSS จะช่วยให้การคำนวณรูปแบบของหน้าเว็บเร็วขึ้น ตัวเลือกที่ง่ายที่สุดจะอ้างอิงองค์ประกอบใน CSS โดยใช้เพียงชื่อคลาส ดังนี้
.title {
/* styles */
}
แต่เมื่อโปรเจ็กต์ใดก็ตามเติบโตขึ้น ก็มีแนวโน้มที่จะต้องการ CSS ที่ซับซ้อนมากขึ้น ซึ่งอาจทำให้สิ้นสุด ขึ้นด้วยตัวเลือกที่มีลักษณะเช่นนี้
.box:nth-last-child(-n+1) .title {
/* styles */
}
ในการพิจารณาว่าสไตล์เหล่านี้ใช้กับหน้าเว็บอย่างไร เบราว์เซอร์จะต้อง
ถามว่า "นี่คือองค์ประกอบที่มีคลาส title ที่มีระดับบนของคลาสของ
box ซึ่งก็คือลูกลบ n-n บวก-1 ขององค์ประกอบระดับบนสุด กำลังหาวิธีนี้
อาจใช้เวลาสักครู่สำหรับเบราว์เซอร์ หากต้องการให้ง่ายขึ้น คุณสามารถเปลี่ยนแปลง
ให้เป็นชื่อคลาสที่เฉพาะเจาะจงมากขึ้น
.final-box-title {
/* styles */
}
ชื่อคลาสการแทนที่เหล่านี้อาจดูแปลกๆ แต่ก็ทำให้เบราว์เซอร์
งานง่ายขึ้นมาก เช่น ในเวอร์ชันก่อนหน้าเพื่อให้เบราว์เซอร์รู้ว่า
ธาตุเป็นชนิดสุดท้าย องค์ประกอบต้องรู้ทุกอย่างเกี่ยวกับ
องค์ประกอบอื่นๆ เพื่อระบุว่ามี
องค์ประกอบใดๆ ที่ตามหลังมาหรือไม่
เป็นnth-last-child ซึ่งอาจแพงกว่าการคำนวณ
จับคู่ตัวเลือกกับองค์ประกอบหนึ่งๆ ตามชื่อคลาส
ลดจำนวนองค์ประกอบที่กำลังจัดรูปแบบ
ข้อควรพิจารณาเกี่ยวกับประสิทธิภาพอีกประการหนึ่งและมักเป็นข้อสําคัญมากกว่าตัวเลือก ความซับซ้อน คือปริมาณงานที่จำเป็นเมื่อองค์ประกอบมีการเปลี่ยนแปลง
กล่าวโดยทั่วไปคือ ค่าใช้จ่ายที่แย่ที่สุดในการคำนวณรูปแบบองค์ประกอบที่คำนวณ คือจำนวนองค์ประกอบคูณด้วยจำนวนตัวเลือก เนื่องจากเบราว์เซอร์ ต้องตรวจสอบแต่ละองค์ประกอบอย่างน้อย 1 ครั้งในทุกๆ รูปแบบเพื่อดูว่า ที่ตรงกัน
การคำนวณรูปแบบสามารถกำหนดเป้าหมายองค์ประกอบไม่กี่อย่างโดยตรงแทนที่จะทำให้ไม่ถูกต้อง ทั้งหน้า ในเบราว์เซอร์สมัยใหม่ ปัญหานี้มักจะไม่เป็นปัญหาเนื่องจาก เบราว์เซอร์ไม่จำเป็นต้องตรวจสอบองค์ประกอบทั้งหมดที่อาจมีผลกระทบจากการเปลี่ยนแปลงเสมอไป ในทางกลับกัน เบราว์เซอร์รุ่นเก่าอาจไม่ได้รับการเพิ่มประสิทธิภาพสำหรับงานลักษณะนี้เสมอไป สถานที่ คุณควรลดจำนวนองค์ประกอบที่ใช้งานไม่ได้
วัดต้นทุนสำหรับการคำนวณรูปแบบอีกครั้ง
มี 2 วิธีที่คุณสามารถวัดต้นทุนของการคำนวณสไตล์ใหม่ เบราว์เซอร์ แต่ละรูปแบบจะขึ้นอยู่กับว่าคุณต้องการวัดผลในเบราว์เซอร์หรือไม่ ในสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ของคุณ หรือหากคุณต้องการวัดว่าขั้นตอนนี้ใช้เวลานานเท่าใด ทำให้ผู้ใช้จริงในเว็บไซต์ของคุณ
วัดต้นทุนการคำนวณรูปแบบอีกครั้งในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
วิธีหนึ่งในการวัดต้นทุนของการคำนวณรูปแบบอีกครั้งคือการใช้ประสิทธิภาพ ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยทำตามขั้นตอนต่อไปนี้
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- ไปที่แท็บประสิทธิภาพ
- เลือกช่องทำเครื่องหมายสถิติตัวเลือก (ไม่บังคับ)
- คลิกบันทึก
- โต้ตอบกับหน้าเว็บ
เมื่อหยุดบันทึก คุณจะเห็นบางอย่างเหมือนรูปภาพต่อไปนี้
แถบด้านบนเป็นแผนภูมิขนาดเล็กที่มีเปลวไฟแสดงเฟรมตาม อย่างที่สอง ยิ่งกิจกรรมอยู่ใกล้กับด้านล่างของแถบมากเท่าไหร่ ก็ยิ่งรวดเร็ว มีการวาดภาพเฟรมต่างๆ โดยเบราว์เซอร์ ถ้าคุณเห็นแผนภูมิเปลวไฟพุ่งสูงขึ้น ที่ด้านบนสุดโดยมีแถบสีแดงอยู่ด้านบน แสดงว่าคุณมีงานที่ก่อให้เกิด ที่ใช้เวลานาน
เฟรมที่ใช้เวลานานในระหว่างการโต้ตอบ เช่น การเลื่อน จะคุ้มค่ากว่า ลักษณะ หากคุณเห็นบล็อกสีม่วงขนาดใหญ่ ให้ซูมเข้าไปที่กิจกรรมแล้วเลือก ที่ทำงานที่มีป้ายกำกับ คำนวณรูปแบบใหม่ เพื่อรับข้อมูลเพิ่มเติมเกี่ยวกับ การคำนวณรูปแบบใหม่ที่มีราคาแพง
การคลิกกิจกรรมจะแสดงสแต็กการเรียกใช้ การแสดงผลเกิดจาก การโต้ตอบของผู้ใช้ โมเดลนี้จะเรียก JavaScript ที่ทริกเกอร์การเปลี่ยนแปลงรูปแบบ นอกจากนี้ยังแสดงจำนวนองค์ประกอบที่การเปลี่ยนแปลงมีผล ซึ่งมีมากกว่า 900 รายการ องค์ประกอบในกรณีนี้ และเวลาที่ใช้ในการคำนวณรูปแบบ คุณใช้ เพื่อเริ่มหาจุดแก้ไขในโค้ดของคุณ
หากคุณเลือกช่องทำเครื่องหมายสถิติตัวเลือก ในการตั้งค่า Performance Panel ก่อนทำการติดตาม แล้วจึงคลิกด้านล่าง ในแผงการติดตามจะมีแท็บเพิ่มเติมที่ใช้ชื่อเดียวกัน
แผงนี้จะให้ข้อมูลที่มีประโยชน์เกี่ยวกับราคาที่เกี่ยวข้องของแต่ละตัวเลือก ซึ่งช่วยให้ คุณจะระบุตัวเลือก CSS ราคาแพงได้
ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบเกี่ยวกับสถิติตัวเลือก CSS
วัดต้นทุนการคำนวณรูปแบบอีกครั้งสำหรับผู้ใช้จริง
ถ้าคุณอยากทราบว่าการคำนวณรูปแบบจะใช้เวลานานเท่าใด
ผู้ใช้จริงของเว็บไซต์ Long Animation Frames API
จะให้เครื่องมือที่จำเป็นในการทำเช่นนั้น ข้อมูลจาก API นี้ถูกเพิ่มลงใน
web-vitalsไลบรารี JavaScript
รวมถึงเวลาคำนวณสไตล์ใหม่
หากคุณสงสัยว่าความล่าช้าในการนำเสนอของการโต้ตอบคือ ผู้ร่วมให้ข้อมูลใน INP ของหน้าเว็บ คุณจะต้องทราบว่าเวลา ใช้เวลาคำนวณรูปแบบบนหน้าเว็บใหม่ สำหรับข้อมูลเพิ่มเติม โปรดอ่านเกี่ยวกับ วิธีวัดเวลาการคำนวณรูปแบบใหม่ในฟิลด์
แหล่งข้อมูล
- สถิติตัวเลือกในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- การทำให้รูปแบบใช้งานไม่ได้ใน Blink
- การโต้ตอบกับ Next Paint (INP)
- ไลบรารี JavaScript
web-vitals - วัดเวลาการคำนวณรูปแบบใหม่ในฟิลด์
รูปภาพหลักจาก Unsplash โดย Markus Spiske