শুধু যা করতে পারেন আপনি, কিন্তু আপনি একটি বিশেষ প্রচেষ্টা করতে হবে না যদি আপনি করতে চান না। :-)
scriptএইচটিএমএল বিশ্লেষণ করার সময় ব্রাউজারটি যখন ক্লাসিক ট্যাগের মুখোমুখি হয় , তখন এটি পার্সিং বন্ধ করে জাভাস্ক্রিপ্ট ইন্টারপ্রেটারের হাতে দেয়, যা স্ক্রিপ্টটি চালায়। স্ক্রিপ্ট কার্যকর হওয়া শেষ না হওয়া পর্যন্ত পার্সারটি চালিয়ে যায় না (কারণ স্ক্রিপ্টটি document.writeপার্সার হ্যান্ডেল করা উচিত আউটপুট মার্কআপে কল করতে পারে)।
এটি ডিফল্ট আচরণ, তবে স্ক্রিপ্টের প্রয়োগে বিলম্ব করার জন্য আপনার কাছে কয়েকটি বিকল্প রয়েছে:
জাভাস্ক্রিপ্ট মডিউল ব্যবহার করুন। এইচটিএমএল পুরোপুরি বিশ্লেষণ এবং প্রাথমিক DOM তৈরি না হওয়া পর্যন্ত একটি type="module"স্ক্রিপ্ট স্থগিত করা হয় । এটি মডিউলগুলি ব্যবহারের প্রাথমিক কারণ নয়, তবে এটির অন্যতম কারণ:
<script type="module" src="./my-code.js"></script>
<!-- Or -->
<script type="module">
</script>
কোডটি আনয়ন করা হবে (যদি এটি পৃথক হয়) এবং এইচটিএমএল বিশ্লেষণের সমান্তরালে পার্স করা হবে তবে HTML পার্সিং না হওয়া পর্যন্ত চালানো হবে না । (যদি আপনার মডিউল কোডটি তার নিজস্ব ফাইলের চেয়ে ইনলাইন হয় তবে HTML পার্সিং সম্পূর্ণ না হওয়া পর্যন্ত এটি পিছিয়েও যায় def)
২০১০ সালে আমি প্রথম এই উত্তরটি লেখার সময় এটি উপলব্ধ ছিল না, তবে এখানে ২০২০ সালে সমস্ত বড় আধুনিক ব্রাউজারগুলি মডিউলগুলিকে স্থানীয়ভাবে সমর্থন করে এবং যদি আপনাকে পুরানো ব্রাউজারগুলি সমর্থন করতে হয় তবে আপনি ওয়েবপ্যাক এবং রোলআপ.জেএস এর মতো বান্ডেলর ব্যবহার করতে পারেন।
deferএকটি ক্লাসিক স্ক্রিপ্ট ট্যাগে বৈশিষ্ট্যটি ব্যবহার করুন :
<script defer src="./my-code.js"></script>
মডিউলটির মতোই কোডটি my-code.jsএইচটিএমএল পার্সিংয়ের সমান্তরালে আনবে এবং পার্স করা হবে, তবে এইচটিএমএল বিশ্লেষণ না করা পর্যন্ত চালানো হবে না । তবে , deferইনলাইন স্ক্রিপ্ট সামগ্রীর সাথে কাজ করে না, কেবলমাত্র বাইরের ফাইলগুলির মাধ্যমে উল্লেখ করা হয় src।
আপনি যা চান তা আমি মনে করি না, তবে আপনি asyncব্রাউজারটিকে এইচটিএমএল পার্সিংয়ের সমান্তরালে জাভাস্ক্রিপ্ট কোড আনার জন্য এই বৈশিষ্ট্যটি ব্যবহার করতে পারেন তবে HTML পার্সিং সম্পূর্ণ না হলেও, যত তাড়াতাড়ি সম্ভব এটি চালান can । আপনি এটি কোনও type="module"ট্যাগে রাখতে পারেন বা deferক্লাসিক scriptট্যাগের পরিবর্তে এটি ব্যবহার করতে পারেন ।
scriptসমাপনী </body>ট্যাগের ঠিক আগে ডকুমেন্টের শেষে ট্যাগটি রাখুন :
<!doctype html>
<html>
<body>
<script type="module" src="./my-code.js"></script>
</body>
</html>
এইভাবে, কোডটি এর মুখোমুখি হওয়ার সাথে সাথে চালানো হলেও, এটির উপরে এইচটিএমএল দ্বারা সংজ্ঞায়িত সমস্ত উপাদান বিদ্যমান এবং এটি ব্যবহারের জন্য প্রস্তুত।
এটি ব্যবহৃত হত যে এটি কিছু ব্রাউজারগুলিতে অতিরিক্ত বিলম্ব ঘটায় কারণ তারা scriptট্যাগটি না আসা পর্যন্ত কোড আনতে শুরু করবে না , তবে আধুনিক ব্রাউজারগুলি স্ক্যান করে প্রিফেচিং শুরু করে। তবুও, এটি এই মুহুর্তে তৃতীয় পছন্দ, উভয় মডিউল এবং deferআরও ভাল বিকল্প।
বৈশিষ্ট একটি দরকারী ডায়াগ্রাম হয়েছে একটি কাঁচা দেখাচ্ছে scriptট্যাগ, defer, async, type="module", এবং type="module" asyncযখন জাভাস্ক্রিপ্ট কোড সংগৃহীত এবং চালানোর হয় সময়সীমাকে:
এখানে ডিফল্ট আচরণের একটি উদাহরণ, একটি কাঁচা scriptট্যাগ:
.found {
color: green;
}
<p>Paragraph 1</p>
<script>
if (typeof NodeList !== "undefined" && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
document.querySelectorAll("p").forEach(p => {
p.classList.add("found");
});
</script>
<p>Paragraph 2</p>
(এই কোডটির চারপাশের বিশদগুলির জন্য আমার উত্তর এখানে দেখুন See NodeList)
আপনি যখন এটি চালান, আপনি সবুজ "প্যারা অনুচ্ছেদ 1" দেখতে পাবেন তবে "অনুচ্ছেদ 2" টি কালো, কারণ স্ক্রিপ্টটি এইচটিএমএল বিশ্লেষণের সাথে সিঙ্ক্রোনিকভাবে চলছিল, এবং তাই এটি কেবল প্রথম অনুচ্ছেদটি খুঁজে পেয়েছিল, দ্বিতীয়টি নয়।
বিপরীতে, এখানে একটি type="module"স্ক্রিপ্ট রয়েছে:
.found {
color: green;
}
<p>Paragraph 1</p>
<script type="module">
document.querySelectorAll("p").forEach(p => {
p.classList.add("found");
});
</script>
<p>Paragraph 2</p>
তারা এখন কিভাবে সবুজ সবুজ দেখুন; এইচটিএমএল পার্সিং সম্পূর্ণ না হওয়া পর্যন্ত কোডটি চলেনি। এটি defer scriptবাহ্যিক সামগ্রী সহ একটি ক্ষেত্রে সত্য হবে (তবে ইনলাইন সামগ্রী নয়)।
(জন্য কোন প্রয়োজন ছিল NodeListচেক কোন আধুনিক ব্রাউজারে মডিউল ইতিমধ্যে সমর্থন আছে, কারণ forEachউপর NodeList।)
এই আধুনিক বিশ্বে DOMContentLoadedপ্রোটোটাইপজেএস, জিক্যুউরি, এক্সট্রিজএস, দোজো এবং অন্যান্য বেশিরভাগ লোকেরা পুনরায় (এবং এখনও সরবরাহ করে) প্রদত্ত "প্রস্তুত" বৈশিষ্ট্যটির আসল মূল্য নেই ; শুধু মডিউল বা ব্যবহার করুন defer। এমনকি আগের দিনগুলিতে, এগুলি ব্যবহার করার খুব বেশি কারণ ছিল না (এবং তারা প্রায়শই ভুল উপায়ে ব্যবহার করা হত, পুরো জিকুয়ের লাইব্রেরিটি লোড করার সময় পৃষ্ঠার উপস্থাপনাটি ধরে রাখা হয়েছিল কারণ ডকুমেন্টের পরিবর্তে এটি scriptছিল head), কিছু বিকাশকারী এখানে গুগল প্রথম দিকে ফ্ল্যাগ আপ। YUI সুপারিশের শেষে স্ক্রিপ্টগুলি bodyপুনরায় দিনটিতে রাখার কারণ হিসাবে এটি ছিল ।