งาน JavaScript ที่ใช้เวลานานทำให้เวลาในการตอบสนองของคุณล่าช้าหรือไม่

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

Addy Osmani

งานที่ใช้เวลานานคือโค้ด JavaScript ที่ผูกขาดเทรดหลักเป็นเวลานาน ทำให้ UI "ค้าง"

ขณะโหลดหน้าเว็บ งานระยะยาวอาจทำให้เธรดหลักทำงานอยู่และทำให้หน้าเว็บไม่ตอบสนองต่อข้อมูลจากผู้ใช้ แม้ว่าหน้าเว็บจะดูเหมือนพร้อมใช้งานก็ตาม การคลิกและการแตะมักไม่ทํางานเนื่องจากฟีเจอร์อินเทอร์แอกทีฟ เช่น โปรแกรมรับฟังเหตุการณ์และตัวแฮนเดิลการคลิก ยังไม่ได้แนบกับองค์ประกอบ UI ด้วยเหตุนี้ งานที่มีระยะเวลานานจึงอาจทําให้เวลาในการตอบสนองเพิ่มขึ้นอย่างมาก

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สามารถแสดงภาพงานระยะยาวได้ ซึ่งช่วยให้เห็นงานที่จำเป็นต้องเพิ่มประสิทธิภาพได้ง่ายขึ้น

งานที่ใช้เวลานานคืออะไร

งานที่ใช้เวลานานและต้องใช้ CPU มากเกิดจากงานที่ซับซ้อนซึ่งใช้เวลานานกว่า 50 ms รูปแบบ RAIL แนะนำให้คุณประมวลผลเหตุการณ์อินพุตของผู้ใช้ใน 50 ms เพื่อให้การตอบสนองปรากฏภายใน 100 ms และรักษาการเชื่อมต่อระหว่างการดำเนินการและการตอบสนอง

ประเด็นสําคัญ: แม้ว่าโมเดล RAIL จะแนะนําให้แสดงการตอบสนองที่มองเห็นได้ต่ออินพุตของผู้ใช้ภายใน 100 มิลลิวินาที แต่เกณฑ์ของเมตริก Interaction to Next Paint (INP) อนุญาตให้ใช้ระยะเวลาสูงสุด 200 มิลลิวินาทีเพื่อตั้งค่าความคาดหวังที่ทำได้จริงมากขึ้น โดยเฉพาะสําหรับอุปกรณ์ที่ช้ากว่า

มีงานที่มีระยะเวลานานในหน้าเว็บที่อาจทำให้การโต้ตอบล่าช้าหรือไม่

ก่อนหน้านี้ คุณจะต้องค้นหา "บล็อกสีเหลืองยาว" ของสคริปต์ด้วยตัวเองซึ่งมีความยาวมากกว่า 50 มิลลิวินาทีใน Chrome DevTools หรือใช้ Long Tasks API เพื่อหาว่างานใดที่ทำให้การโต้ตอบล่าช้า

ตอนนี้ DevTools แสดงภาพงานระยะยาวเพื่อช่วยให้คุณทำเวิร์กโฟลว์การตรวจสอบประสิทธิภาพได้ง่ายขึ้น งาน (แสดงเป็นสีเทา) จะมีธงสีแดงหากเป็นงานระยะยาว

วิธีใช้เครื่องมือแสดงภาพใหม่

1. บันทึกการติดตามในแผงประสิทธิภาพขณะโหลดหน้าเว็บ
2. มองหาธงสีแดงในมุมมองชุดข้อความหลัก ตอนนี้คุณควรเห็นงานที่มีการทำเครื่องหมายเป็นสีเทาและมีป้ายกำกับว่างาน
3. วางเคอร์เซอร์เหนือแถบสีเทา คุณจะเห็นกล่องโต้ตอบที่แสดงระยะเวลาของงานและระบุว่างานนั้นถือเป็นงานระยะยาวหรือไม่

อะไรเป็นสาเหตุของงานระยะยาว

หากต้องการดูสาเหตุของงานที่ใช้เวลานาน ให้เลือกแถบงานสีเทา ในลิ้นชักด้านล่าง ให้เลือกจากล่างขึ้นบนและจัดกลุ่มตามกิจกรรม ซึ่งจะช่วยให้คุณเห็นว่ากิจกรรมใดมีส่วนทำให้เกิดงานเสร็จช้าที่สุด (โดยรวม) ในตัวอย่างต่อไปนี้ สาเหตุของความล่าช้าดูเหมือนจะเป็นชุดการค้นหา DOM ที่เสียค่าใช้จ่าย

วิธีการทั่วไปในการเพิ่มประสิทธิภาพงานระยะยาวมีอะไรบ้าง

สคริปต์ขนาดใหญ่มักเป็นสาเหตุหลักของงานที่ใช้เวลานาน ลองแยกออกเป็นหลายกลุ่ม นอกจากนี้ ให้ตรวจสอบสคริปต์ของบุคคลที่สามด้วย ซึ่งอาจมีงานระยะยาวที่ทําให้เนื้อหาหลักเป็นแบบอินเทอร์แอกทีฟล่าช้า

แบ่งงานทั้งหมดออกเป็นกลุ่มๆ ที่ทำงานได้ภายในเวลาไม่ถึง 50 มิลลิวินาที แล้วเรียกใช้กลุ่มเหล่านี้ในตำแหน่งและเวลาที่ถูกต้อง ตำแหน่งที่เหมาะสมสำหรับบางรายการอาจอยู่นอกเธรดหลักใน Service Worker ดูคำแนะนำในการแบ่งงานที่มีระยะเวลานานได้ที่หัวข้อเพิ่มประสิทธิภาพงานที่มีระยะเวลานานและรอจนกว่าจะมีงานเร่งด่วนของ Phil Walton

หน้าเว็บต้องตอบสนองได้ดี การลดจำนวนงานที่ใช้เวลานานเป็นวิธีที่ยอดเยี่ยมในการช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่น่าพึงพอใจเมื่อเข้าชมเว็บไซต์ ดูข้อมูลเพิ่มเติมเกี่ยวกับงานที่ใช้เวลานานได้ที่เมตริกประสิทธิภาพที่ให้ความสำคัญกับผู้ใช้เป็นหลัก