defer ਅਤੇ async ਇਹ ਬਦਲਦੇ ਹਨ ਕਿ ਕਦੋਂ ਇੱਕ ਬਾਹਰੀ <script> HTML parsing ਦੇ ਸਬੰਧ ਵਿੱਚ ਡਾਊਨਲੋਡ ਅਤੇ execute ਹੁੰਦਾ ਹੈ। ਦੋਵੇਂ script ਨੂੰ ਸਮਾਨਾਂਤਰ ਵਿੱਚ ਡਾਊਨਲੋਡ ਕਰਨ ਦਿੰਦੇ ਹਨ ਬਿਨਾਂ parser ਨੂੰ ਰੋਕੇ — ਅੰਤਰ execution ਟਾਈਮਿੰਗ ਵਿੱਚ ਹੈ।
html
defer ਅਤੇ async ਇਹ ਬਦਲਦੇ ਹਨ ਕਿ ਕਦੋਂ ਇੱਕ ਬਾਹਰੀ <script> HTML parsing ਦੇ ਸਬੰਧ ਵਿੱਚ ਡਾਊਨਲੋਡ ਅਤੇ execute ਹੁੰਦਾ ਹੈ। ਦੋਵੇਂ script ਨੂੰ ਸਮਾਨਾਂਤਰ ਵਿੱਚ ਡਾਊਨਲੋਡ ਕਰਨ ਦਿੰਦੇ ਹਨ ਬਿਨਾਂ parser ਨੂੰ ਰੋਕੇ — ਅੰਤਰ execution ਟਾਈਮਿੰਗ ਵਿੱਚ ਹੈ।
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 | |
|---|---|---|
| ਡਾਊਨਲੋਡ | ਸਮਾਨਾਂਤਰ | ਸਮਾਨਾਂਤਰ |
| Execute ਕਰਦਾ ਹੈ | ਜਿਵੇਂ ਹੀ ਡਾਊਨਲੋਡ ਹੋਵੇ | HTML ਪੂਰੀ ਤਰ੍ਹਾਂ parse ਹੋਣ ਤੋਂ ਬਾਅਦ |
| ਕ੍ਰਮ ਸੁਰੱਖਿਅਤ? | ਨਹੀਂ (ਜੋ ਪਹਿਲਾਂ ਮੁਕਾ) | ਹਾਂ (ਡਾਕੂਮੈਂਟ ਕ੍ਰਮ) |
| Parser ਨੂੰ ਰੋਕਦਾ ਹੈ? | ਸਿਰਫ exec ਦੌਰਾਨ ਥੋੜ੍ਹਾ | ਕਦੇ ਨਹੀਂ |
defer — scripts ਲਈ ਜੋ DOM ਨੂੰ ਛੂੰਦੇ ਹਨ ਜਾਂ ਇੱਕ ਦੂਜੇ/ਕ੍ਰਮ ਤੇ ਨਿਰਭਰ ਹਨ (ਤੁਹਾਡਾ app ਕੋਡ)। ਉਹ DOM ਮੌਜੂਦ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਕ੍ਰਮ ਵਿੱਚ, DOMContentLoaded ਤੋਂ ਪਹਿਲਾਂ ਚਲਦੇ ਹਨ।async — ਸੁਤੰਤਰ third-party scripts ਲਈ ਜੋ DOM ਜਾਂ ਹੋਰ scripts ਤੇ ਨਿਰਭਰ ਨਹੀਂ ਹਨ (analytics, ਵਿਜ਼ਾ)। ਕ੍ਰਮ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ, ਉਨ੍ਹਾਂ ਨੂੰ ASAP ਚਲਾਓ।<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
ਨੋਟ: ਦੋਵੇਂ ਸਿਰਫ external scripts (src) ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ; ਉਹ inline scripts ਤੇ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ES modules (type="module") default ਵਿੱਚ deferred ਹਨ।
defer/async ਵਰਤਣਾ scripts ਨੂੰ HTML parsing ਨੂੰ ਰੋਕਣ ਤੋਂ ਰੋਕਦਾ ਹੈ, ਜੋ ਸਿੱਧਾ load performance ਅਤੇ First Contentful Paint ਨੂੰ ਬਿਹਤਰ ਕਰਦਾ ਹੈ।
ਸਹੀ ਚੋਣ ਕਰਨਾ (defer ਕ੍ਰਮਬੱਧ DOM-ਨਿਰਭਰ app ਕੋਡ ਲਈ, async fire-and-forget third-party scripts ਲਈ) ਸਟਾ ਲੋਡ ਅਤੇ order-dependency bugs ਦੋਵੇਂ ਤੋਂ ਬਚਾਓ।