Asynchronous Javascript ดีจริงหรือ ?

ก่อนจะเล่าว่า Asynchronous มีข้อดีข้อเสียอย่างไร ผมขออธิบายความหมายของ Asynchronous ก่อนละกันครับ คำว่า Asynchronous นี้ มีหลายๆ คน ยังเข้าใจความหมายไม่ถูกต้องนักครับ

โดยปกติแล้ว หากมีการเรียกใช้ external script ในหน้าเว็บ Web Browser จะต้องดาวน์โหลด script นั้นๆ ก่อน พอดาวน์โหลดเสร็จจึงค่อย execute script นั้นๆ ซึ่งการ execute script ใดๆ โดยปกติจะเป็นแบบ Synchronous คือจะทำแบบ Sequential หรือบนลงล่าง และจะต้องรอให้ script ด้านบน execute เสร็จก่อน จึงจะ execute script ต่อไปครับ

รู้จักกับ async Attribute

สำหรับ html5 นั้น มี attribute async เพิ่มเข้ามาครับ เพื่อให้เราสามารถระบุได้ว่า external script นี้ จะ execute แบบ Asynchronous ทันทีที่ script โหลดมาเสร็จ ซึ่งวิธีใช้ async ก็ทำได้ง่าย แค่เพิ่ม attribute async เข้าไปใน <script> ดังตัวอย่างต่อไปนี้ครับ

• <script async>
• <script async=”async”>
• <script async=””>

สรุปแล้ว การ execute external script ก็จะมี 3 รูปแบบดังนี้ครับ

• แบบปกติ เมื่อโหลด script เสร็จ จะ execute ทันที และระหว่าง execute จะหยุดการ render หน้าเว็บที่เหลือ
• แบบ defer=”defer” เมื่อ external script ถูกโหลดเรียบร้อยแล้ว จะยังไม่ execute แต่จะรอให้หน้าเว็บ render ให้เสร็จทั้งหมดก่อน จึงค่อย execute
• แบบ async=”async” เมื่อ external script ถูกโหลดเรียบร้อยแล้ว จะ execute ทันที ในขณะที่หน้าเว็บยังสามารถ render ต่อไปได้ โดยไม่ถูกขัดขวาง

เมื่อไรควรใช้ Asynchronous

หลายๆ คน อาจสงสัยว่าในเมื่อ การ execute แบบ Asynchronous มันทำให้หน้าเว็บเราแสดงผลได้ไวกว่า เพราะไม่ถูก Block จากการ execute script แล้วยังงี้ เราใส่ async=”async” ใน <script> ตลอดเลยดีมั้ย? คำตอบคือ ไม่ดีครับ Asynchronous นั้น มีทั้งข้อดีและข้อเสีย ข้อดีผมได้กล่าวไปแล้ว ส่วนข้อเสียคือ มันอาจจะทำให้การพัฒนาลำบากยิ่งขึ้น เนื่องจากการ execute ของ script ไม่ได้เป็นไปตามลำดับที่เราใส่ไว้ครับ script ตัวล่าง อาจ execute ก่อน script ตัวบนก็เป็นได้ ดังนั้น หากเราคิดจะใช้ Asynchronous เราต้อง Test ระบบให้ดี ต้องคิดเผื่อในเคสที่ลำดับการ execute ของ script ที่เปลี่ยนไป จะมีผลทำให้เกิด bug หรือไม่ด้วยครับ