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

Addy Osmani

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

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

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

สิ่งที่ถือเป็นงานที่ใช้เวลานาน

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

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

มีงานที่ใช้เวลานานในหน้าของฉันที่อาจทำให้การโต้ตอบล่าช้าไหม

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

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

วิธีใช้เครื่องมือแสดงข้อมูลเป็นภาพแบบใหม่

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

สาเหตุของงานที่ใช้เวลานานของฉันคืออะไร

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

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

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

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

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