যখন কোনও ব্রাউজার কোনও <script>ট্যাগ দিয়ে একটি ওয়েবসাইট লোড করে তখন কী হয় :
- এইচটিএমএল পৃষ্ঠা আনুন (উদাহরণস্বরূপ index.html)
- এইচটিএমএল বিশ্লেষণ শুরু করুন
- পার্সার
<script>একটি বাহ্যিক স্ক্রিপ্ট ফাইল উল্লেখ করে একটি ট্যাগের মুখোমুখি ।
- ব্রাউজারটি স্ক্রিপ্ট ফাইলটির জন্য অনুরোধ করে। এদিকে, পার্সারটি আপনার পৃষ্ঠায় থাকা অন্য এইচটিএমএলকে পার্স করা বন্ধ করে এবং থামায়।
- কিছু সময় পরে স্ক্রিপ্টটি ডাউনলোড হয় এবং পরে সম্পাদিত হয়।
- বিশ্লেষক এইচটিএমএল ডকুমেন্টের বিশ্লেষণ অবিরত করে।
পদক্ষেপ # 4 খারাপ ব্যবহারকারীর অভিজ্ঞতার কারণ। আপনার ওয়েবসাইটটি সমস্ত স্ক্রিপ্টগুলি ডাউনলোড না করা পর্যন্ত লোড করা বন্ধ করে দেয়। যদি এমন একটি জিনিস থাকে যা ব্যবহারকারীরা ঘৃণা করে তবে এটি ওয়েবসাইট লোড হওয়ার জন্য অপেক্ষা করছে।
কেন এমনটা হয়?
যে কোনও স্ক্রিপ্ট তার নিজস্ব এইচটিএমএল document.write()বা অন্যান্য ডিওএম ম্যানিপুলেশনগুলির মাধ্যমে sertোকাতে পারে। এটি বোঝায় যে স্ক্রিপ্টটি ডাউনলোড করা এবং চালিত হওয়া পর্যন্ত পার্সারকে অপেক্ষা করতে হবে যতক্ষণ না এটি বাকী নথির নিরাপদে বিশ্লেষণ করতে পারে। সর্বোপরি, স্ক্রিপ্টটি নথিতে তার নিজস্ব এইচটিএমএল haveোকাতে পারত ।
যাইহোক, বেশিরভাগ জাভাস্ক্রিপ্ট বিকাশকারী ডকুমেন্টটি লোড করার সময় আর ডিওএম চালিত করে না । পরিবর্তে, দস্তাবেজটি সংশোধন করার আগে এটি লোড না হওয়া পর্যন্ত তারা অপেক্ষা করে। উদাহরণ স্বরূপ:
<!-- index.html -->
<html>
<head>
<title>My Page</title>
<script src="my-script.js"></script>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
</html>
javascript:
// my-script.js
document.addEventListener("DOMContentLoaded", function() {
// this function runs when the DOM is ready, i.e. when the document has been parsed
document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});
যেহেতু আপনার ব্রাউজারটি আমার স্ক্রিপ্টটি জানে না j ডকুমেন্টটি ডাউনলোড এবং সম্পাদন না করা অবধি ডকুমেন্টটি সংশোধন করবে না, পার্সার পার্সিং বন্ধ করে দেয়।
পুরানো প্রস্তাবনা
এই সমস্যাটি সমাধান করার জন্য পুরানো পদ্ধতিটি ছিল <script>আপনার নীচে ট্যাগগুলি <body>লাগানো, কারণ এটি নিশ্চিত করে যে পার্সারটি শেষ অবধি অবরুদ্ধ নয়।
এই পদ্ধতির নিজস্ব সমস্যা রয়েছে: সম্পূর্ণ ডকুমেন্টটি বিশ্লেষণ না করা পর্যন্ত ব্রাউজারটি স্ক্রিপ্টগুলি ডাউনলোড শুরু করতে পারে না। বড় স্ক্রিপ্ট এবং স্টাইলশিটযুক্ত বৃহত ওয়েবসাইটগুলির জন্য, স্ক্রিপ্টটি যত তাড়াতাড়ি সম্ভব ডাউনলোড করতে সক্ষম হওয়া পারফরম্যান্সের জন্য অত্যন্ত গুরুত্বপূর্ণ। যদি আপনার ওয়েবসাইটটি 2 সেকেন্ডের মধ্যে লোড না হয়, লোকেরা অন্য ওয়েবসাইটে যাবে।
একটি অনুকূল সমাধানে, ব্রাউজারটি আপনার স্ক্রিপ্টগুলি যত তাড়াতাড়ি সম্ভব ডাউনলোড করা শুরু করবে, একই সময়ে আপনার বাকী নথির বিশ্লেষণ করবে।
আধুনিক পদ্ধতি
আজ, ব্রাউজারগুলি স্ক্রিপ্টগুলিতে asyncএবং deferবৈশিষ্ট্যগুলিকে সমর্থন করে । এই বৈশিষ্ট্যগুলি ব্রাউজারকে স্ক্রিপ্টগুলি ডাউনলোড করার সময় পার্সিং চালিয়ে যাওয়া নিরাপদ বলে।
ASYNC
<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>
অ্যাসিঙ্ক বৈশিষ্ট্যযুক্ত স্ক্রিপ্টগুলি অ্যাসিঙ্ক্রোনালি কার্যকর করা হয়। এর অর্থ স্ক্রিপ্টটি ডাউনলোড হওয়ার সাথে সাথেই ব্রাউজারটিকে অবরুদ্ধ না করেই এটি কার্যকর করা হবে।
এর থেকে বোঝা যায় যে স্ক্রিপ্ট 2 এ স্ক্রিপ্ট 1 এর আগে ডাউনলোড করা এবং সম্পাদন করা সম্ভব।
Http://caniuse.com/#feat=script-async অনুসারে , সমস্ত ব্রাউজারের 97.78% এটি সমর্থন করে।
মুলতবি করা
<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>
ডিফার অ্যাট্রিবিউটযুক্ত স্ক্রিপ্টগুলি ক্রমে কার্যকর করা হয় (যেমন প্রথম স্ক্রিপ্ট 1, তারপরে স্ক্রিপ্ট 2)। এটি ব্রাউজারটিকেও ব্লক করে না।
অ্যাসিঙ্ক স্ক্রিপ্টগুলির বিপরীতে, পুরো ডকুমেন্টটি লোড হওয়ার পরে ডিফার স্ক্রিপ্টগুলি কেবল কার্যকর করা হয়।
Http://caniuse.com/#feat=script-defer অনুসারে , সমস্ত ব্রাউজারের 97.79% এটি সমর্থন করে। 98.06% এটি অন্তত আংশিকভাবে সমর্থন করে।
ব্রাউজারের সামঞ্জস্যের উপর একটি গুরুত্বপূর্ণ নোট: কিছু পরিস্থিতিতে আই <= 9 স্থগিত স্ক্রিপ্টগুলি ক্রম থেকে কার্যকর করতে পারে। আপনি ঐ ব্রাউজার সমর্থন করার জন্য প্রয়োজন হয়, তাহলে দয়া করে পড়ুন এই প্রথম!
উপসংহার
বর্তমানের অত্যাধুনিকটি হ'ল <head>ট্যাগটিতে স্ক্রিপ্ট স্থাপন করা asyncবা deferবৈশিষ্ট্যগুলি ব্যবহার করা। এটি আপনার ব্রাউজারটিকে অবরুদ্ধ না করে আপনার স্ক্রিপ্টগুলি asap ডাউনলোড করার অনুমতি দেয়।
ভাল কথাটি হ'ল আপনার ওয়েবসাইটটি এখনও 2% ব্রাউজারগুলিতে সঠিকভাবে লোড করা উচিত যা অন্যান্য 98% গতি বাড়ানোর সময় এই বৈশিষ্ট্যগুলিকে সমর্থন করে না।