คุณสมบัติ defer ของ HTML <script>
การประกาศและการใช้งาน
defer คุณสมบัตินี้เป็นคุณสมบัติประเภท boolean
ถ้าได้ตั้งค่า defer คุณสมบัติ จะทำให้สคริปต์ดาวน์โหลดพร้อมกับการแสดงหน้าเว็บ และจะปฏิบัติการหลังจากการแสดงหน้าเว็บเสร็จ
จำเป็นต้องใส่defer คุณสมบัตินี้มีผลเฉพาะสคริปต์ภายนอก (มีเฉพาะเมื่อมี คุณสมบัติ src เมื่อมีความจำเป็นนั้นเท่านั้น)
จำเป็นต้องใส่สามารถปฏิบัติการสคริปต์ภายนอกด้วยวิธีหลายราย
- ถ้าได้ตั้งค่า async: สคริปต์จะดาวน์โหลดพร้อมกับการแสดงหน้าเว็บ และจะปฏิบัติการทันทีเมื่อมีความสามารถ (ก่อนการแสดงหน้าเว็บเสร็จ)
- ถ้าได้ตั้งค่า defer (แต่ไม่มี async): สคริปต์จะดาวน์โหลดพร้อมกับการแสดงหน้าเว็บ และจะปฏิบัติการหลังจากการแสดงหน้าเว็บเสร็จ
- ถ้าไม่มี async และ defer ด้วย: สคริปต์จะถูกดาวน์โหลดและปฏิบัติการทันที และจะบรรลุการปฏิบัติการหน้าเว็บจนกว่าสคริปต์จะปฏิบัติการเสร็จ
ตัวอย่าง
สคริปต์จะดาวน์โหลดพร้อมกับการประกาศหน้าเว็บ และจะทำงานหลังจากหน้าเว็บเสร็จการประกาศ:
<script src="demo_defer.js" defer></script>
วิธีการใช้
<script defer>
ลดการปฏิบัติงานสคริปต์
คุณสามารถควบคุมการทำงานของสคริปต์ด้วยคุณสมบัติ async และ defer คุณสมบัติ defer บอกเบราวเซอร์ว่าต้องรอจนกระทั่งหน้าเว็บเสร็จการโหลดและประกาศก่อนที่จะปฏิบัติงานสคริปต์
เมื่อเบราวเซอร์เผชิญกับองค์ประกอบ script ที่มีคุณสมบัติ defer มันจะลดหลังจากที่ทั้งหมดองค์ประกอบของเอกสาร HTML ได้ถูกประกาศแล้ว
นี่คือผลลัพธ์ที่เหมือนกันกับการเพิ่ม script ไปที่ท้ายของหน้าเว็บ:
<body> ... ... ... ... ... ... <script src="demo.js"></script> </body>
การรองรับโปรแกรมบราวเซอร์
ตัวเลขในตารางนี้ระบุว่าอะไรคือเวอร์ชั่นแรกที่รองรับคุณสมบัตินี้
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 8.0 | 10.0 | 3.5 | 5.0 | 15.0 |
