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