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