Javascript (Preload, Prefetch) ใช้ยังไง ทำไมต้องใช้ ช่วยอะไร ??

มีหลายวิธีที่เราสามารถใช้ในการปรับปรุงประสิทธิภาพเว็บ (Web Performance) หนึ่งในวิธีที่เราสามารถนำมาใช้ได้ คือการ โหลดเนื้อหาล่วงหน้า โหลด script หรือโหลดไฟล์ css เอาไว้แสดงผลล่วงหน้า เพื่อที่เราจะได้ไม่ต้องรอ เมื่อจำเป็นที่จะต้องใช้ เป็นไงละ ฟังดูดีใช่ไหมละ

ปกติเวลาเราโหลด JavaScript หรือ CSS Style เราจะใช้วิธีแบบด้านล่าง

แต่มันก็มีวิธีเพิ่มประสิทธิภาพง่ายๆ ในการโหลด JavaScript หรือ CSS Style ไว้ล่วงหน้า แค่เราเพิ่ม Attribute เข้าไปใน <link rel=“” > เองไม่ยากใช่ไหมละ โดย Attribute ในคำสั่ง rel นั้น Browser จะจัด Priority ในการ เรียกไฟล์ ให้กับเรา ไปดูกันว่าเขามีอะไรให้เราใช้บ้าง

ตรงนี้ Attribute ในคำสั่ง rel นั้น มันนิยมใช้กันอยู่ 2 แบบ ก็คือ

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

สำหรับคนที่เขียนเว็บด้วยภาษาสคริปต์ เช่น vue,angular ที่ใช้ Webpack อยู่ งงว่าจะจัดการยังไง เราสามารถใช้ Plugin preload-webpack-plugin ได้ครับ

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

จบแล้ว! ตบมือให้ด้วยน่ะ 5555

เทคนิคดีดี เรามีให้อีกเพียบ

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

ถ้าเพื่อนๆ คนไหนสนใจ แวะเข้ามาคุย มาเอ็นจอยกับพวกเราได้เสมอ

สนใจส่ง Resume มาที่ hr@23perspective.com แล้วบอกว่าเห็นมาจากบทความในนี้
หรือ กดดูรายละเอียดเพิ่มเติมที่นี่ คลิ๊ก

—

กลุ่มบริษัท ทู ทรี เปอร์สเปกทีฟ ประกอบด้วย 2 3 Perspective, Digital Groove, SHOPPENING และ สถาบัน U23 (School of Business Inventor)
ตั้งอยู่ ใจกลางอโศก https://goo.gl/maps/NUfRK4xRm342 สามารถเดินทางได้ทั้ง MRT(สุขุมวิท), BTS(อโศก), เรือ, Airport Link
บรรยากาศการทำงานเป็นกันเอง ไม่มีตอกบัตร

แล้วมาเป็นสมาชิก “ชาวก้อนเมฆ” กันนาาา ☁️☁️☁️

—

Reference

Preload, prefetch and other tags: what they do and when to use them

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