Website Speed Up

⌘K
  2. Home
  4. Website Speed Up
  6. Html
  8. async

async

Thought for 2 secondsThought for 2 secondsThe user wants a detailed explanation in Bangla about using scripts without async or defer, and the benefits of using async and defer. They don’t need information about preload, lazy loading, or dynamic loading. I’ll provide a comprehensive explanation with practical examples, focusing on the behavior and benefits of async and defer attributes for script loading.

ঠিক আছে, আমি আপনাকে স্ক্রিপ্ট লোডিং সম্পর্কে বিস্তারিত ব্যাখ্যা দেব, বিশেষ করে async এবং defer অ্যাট্রিবিউট নিয়ে। আসুন শুরু করি:

১. সাধারণ স্ক্রিপ্ট লোডিং (async বা defer ছাড়া):

যখন আপনি কোনো অ্যাট্রিবিউট ছাড়া স্ক্রিপ্ট ব্যবহার করেন:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>সাধারণ স্ক্রিপ্ট লোডিং</title>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
</head>
<body>
    <h1>সাধারণ স্ক্রিপ্ট লোডিং উদাহরণ</h1>
</body>
</html>

কীভাবে কাজ করে:

  1. HTML পার্সিং শুরু হয়।
  2. <script> ট্যাগে পৌঁছালে, HTML পার্সিং বন্ধ হয়ে যায়।
  3. স্ক্রিপ্ট ডাউনলোড হয়।
  4. স্ক্রিপ্ট এক্সিকিউট হয়।
  5. HTML পার্সিং আবার শুরু হয়।
  6. পরের স্ক্রিপ্টের জন্য ২-৫ ধাপ পুনরাবৃত্তি হয়।

সুবিধা:

  • স্ক্রিপ্টগুলো নিশ্চিতভাবে ক্রমানুসারে এক্সিকিউট হয়।
  • DOM এলিমেন্টগুলো নিশ্চিতভাবে লোড হওয়ার আগেই স্ক্রিপ্ট চালু হয়।

অসুবিধা:

  • পেজ লোড হতে বেশি সময় লাগে।
  • ব্যবহারকারী অনেকক্ষণ সাদা স্ক্রিন দেখতে পারে।

২. async অ্যাট্রিবিউট ব্যবহার:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Async স্ক্রিপ্ট লোডিং</title>
    <script async src="script1.js"></script>
    <script async src="script2.js"></script>
</head>
<body>
    <h1>Async স্ক্রিপ্ট লোডিং উদাহরণ</h1>
</body>
</html>

কীভাবে কাজ করে:

  1. HTML পার্সিং শুরু হয়।
  2. স্ক্রিপ্টগুলো পটভূমিতে ডাউনলোড হতে থাকে, HTML পার্সিং চলতে থাকে।
  3. যে স্ক্রিপ্ট আগে ডাউনলোড হয়ে যায়, সেটি তখনই এক্সিকিউট হয়, HTML পার্সিং বন্ধ করে।
  4. স্ক্রিপ্ট এক্সিকিউশন শেষ হলে HTML পার্সিং আবার শুরু হয়।

সুবিধা:

  • পেজ লোড হওয়ার সময় কমে।
  • ছোট স্ক্রিপ্টগুলো দ্রুত এক্সিকিউট হয়।

অসুবিধা:

  • স্ক্রিপ্টগুলোর এক্সিকিউশন ক্রম নিশ্চিত নয়।
  • DOM পুরোপুরি লোড হওয়ার আগেই স্ক্রিপ্ট চালু হতে পারে।

৩. defer অ্যাট্রিবিউট ব্যবহার:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Defer স্ক্রিপ্ট লোডিং</title>
    <script defer src="script1.js"></script>
    <script defer src="script2.js"></script>
</head>
<body>
    <h1>Defer স্ক্রিপ্ট লোডিং উদাহরণ</h1>
</body>
</html>

কীভাবে কাজ করে:

  1. HTML পার্সিং শুরু হয়।
  2. স্ক্রিপ্টগুলো পটভূমিতে ডাউনলোড হতে থাকে, HTML পার্সিং চলতে থাকে।
  3. HTML পার্সিং সম্পূর্ণ হয়।
  4. স্ক্রিপ্টগুলো ক্রমানুসারে এক্সিকিউট হয়।

সুবিধা:

  • পেজ লোড হওয়ার সময় কমে।
  • স্ক্রিপ্টগুলো নিশ্চিতভাবে ক্রমানুসারে এক্সিকিউট হয়।
  • DOM পুরোপুরি লোড হওয়ার পর স্ক্রিপ্ট চালু হয়।

