เพิ่มประสิทธิภาพการเรียกใช้ JavaScript

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

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

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

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

สรุป

• หลีกเลี่ยงการใช้ setTimeout หรือ setInterval สำหรับการอัปเดตภาพ ให้ใช้ requestAnimationFrame แทนเสมอ
• ย้าย JavaScript ที่ทำงานเป็นเวลานานออกจากเทรดหลักไปยัง Web Worker
• ใช้ไมโครแทสก์เพื่อทําการเปลี่ยนแปลง DOM ในหลายเฟรม
• ใช้ไทม์ไลน์และเครื่องมือวิเคราะห์ JavaScript ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อประเมินผลกระทบของ JavaScript

ใช้ requestAnimationFrame สำหรับการเปลี่ยนแปลงที่มองเห็นได้

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

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

เฟรมเวิร์กหรือตัวอย่างเพลงอาจใช้ setTimeout หรือ setInterval เพื่อทําการเปลี่ยนแปลงภาพ เช่น ภาพเคลื่อนไหว แต่ปัญหาของวิธีนี้คือ Callback จะทํางานเมื่อใดเวลาหนึ่งในเฟรม ซึ่งอาจเป็นตอนท้ายเลยก็ได้ และมักจะส่งผลให้เราพลาดเฟรมหนึ่งๆ ซึ่งทําให้ภาพกระตุก