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 fire-and-forget მესამე მხარის სკრიპტებისთვის) ზღუბ თავიდან აცილებს ნელი დატვირთვასა და თანმიმდევრობის დამოკიდებულების ხარვეზებს.
IT გასაუბრების კითხვების ბიბლიოთეკა დეტალური პასუხებით — Junior-დან Senior-მდე.
შემოწირულობა