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 โดยทำตามขั้นตอนต่อไปนี้
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- ไปที่แท็บประสิทธิภาพ
- เลือกช่องทำเครื่องหมายสถิติตัวเลือก (ไม่บังคับ)
- คลิกบันทึก
- โต้ตอบกับหน้าเว็บ
เมื่อหยุดบันทึก คุณจะเห็นบางอย่างเหมือนรูปภาพต่อไปนี้
![เครื่องมือสำหรับนักพัฒนาเว็บแสดงการคำนวณรูปแบบ](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/devtools-showing-style-ca-2cc07caa90f6e.png?authuser=6&hl=th)
แถบที่ด้านบนเป็นแผนภูมิขนาดเล็กที่มีเปลวไฟแสดงเฟรมตาม อย่างที่สอง ยิ่งกิจกรรมอยู่ใกล้กับด้านล่างของแถบมากเท่าไหร่ ก็ยิ่งรวดเร็ว มีการวาดภาพเฟรมต่างๆ โดยเบราว์เซอร์ ถ้าคุณเห็นแผนภูมิเปลวไฟพุ่งสูงขึ้น ที่ด้านบนสุดโดยมีแถบสีแดงอยู่ด้านบน แสดงว่าคุณมีงานที่ก่อให้เกิด ที่ใช้เวลานาน
![การซูมเข้าเปิดอยู่
บริเวณที่พบปัญหาใน Chrome DevTools ในสรุปกิจกรรมของปุ่ม
แผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/zooming-on-trouble-area-16c06721266c6.png?authuser=6&hl=th)
เฟรมที่ใช้เวลานานในระหว่างการโต้ตอบ เช่น การเลื่อน จะคุ้มค่ากว่า ลักษณะ หากคุณเห็นบล็อกสีม่วงขนาดใหญ่ ให้ซูมเข้าไปที่กิจกรรมแล้วเลือก ที่ทำงานที่มีป้ายกำกับ คำนวณรูปแบบใหม่ เพื่อรับข้อมูลเพิ่มเติมเกี่ยวกับ การคำนวณรูปแบบใหม่ที่มีราคาแพง
![การรับ
รายละเอียดของการคำนวณรูปแบบที่ใช้เวลานาน รวมถึงข้อมูลสำคัญ เช่น
เป็นจำนวนองค์ประกอบที่ได้รับผลกระทบจากงานคำนวณรูปแบบใหม่](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/getting-details-long-ru-995bd5d17169.png?authuser=6&hl=th)
การคลิกกิจกรรมจะแสดงสแต็กการเรียกใช้ การแสดงผลเกิดจาก การโต้ตอบของผู้ใช้ โมเดลนี้จะเรียก JavaScript ที่ทริกเกอร์การเปลี่ยนแปลงรูปแบบ นอกจากนี้ยังแสดงจำนวนองค์ประกอบที่การเปลี่ยนแปลงมีผล ซึ่งมีมากกว่า 900 รายการ องค์ประกอบในกรณีนี้ และเวลาที่ใช้ในการคำนวณรูปแบบ คุณใช้ เพื่อเริ่มหาจุดแก้ไขในโค้ดของคุณ
หากคุณเลือกช่องทำเครื่องหมายสถิติตัวเลือก ในการตั้งค่า Performance Panel ก่อนทำการติดตาม แล้วจึงคลิกด้านล่าง ในแผงการติดตามจะมีแท็บเพิ่มเติมที่ใช้ชื่อเดียวกัน
![ตารางสถิติตัวเลือก CSS ตามที่ปรากฏ
จะปรากฏในแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ตารางนี้ประกอบด้วย
ส่วนหัวและข้อมูลที่เกี่ยวข้องสำหรับสิ่งต่างๆ เช่น เวลาที่ผ่านไป การจับคู่
ความพยายาม, จำนวนการจับคู่, เปอร์เซ็นต์ของโหนดที่ไม่ตรงกัน, ตัวเลือก และ
ของสไตล์ชีตก็ได้](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/selector-stats.png?authuser=6&hl=th)
แผงนี้จะให้ข้อมูลที่มีประโยชน์เกี่ยวกับราคาที่เกี่ยวข้องของแต่ละตัวเลือก ซึ่งช่วยให้ คุณจะระบุตัวเลือก CSS ราคาแพงได้
ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบเกี่ยวกับสถิติตัวเลือก CSS
วัดต้นทุนการคำนวณรูปแบบอีกครั้งสำหรับผู้ใช้จริง
ถ้าคุณอยากทราบว่าการคำนวณรูปแบบจะใช้เวลานานเท่าใด
ผู้ใช้จริงของเว็บไซต์ Long Animation Frames API
จะให้เครื่องมือที่จำเป็นในการทำเช่นนั้น ข้อมูลจาก API นี้ถูกเพิ่มลงใน
web-vitals
ไลบรารี JavaScript
รวมถึงเวลาคำนวณสไตล์ใหม่
หากคุณสงสัยว่าความล่าช้าในการนำเสนอของการโต้ตอบคือ ผู้ร่วมให้ข้อมูลใน INP ของหน้าเว็บ คุณจะต้องทราบว่าเวลา ใช้เวลาคำนวณรูปแบบบนหน้าเว็บใหม่ สำหรับข้อมูลเพิ่มเติม โปรดอ่านเกี่ยวกับ วิธีวัดเวลาการคำนวณรูปแบบใหม่ในฟิลด์
แหล่งข้อมูล
- สถิติตัวเลือกในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- การทำให้รูปแบบใช้งานไม่ได้ใน Blink
- การโต้ตอบกับ Next Paint (INP)
- ไลบรารี JavaScript
web-vitals
- วัดเวลาการคำนวณรูปแบบใหม่ในฟิลด์
รูปภาพหลักจาก Unsplash โดย Markus Spiske