defer — รอ HTML ก่อนแล้วค่อยรัน

ทำไมต้องสนใจลำดับ

ถ้าสคริปต์ใน head รันทันที บางครั้ง HTML ด้านล่างยังไม่พร้อม (บทหลังที่แตะ DOM จะเจอชัด)

<head>
  <script src="js/main.js" defer></script>
</head>

defer ทำอะไร

• ดาวน์โหลดไฟล์ JS แบบไม่บล็อกการอ่าน HTML ทั้งหมด

• รันหลังเอกสารถูก parse คร่าว ๆ แล้ว

• เหมาะกับไฟล์ภายนอกที่อ้างอิงด้วย src

จำสั้น ๆ: defer = “โหลดพร้อมกันได้ แต่รันทีหลังเอกสาร” — ใช้กับสคริปต์ภายนอกใน head ได้สบายใจ