7 คอขวด JavaScript ที่ซ่อนอยู่ และวิธีแก้ไข

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

ผมได้ทำการวิเคราะห์ (profile) แอปพลิเคชันที่ใช้งานจริงกว่า 300 แอป และพบว่า 73% ของปัญหาด้านประสิทธิภาพมาจาก 7 สาเหตุเหล่านี้

  1. Layout thrashing สิ่งนี้เกิดขึ้นเมื่อคุณอ่านค่า property หนึ่ง เขียนค่าลงใน DOM แล้วกลับมาอ่านค่าอีกครั้ง ซึ่งจะบังคับให้เบราว์เซอร์ต้องคำนวณ layout ใหม่ซ้ำแล้วซ้ำเล่า
  1. Unbounded event listeners การเพิ่ม event listener โดยไม่มีการลบออกจะทำให้เกิด memory leaks ซึ่งเป็นปัญหาใหญ่ใน single-page apps
  1. การอ่าน DOM แบบ synchronous ใน loop การอ่านค่า offsetWidth หรือ getBoundingClientRect ภายใน loop จะกระตุ้นให้เกิด reflow อย่างต่อเนื่อง
  1. การขาดการทำ batching ด้วย requestAnimationFrame การเปลี่ยนแปลง DOM โดยตรงเมื่อเกิดเหตุการณ์ scroll หรือ resize จะทำงานบ่อยเกินไป ซึ่งทำให้เกิดอาการกระตุก (jank)
  1. ข้อมูล JSON.parse ที่มีขนาดใหญ่เกินไป การ parse ไฟล์ขนาดใหญ่จะไปบล็อก main thread ซึ่งทำให้เกิดอาการหน่วงในการตอบสนอง (input lag)
  1. การจับคู่ CSS selector ที่ซับซ้อน Selector ที่ซ้อนกันลึกๆ หรือมีความซับซ้อนจะทำให้การคำนวณสไตล์ (style recalculations) ช้าลง
  1. Bundle chunks ที่ซ้ำซ้อน Bundle ที่มีขนาดใหญ่และไม่ได้รับการปรับแต่งจะทำให้เสียเวลาในการรับส่งข้อมูล

วิธีวัดความคืบหน้าของคุณ:

การแก้ไขปัญหาเหล่านี้จะช่วยปรับปรุง Core Web Vitals ของคุณ โดยเฉพาะอย่างยิ่ง Largest Contentful Paint และ Interaction to Next Paint

ที่มา: https://dev.to/kui_luo/how-to-find-and-fix-7-hidden-performance-bottlenecks-in-your-javascript-code-ek5