কম্পিউটার টিউটোরিয়াল

HTML Defer Attribute ব্যবহার: স্ক্রিপ্ট লোডিং অপ্টিমাইজেশন

HTML-এ একটি অ্যাট্রিবিউট সাধারণত একটি অ্যাট্রিবিউট নাম এবং একটি অ্যাট্রিবিউট ভ্যালু নিয়ে গঠিত হয়, যেমন অ্যাঙ্কর এলিমেন্ট উদাহরণে।

তবে, কখনও কখনও ভ্যালু (বিহেভিয়ার) অ্যাট্রিবিউট নামের মধ্যেই বিল্ট-ইন থাকে।

উদাহরণস্বরূপ, HTML <script> এলিমেন্ট মডিফাই করার জন্য ব্যবহৃত defer অ্যাট্রিবিউট:

<script defer src="app.js"></script>

লক্ষ্য করুন, defer অ্যাট্রিবিউটে কোনো অ্যাসাইনমেন্ট অপারেটর (=) বা ভ্যালু নেই, কারণ এর বিহেভিয়ার বিল্ট-ইন।

defer হলো একটি তथাকথিত বুলিয়ান অ্যাট্রিবিউট। বুলিয়ান ব্যবহার হয় এমন ডেটা টাইপের জন্য যার শুধু দুটি মান থাকতে পারে: true বা false (অথবা enable/disable)।

আসুন defer অ্যাট্রিবিউটটি নিকট থেকে দেখি।

এই <script> এলিমেন্ট, বिना defer অ্যাট্রিবিউটের, ব্রাউজার লোড করা होते ही app.js ভ্যালু থেকে JavaScript কোড এক্সিকিউট করবে:

<script src="app.js"></script>

ডিফল্টভাবে, HTML ডকুমেন্ট উপরে থেকে নিচে, এক লাইন করে পার্স (পড়া) হয়। এর মানে, আপনি যদি ডকুমেন্টের উপরে কোনো JavaScript রাখেন, তবে বাকি ডকুমেন্ট পার্স হওয়া শেষ হওয়ার আগে সেটি এক্সিকিউট হবে।

এইটি script এলিমেন্টের ডিফল্ট বিহেভিয়ার।

কিন্তু আপনি <script> এলিমেন্টে defer যোগ করলে সেই ডিফল্ট বিহেভিয়ার ডিজেবল হয়:

<script defer src="app.js"></script>

এখন, JavaScript কোড পুরো পেজ লোড হওয়া পর্যন্ত এক্সিকিউট হবে না।

শাব্দিক অর্থে, defer মানে বিলম্বিত করা/পেছনে ফেলা/অপেক্ষা করা।

আর একবার ব্যাখ্যা করি:

  • defer ছাড়া, JavaScript লোড হওয়ার সাথে সাথে এক্সিকিউট হয়।
  • সহ defer, JavaScript পুরো HTML পেজ লোড হওয়া পর্যন্ত অপেক্ষা করে।

যদি অ্যাট্রিবিউটগুলো আপনাকে বিভ্রান্ত করে, চিন্তা নেই, প্র্যাকটিসে লাগালে এটি ১০ গুণ বেশি বোঝা যাবে।

  1. HTML-এ formaction অ্যাট্রিবিউট কীভাবে ব্যবহার করবেন?

  2. HTML-এ required অ্যাট্রিবিউট কীভাবে ব্যবহার করবেন?

  3. HTML-এ মাল্টিপল অ্যাট্রিবিউটের ব্যবহার

  4. HTML-এ লিস্ট অ্যাট্রিবিউটের ব্যবহার