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") पूर्वनिर्धारितरूपमा deferred छन्।
defer/async प्रयोग गर्ने कुरा स्क्रिप्टहरूलाई HTML पार्सिङलाई रोकबाट रक्षा गर्छ, जसले लोड प्रदर्शन र First Contentful Paint को प्रत्यक्ष सुधार गर्छ।
सही छनोट गर्ने कुरा (defer क्रमबद्ध DOM-निर्भर अ्यापलिकेशन कोडको लागि, async अग्नि-र-बिर्सन तेस्रो-पक्षको स्क्रिप्टहरूको लागि) ढिला लोड र क्रम-निर्भरता बगहरू दुबै बेवास्ता गर्छ।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्