লিঙ্ক rel='preload' দিয়ে আপনার সম্পদকে অগ্রাধিকার দেওয়া

আপনি কি কখনও ব্রাউজারকে একটি গুরুত্বপূর্ণ ফন্ট, স্ক্রিপ্ট বা অন্যান্য সংস্থান সম্পর্কে জানাতে চেয়েছেন যা পৃষ্ঠাটির onload ইভেন্টে বিলম্ব না করে পৃষ্ঠাটির প্রয়োজন হবে? <link rel="preload"> সঠিক আচরণ নির্ধারণের জন্য কয়েকটি মূল বৈশিষ্ট্য সহ একটি পরিচিত এইচটিএমএল উপাদান সিনট্যাক্স ব্যবহার করে ওয়েব ডেভেলপারদেরকে ঠিক এটি করার ক্ষমতা দেয়৷ এটি একটি ড্রাফ্ট স্ট্যান্ডার্ড যা Chrome 50 রিলিজের অংশ হিসেবে শিপিং করা হয়।

<link rel="preload"> এর মাধ্যমে লোড করা সংস্থানগুলি ব্রাউজারে স্থানীয়ভাবে সংরক্ষণ করা হয়, এবং যতক্ষণ না সেগুলি DOM, JavaScript, বা CSS-এ উল্লেখ করা হয় ততক্ষণ পর্যন্ত কার্যকরভাবে নিষ্ক্রিয় থাকে৷ উদাহরণস্বরূপ, এখানে একটি সম্ভাব্য ব্যবহারের ক্ষেত্রে একটি স্ক্রিপ্ট ফাইল আগে থেকে লোড করা হয়, কিন্তু অবিলম্বে কার্যকর করা হয় না, কারণ এটি যদি DOM-এ <script> ট্যাগের মাধ্যমে অন্তর্ভুক্ত করা হত।

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

তাহলে এখানে কি হচ্ছে? সেই উদাহরণে ব্যবহৃত href অ্যাট্রিবিউটটি ওয়েব ডেভেলপারদের কাছে পরিচিত হওয়া উচিত, কারণ এটি যেকোনো লিঙ্ক করা রিসোর্সের URL নির্দিষ্ট করতে ব্যবহৃত স্ট্যান্ডার্ড অ্যাট্রিবিউট।

as সম্ভবত আপনার কাছে নতুন, তবে এটি একটি <link> উপাদানের প্রেক্ষাপটে ব্যবহার করা হয়েছে যাতে ব্রাউজারকে প্রিলোডিং অনুরোধের গন্তব্য সম্পর্কে আরও প্রসঙ্গ দেয়। এই অতিরিক্ত তথ্য নিশ্চিত করে যে ব্রাউজার উপযুক্ত অনুরোধ শিরোনাম সেট করবে, অগ্রাধিকারের অনুরোধ করবে, সেইসাথে সঠিক সংস্থান প্রসঙ্গের জন্য যে কোনও প্রাসঙ্গিক বিষয়বস্তু নিরাপত্তা নীতি নির্দেশিকা প্রয়োগ করবে।

আরও (অনেক) শিখুন

Yoav Weiss <link rel="preload"> ব্যবহার করার জন্য নির্দিষ্ট গাইড লিখেছেন। আপনি যদি কৌতূহলী হন এবং আপনার নিজের পৃষ্ঠাগুলিতে এটি ব্যবহার করা শুরু করতে চান, তাহলে সুবিধা এবং সৃজনশীল ব্যবহারের ক্ষেত্রে আরও জানতে আমি তার নিবন্ধটি পড়ার পরামর্শ দেব৷

<link rel="preload"> <link rel="subresource"> স্থগিত করে, যার উল্লেখযোগ্য বাগ এবং ত্রুটি রয়েছে এবং যা Chrome ছাড়া অন্য ব্রাউজারে কখনও প্রয়োগ করা হয়নি৷ যেমন, Chrome 50 <link rel="subresource"> এর জন্য সমর্থন সরিয়ে দেয়