অসুবিধা:

  • যদি কোনো স্ক্রিপ্ট DOM লোড হওয়ার আগে কিছু করতে চায়, তা সম্ভব নয়।

বিস্তারিত উদাহরণ:

আসুন একটি প্র্যাকটিক্যাল উদাহরণ দেখি যেখানে আমরা তিনটি পদ্ধতি ব্যবহার করে দেখব:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>স্ক্রিপ্ট লোডিং তুলনা</title>
    <script>
        console.log("1. সাধারণ স্ক্রিপ্ট: HEAD এ");
    </script>
    <script async src="async-script.js"></script>
    <script defer src="defer-script.js"></script>
</head>
<body>
    <h1>স্ক্রিপ্ট লোডিং তুলনা</h1>
    <script>
        console.log("2. সাধারণ স্ক্রিপ্ট: BODY তে");
    </script>
</body>
</html>

async-script.js এর কন্টেন্ট:

console.log("3. Async স্ক্রিপ্ট চালু হচ্ছে");

defer-script.js এর কন্টেন্ট:

console.log("4. Defer স্ক্রিপ্ট চালু হচ্ছে");

সম্ভাব্য আউটপুট:

1. সাধারণ স্ক্রিপ্ট: HEAD এ
2. সাধারণ স্ক্রিপ্ট: BODY তে
3. Async স্ক্রিপ্ট চালু হচ্ছে
4. Defer স্ক্রিপ্ট চালু হচ্ছে

বিস্তারিত ব্যাখ্যা:

  1. সাধারণ স্ক্রিপ্ট (HEAD এ): এটি সবার আগে চালু হয়। এটি HTML পার্সিং বন্ধ করে এবং পেজ লোড হওয়া বিলম্বিত করে।
  2. সাধারণ স্ক্রিপ্ট (BODY তে): এটি HTML পার্সিং শেষ হওয়ার আগে চালু হয়, কিন্তু HEAD এর স্ক্রিপ্টের পরে।
  3. Async স্ক্রিপ্ট: এটি যখনই ডাউনলোড হয়ে যায়, তখনই চালু হয়। এর স্থান নিশ্চিত নয় – এটি 2 নম্বরের আগে বা পরে হতে পারে।
  4. Defer স্ক্রিপ্ট: এটি সবার শেষে চালু হয়, HTML পার্সিং সম্পূর্ণ হওয়ার পর।

কখন কোনটি ব্যবহার করবেন:

  1. সাধারণ (অ্যাট্রিবিউট ছাড়া):
  2. যখন স্ক্রিপ্টটি অবশ্যই আগে লোড হওয়া প্রয়োজন।
  3. যখন স্ক্রিপ্টটি DOM মডিফাই করে এবং পেজ রেন্ডার হওয়ার আগে তা করা প্রয়োজন।
  4. async:
  5. যখন স্ক্রিপ্টগুলো একে অপরের উপর নির্ভরশীল নয়।
  6. যখন স্ক্রিপ্টগুলো যত তাড়াতাড়ি সম্ভব চালু হওয়া প্রয়োজন।
  7. উদাহরণ: অ্যানালিটিক্স স্ক্রিপ্ট।
  8. defer:
  9. যখন স্ক্রিপ্টগুলো DOM এর উপর নির্ভর করে।
  10. যখন স্ক্রিপ্টগুলোর ক্রম গুরুত্বপূর্ণ।
  11. যখন আপনি চান স্ক্রিপ্টগুলো পেজ লোড হওয়ার পরে চালু হোক।

উপসংহার:

  • সাধারণ স্ক্রিপ্ট ব্যবহার করুন যখন স্ক্রিপ্টটি অবশ্যই আগে লোড হওয়া প্রয়োজন, কিন্তু এটি পেজ লোড হওয়ার সময় বাড়িয়ে দেয়।
  • async ব্যবহার করুন যখন স্ক্রিপ্টগুলো স্বাধীন এবং যত তাড়াতাড়ি সম্ভব চালু হওয়া প্রয়োজন।
  • defer ব্যবহার করুন যখন স্ক্রিপ্টগুলো DOM এর উপর নির্ভর করে এবং ক্রম গুরুত্বপূর্ণ।

সর্বোত্তম অনুশীলন হল defer ব্যবহার করা, যদি না আপনার স্ক্রিপ্টের জন্য বিশেষ কোনো প্রয়োজন থাকে। এটি পেজ লোড হওয়ার সময় কমায় এবং নিশ্চিত করে যে আপনার স্ক্রিপ্ট সঠিক ক্রমে এবং DOM প্রস্তুত হওয়ার পর চালু হবে।

How can we help?