defer และ async เปลี่ยน เมื่อใด script ภายนอก <script> จะดาวน์โหลดและทำงานเทียบกับการแยกวิเคราะห์ HTML ทั้งสองอนุญาตให้ script ดาวน์โหลด แบบขนาน โดยไม่บล็อก parser — ความแตกต่างอยู่ที่ระยะเวลาการดำเนิน
html
defer และ async เปลี่ยน เมื่อใด script ภายนอก <script> จะดาวน์โหลดและทำงานเทียบกับการแยกวิเคราะห์ HTML ทั้งสองอนุญาตให้ script ดาวน์โหลด แบบขนาน โดยไม่บล็อก parser — ความแตกต่างอยู่ที่ระยะเวลาการดำเนิน
Normal: parse──stop──[download+exec]──parse──────── (slowest)
async: parse──────────────────exec──parse──────── (runs whenever it arrives)
defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded)
async | defer | |
|---|---|---|
| ดาวน์โหลด | แบบขนาน | แบบขนาน |
| ดำเนิน | ทันทีที่ดาวน์โหลด | หลังจากแยกวิเคราะห์ HTML เสร็จสิ้น |
| เก็บลำดับไว้หรือ? | ไม่ (ใครเสร็จเร็ว) | ใช่ (ลำดับเอกสาร) |
| บล็อก parser หรือ? | เพียงเล็กน้อยระหว่างการดำเนิน | ไม่เลย |
defer — สำหรับ scripts ที่สัมผัส DOM หรือขึ้นต่อกัน/ลำดับ (code แอปของคุณ) ทำงานหลังจากที่ DOM มีอยู่ ตามลำดับ ก่อน DOMContentLoadedasync — สำหรับ scripts ของบุคคลที่สาม อิสระ ที่ไม่ขึ้นอยู่กับ DOM หรือ scripts อื่น (การวิเคราะห์ โฆษณา) ลำดับไม่สำคัญ ทำงานทันที<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
หมายเหตุ: ทั้งสองใช้ได้กับ scripts ภายนอก เท่านั้น (src) ละเว้นใน scripts แบบ inline ES modules (type="module") จะถูกเลื่อนออกไปตามค่าเริ่มต้น
การใช้ defer/async ป้องกันไม่ให้ scripts บล็อกการแยกวิเคราะห์ HTML ซึ่งปรับปรุงประสิทธิการโหลดและ First Contentful Paint โดยตรง
การเลือกอันที่ถูกต้อง (defer สำหรับ code แอปที่มีลำดับและขึ้นต่อ DOM async สำหรับ scripts ของบุคคลที่สามอิสระ) หลีกเลี่ยงทั้งการโหลดช้าและ bug ที่ขึ้นต่อลำดับ
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค