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 શોધ-અને-ભૂલજાઓ તૃતીય-પક્ષની સ્ક્રિપ્ટ્સ માટે) ધીમુ લોડ્સ અને ક્રમ-આધારિત બગ્સ બંને ટાળે છે.