เพิ่มประสิทธิภาพความล่าช้าของอินพุต

ดูว่าความล่าช้าของอินพุตคืออะไร และเรียนรู้เทคนิคในการลดความล่าช้าดังกล่าวเพื่อให้การโต้ตอบเร็วขึ้น

Jeremy Wagner

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

ความล่าช้าของอินพุตคืออะไร

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

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

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

วิธีพิจารณาความล่าช้าของอินพุต

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

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

วิธีลดความล่าช้าในการป้อนข้อมูล

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

หลีกเลี่ยงตัวจับเวลาที่เกิดซ้ำซึ่งทำให้เกิดการทำงานของเทรดหลักมากเกินไป

ฟังก์ชันตัวจับเวลาที่ใช้กันโดยทั่วไปใน JavaScript มี 2 ฟังก์ชันที่อาจทำให้เกิดความล่าช้าในการป้อนข้อมูล ได้แก่ setTimeout และ setInterval ความแตกต่างระหว่างทั้ง 2 อย่างคือ setTimeout จะกำหนดเวลาให้ Callback ทำงานหลังจากเวลาที่ระบุ ในทางกลับกัน setInterval จะกำหนดเวลาให้ Callback ทำงานทุกๆ n มิลลิวินาทีอย่างต่อเนื่อง หรือจนกว่าตัวจับเวลาจะหยุดด้วย clearInterval

setTimeout ไม่ได้เป็นปัญหาในตัวมันเอง แต่จริงๆ แล้วอาจช่วยหลีกเลี่ยงงานที่ใช้เวลานานได้ อย่างไรก็ตาม การดำเนินการนี้ขึ้นอยู่กับเวลาที่เกิดการหมดเวลา และขึ้นอยู่กับว่าผู้ใช้พยายามโต้ตอบกับหน้าเว็บเมื่อ Callback การหมดเวลาทำงานหรือไม่

นอกจากนี้ setTimeout ยังสามารถทำงานแบบวนซ้ำหรือซ้ำๆ ได้ โดยจะทำงานคล้ายกับ setInterval มากกว่า แต่ไม่ควรกำหนดเวลาการวนซ้ำครั้งถัดไปจนกว่าการวนซ้ำครั้งก่อนหน้าจะเสร็จสมบูรณ์ แม้ว่าวิธีนี้จะหมายความว่าลูปจะยอมให้เทรดหลักทำงานทุกครั้งที่มีการเรียก setTimeout แต่คุณควรตรวจสอบว่า Callback ของลูปไม่ได้ทำงานมากเกินไป

setInterval เรียกใช้ Callback เป็นระยะๆ จึงมีแนวโน้มที่จะขัดขวางการโต้ตอบมากกว่า เนื่องจาก setInterval มีลักษณะที่เกิดซ้ำ จึงมีแนวโน้มสูงที่จะขัดขวางการโต้ตอบ ซึ่งจะเพิ่มความล่าช้าของอินพุตของการโต้ตอบ ต่างจากการเรียกใช้ setTimeout เพียงครั้งเดียวซึ่งเป็นการเรียกกลับแบบครั้งเดียวที่อาจขัดขวางการโต้ตอบของผู้ใช้

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

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

หลีกเลี่ยงงานที่ใช้เวลานาน

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

ภาพแสดงสิ่งที่เกิดขึ้นกับการโต้ตอบเมื่อใช้เวลานานเกินไปและเบราว์เซอร์ไม่สามารถตอบสนองต่อการโต้ตอบได้เร็วพอ เทียบกับเมื่อแบ่งงานที่ใช้เวลานานออกเป็นงานย่อยๆ

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

หมายเหตุ: การยอมให้ทำงานอื่นก่อนไม่ได้เป็นวิธีที่สมบูรณ์แบบ เนื่องจากงานจาก JavaScript ของบุคคลที่สามยังคงแทรกระหว่างงานของบุคคลที่หนึ่งได้หลังจากยอมให้ทำงานอื่นก่อน ซึ่งยังคงส่งผลให้เกิดความล่าช้าในการป้อนข้อมูลสำหรับการโต้ตอบในอนาคต และคุณจะต้องคำนึงถึงงานของบุคคลที่สามที่อาจทำงานเป็นระยะๆ ตามที่อธิบายไว้ในส่วนก่อนหน้า ซึ่ง API ของ scheduler.yield จะช่วยแก้ปัญหานี้ได้

ระมัดระวังการโต้ตอบที่ทับซ้อนกัน

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

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

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

• พิจารณาการดีเบานซ์ของอินพุตเพื่อจำกัดจำนวนครั้งที่ Callback ของเหตุการณ์จะทำงานในระยะเวลาที่กำหนด
• ใช้ AbortController เพื่อยกเลิกคำขอ fetch ขาออก เพื่อไม่ให้เทรดหลักเกิดความแออัดในการจัดการ Callback ของ fetch หมายเหตุ: พร็อพเพอร์ตี้ signal ของอินสแตนซ์ AbortController ยังใช้เพื่อยกเลิกเหตุการณ์ได้ด้วย

อีกสาเหตุหนึ่งที่ทำให้ความล่าช้าของอินพุตเพิ่มขึ้นเนื่องจากการโต้ตอบที่ทับซ้อนกันอาจเป็นภาพเคลื่อนไหวที่ใช้ทรัพยากรมาก โดยเฉพาะอย่างยิ่ง ภาพเคลื่อนไหวใน JavaScript อาจทำให้เกิดการเรียก requestAnimationFrame จำนวนมาก ซึ่งอาจขัดขวางการโต้ตอบของผู้ใช้ วิธีแก้ปัญหานี้คือใช้ภาพเคลื่อนไหว CSS ทุกครั้งที่เป็นไปได้เพื่อหลีกเลี่ยงการจัดคิวเฟรมภาพเคลื่อนไหวที่อาจมีค่าใช้จ่ายสูง แต่หากทำเช่นนี้ โปรดหลีกเลี่ยงภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite เพื่อให้ภาพเคลื่อนไหวทำงานบน GPU และเทรด Compositor เป็นหลัก ไม่ใช่ในเทรดหลัก

บทสรุป

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