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 ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন