defer மற்றும் async ஆகியவை ஒரு வெளிப்புற <script> HTML பதிலீடுக்கு ஒப்பாக எப்போது பதிவிறக்கம் செய்யப்பட்டு செயல்படுத்தப்படுகிறது என்பதை மாற்றுகின்றன. இரண்டும் script ஐ பாரசரர் தடைசெய்யாமல் இணையாக பதிவிறக்கம் செய்ய அனுமதிக்கிறது — வேறுபாடு செயல்படுத்தும் நேரத்தில் உள்ளது.
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 முழுவதும் பதிலீடு செய்யப்பட்ட பின் |
| வரிசை பாதுகாக்கப்பட்டுள்ளதா? | இல்லை (யார் முதலில் முடிக்கிறார்) | ஆம் (ஆவணத்தின் வரிசை) |
| பாரசரர் தடைசெய்வா? | செயல்படுத்தும் போது சுருக்கமாக | ஒருபோதும் இல்லை |
defer — DOM ஐ தொடும் அல்லது ஒருவருக்கொருவர்/வரிசையை சார்ந்திருக்கும் scripts க்கு (உங்கள் app குறியீடு). DOM இருக்கும் பிறகு, வரிசையில், DOMContentLoaded க்கு முன் உடனடியாக செயல்படுத்துகின்றன.async — சுயாதீன மூன்றாம் পक்ষ scripts க்கு அவை DOM அல்லது மற்ற scripts ஐ சார்ந்திருக்காத (அனலிட்டிக்ஸ், விளம்பரங்கள்). வரிசை முக்கியமில்லை, அவற்றை உடனடியாக செயல்படுத்தவும்.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
குறிப்பு: இரண்டும் வெளிப்புற scripts (src) க்கு மட்டுமே பொருந்துகிறது; அவை inline scripts ல் புறக்கணிக்கப்படுகின்றன. ES modules (type="module") முன்னிருப்பாக ஒতுக்கப்பட்டுள்ளன.
defer/async பயன்படுத்துவது scripts HTML பதிலீடுவதிலிருந்து தடைசெய்கிறது, இது நேரடியாக சுமை செயல்திறன் மற்றும் First Contentful Paint ஐ மேம்படுத்துகிறது.
சரியான ஒன்றைத் தேர்ந்தெடுப்பது (defer ஆணை DOM-சார்ந்த app குறியீட்டுக்கு, async சுயாதீன மூன்றாம் பக்ష scripts க்கு) மெதுவான சுமைகள் மற்றும் வரிசை-சார்பு பிழைகள் இரண்டையும் தவிர்க்கிறது.