เราเรียกใช้ Javascript ของเราได้กี่แบบแล้วมันต่างกันยังไง

พอดีว่า ได้ไปอ่านบทความนึงของ Addy osami เรื่อง Preload กับ Prefetch บน Browser แล้วรู้สึกว่าน่าสนใจมากซึ่งมีวิธีมากมายที่เราสามารถโหลด Script มาใช้ได้ ไม่ว่าจะเป็น Async Defer Preload Prefetch 
แต่ก่อนไปกันไกลเรามาเร่ิมที่อะไรง่ายๆกันดีกว่า โดยปกติแล้วเราจะเรียก script กันแบบปกติเลยก็คือ

<script type="text/javascript"src="main.js"></script>

ซึ่งถ้าใครรู้ปัญหาดีจะรู้ว่ามันแย่มากๆ เพราะว่าถ้าเกิด Script นั้น Block Render เวลา โหลด script มันจะโหลด DOM ให้จบก่อนแล้วค่อยโหลด Script ซึ่งมันจะกลายเป็นขั้นบันไดและจะไม่ยอม render ต่อถ้า โหลด javascript ไม่จบ

ตอนนี้ก็เลยมีวิธีการที่นิยมทำกันมากขึ้นก็คือ เรียกแบบ Async ซึ่งจะโหลด script และ parse DOM ในส่วนที่ใช้ด้วยกันมาพร้อมกัน แล้วค่อย Execute ที่เดียว จึงค่อย parse DOM ต่อ แต่ก็ยังเจอปัญหาว่า จะ parse DOM ต่อไปได้ ต้องรอ Javascript Execute ก่อนหน้าทำงานเสร็จก่อน

<script async type="text/javascript" src="main.js"></script>

ก็เลยมีวิธีเรียกอีกแบบคือ Defer ออกมา เพื่อโหลดมันทุกอย่างพร้อมกันแล้ว Execute ทีเดียวตอนจบ แต่ก็ไม่ใช่ว่าจะไม่มีปัญหา เพราะ Script ของเราต้องออกแบบมาให้ Defer ได้ เท่าที่ลองมาไม่ได้ง่ายเลย ยิ่งใช้ พวก Webpack นี่หาไม่ได้เลยว่าจะทำให้ Defer ยังไงหลักการง่ายๆคือ ตัว Script ต่อ Detect ว่า DOM parse เสร็จตอนไหน และให้ทำงานตอนนั้น

คราวนี้ในมาตรฐานใหม่ก็เลยมีการเปลี่ยนวิธีโหลด Script ให้ดีขึ้นเป็นการใช้ <link> โหลด script ได้เหมือนกันซึ่งตัว Browser จะจัด Priority เองโดยจะเรียกแบบนี้

<link rel="preload" as="script" href="main.js">

คราวนี้ ตรง attibute rel ก็มักจะใช้ กันอยู่สองแบบ คือ Preload กับ Prefetch ซึ่งต่างกันตรงที่
preload คือ Browser จะให้ความสำคัญกับการโหลด Script ที่จะถูกใช้ในหน้านั้นก่อนและทำการ cache เอาไว้ก่อนจะถูกเรียกใช้งาน
prefetch คือ Browser จะให้โหลด asset ทั้งที่ใช้ในหน้านี้และให้หน้าที่ user มีโอกาสกดต่อไปก่อน
จากที่ลองมา Preload จะค่อนข้างเร็วกว่า ส่วน Prefetch และ Async จะให้ผลไม่ต่างกันถ้า app ไม่ได้มีหลายหน้า

ถ้าใครจะลองเปลี่ยน asset เป็น แบบ Preload ก็ลองเล่นดูได้นะครับ เพราะเอาจริงๆเท่าที่ผมลอง เห็นได้เลยว่า asset โหลดเร็วขึ้น ประมาณ 30% — 40% แต่ติดอย่างเดียวคือ Browser ยังไม่ได้รองรับทุกตัว ถ้าใครอยากเอาไปใช้แบบไม่มีปัญหาแนะนำให้ลอง Polyfill ตัวนี้ครับ

ถ้าใครใช้ Webpack อยู่ ก็แค่ใช้ plugin preload-webpack-plugin ก็จะเปลี่ยนการ Load asset ทั้งหมด เป็น preload เลยไม่ต้องทำอะไรเพิ่ม ส่วนถ้าเป็น Next.js เท่าที่ทราบมาคือ จะทำการโหลด Script เป็น Preload ตั้งแต่แรกเหมือนกัน

ตอนนี้ก็เป็นทางเลือกนึงครับที่จะทำให้ เว็บของเราเร็วขึ้นอยากให้ไปลองกันดูครับแล้วได้ผลยังไงมาเล่าให้ฟังด้วยนะครับ