defer మరియు async బాహ్య <script> HTML పార్సింగ్కు సంబంధించి ఎప్పుడు డౌన్లోడ్ మరియు నిర్వహించబడుతుందో మారుస్తాయి. రెండూ స్క్రిప్ట్ను పార్సర్ను నిరోధించకుండా సమాంతరంగా డౌన్లోడ్ చేయుటకు అనుమతిస్తాయి — వ్యత్యాసం నిర్వహణ సమయంలో ఉంది.
html
defer మరియు async బాహ్య <script> HTML పార్సింగ్కు సంబంధించి ఎప్పుడు డౌన్లోడ్ మరియు నిర్వహించబడుతుందో మారుస్తాయి. రెండూ స్క్రిప్ట్ను పార్సర్ను నిరోధించకుండా సమాంతరంగా డౌన్లోడ్ చేయుటకు అనుమతిస్తాయి — వ్యత్యాసం నిర్వహణ సమయంలో ఉంది.
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 ను స్పర్శించే లేదా ఒకదానిపై మరొకటి/క్రమాన్ని బట్టి ఉండే స్క్రిప్ట్ల కోసం (మీ యాప్ కోడ్). DOM ఉన్న తర్వాత, క్రమానికి, DOMContentLoaded కు ముందు నిర్వహిస్తాయి.async — స్వతంత్ర థర్డ్ పార్టీ స్క్రిప్ట్ల కోసం DOM లేదా ఇతర స్క్రిప్ట్లపై ఆధారపడని (విశ్లేషణ, ప్రకటనలు). క్రమం ముఖ్యం కాదు, వాటిని వెంటనే నిర్వహించండి.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
గమనిక: రెండూ బాహ్య స్క్రిప్ట్లకు (src) మాత్రమే వర్తిస్తాయి; ఇన్లైన్ స్క్రిప్ట్లలో వాటిని విస్మరించారు. ES మాడ్యూల్లు (type="module") డిఫాల్ట్గా వాయిదా పడతాయి.
defer/async ఉపయోగించడం వల్ల స్క్రిప్ట్లు HTML పార్సింగ్ను నిరోధించకుండా ఉంటుంది, ఇది నేరుగా లోడ్ పెర్ఫారెన్స్ మరియు First Contentful Paint ను మెరుగుపరుస్తుంది.
సరైనదాన్ని ఎంచుకోవడం (defer ఆర్డర్ చేయిన DOM-ఆధారిత యాప్ కోడ్ కోసం, async స్వతంత్ర థర్డ్ పార్టీ స్క్రిప్ట్ల కోసం) నెమ్మదిగా లోడ్లు మరియు క్రమ-ఆధారపడటం బగ్లను నివారిస్తుంది.