সিএসএস অসিনক্রোনলি লোড করবেন কীভাবে

Question 1

আমি 2 টি সিএসএস ফাইলগুলি অপসারণের চেষ্টা করছি যা আমার সাইটে ব্লক করা রোধ করে - সেগুলি গুগল পৃষ্ঠা স্পিড ইনসাইটে উপস্থিত হয়। আমি বিভিন্ন পদ্ধতি অনুসরণ করেছি, যার মধ্যে কোনওটিই সফল হয়নি। তবে, সম্প্রতি, আমি থিংক অ্যাসিঙ্ক সম্পর্কে একটি পোস্ট পেয়েছি এবং যখন আমি এই কোডটি প্রয়োগ করেছি: <script async src="https://third-party.com/resource.js"></script>এটি সমস্যাটি দূর করেছিল।

তবে প্রকাশের পরে পৃষ্ঠাটি স্টাইলিংটি হারিয়েছে। কী চলছে তা সম্পর্কে আমি খুব বেশি নিশ্চিত নই কারণ কোডটি কাজ করে তবে এটি আপলোডের পরে স্টাইলিংয়ের কাজ করে না। এটি দিয়ে আপনার সাহায্যের প্রশংসা করি। ধন্যবাদ

Question 2

একটি অ্যাসিনক্রোনাস স্টাইলশিট ডাউনলোডটি ট্রিগার করার কৌশলটি একটি <link>উপাদান ব্যবহার করা এবং মিডিয়া বৈশিষ্ট্যের জন্য একটি অবৈধ মান সেট করা (আমি মিডিয়া = "কিছুই না" ব্যবহার করি তবে কোনও মানই তা করবে)। যখন কোনও মিডিয়া ক্যোয়ারী মিথ্যাতে মূল্যায়ন করে, ব্রাউজারটি এখনও স্টাইলশিটটি ডাউনলোড করবে, তবে পৃষ্ঠাটি রেন্ডার করার আগে সামগ্রীটি উপলব্ধ হওয়ার অপেক্ষা রাখে না।

<link rel="stylesheet" href="css.css" media="none">

স্টাইলশীটটি ডাউনলোড শেষ করার পরে মিডিয়া অ্যাট্রিবিউটকে একটি বৈধ মান হিসাবে সেট করতে হবে তাই শৈলীর বিধি নথিতে প্রয়োগ করা হবে। মিডিয়া সম্পত্তি সবার কাছে স্যুইচ করার জন্য অনলোড ইভেন্টটি ব্যবহৃত হয়:

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">

সিএসএস লোড করার এই পদ্ধতিটি দর্শকদের কাছে স্ট্যান্ডার্ড পদ্ধতির চেয়ে দ্রুত ব্যবহারযোগ্য সামগ্রী সরবরাহ করবে content ক্রিটিকাল সিএসএস এখনও সাধারণ ব্লকিং পদ্ধতির সাথে পরিবেশন করা যেতে পারে (বা আপনি চূড়ান্ত পারফরম্যান্সের জন্য এটি ইনলাইন করতে পারেন) এবং অ-সমালোচনামূলক স্টাইলগুলি পার্সিং / রেন্ডারিং প্রক্রিয়ায় পরবর্তী সময়ে ডাউনলোড এবং প্রয়োগ করা যেতে পারে।

এই কৌশলটি জাভাস্ক্রিপ্ট ব্যবহার করে তবে জাভাস্ক্রিপ্টহীন ব্রাউজারগুলির জন্য <link>আপনি কোনও উপাদানের সমতুল্য ব্লকিং উপাদানগুলিকে <noscript>গুটিয়ে রাখতে পারবেন:

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"><noscript><link rel="stylesheet" href="css.css"></noscript>

আপনি www.itcha.edu.sv এ অপারেশনটি দেখতে পাবেন

Http://keithclark.co.uk/ এ উত্স

Question 3

2020 আপডেট

সহজ উত্তর (সম্পূর্ণ ব্রাউজার সমর্থন):

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

নথিভুক্ত উত্তর (preচ্ছিক প্রিলোডিং এবং স্ক্রিপ্ট-অক্ষম ফ্যালব্যাক সহ):

 <!-- Optional, if we want the stylesheet to get preloaded. Note that this line causes stylesheet to get downloaded, but not applied to the page. Use strategically — while preloading will push this resource up the priority list, it may cause more important resources to be pushed down the priority list. This may not be the desired effect for non-critical CSS, depending on other resources your app needs. -->
 <link rel="preload" href="style.css" as="style">

 <!-- Media type (print) doesn't match the current environment, so browser decides it's not that important and loads the stylesheet asynchronously (without delaying page rendering). On load, we change media type so that the stylesheet gets applied to screens. -->
 <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

 <!-- Fallback that only gets inserted when JavaScript is disabled, in which case we can't load CSS asynchronously. -->
 <noscript><link rel="stylesheet" href="style.css"></noscript>

প্রিলোডিং এবং অ্যাসিঙ্ক মিলিত:

আপনার যদি প্রিললোডড এবং অ্যাসিঙ্ক সিএসএসের প্রয়োজন হয় তবে এই সমাধানটি উপরের নথিভুক্ত উত্তর থেকে কেবল দুটি লাইন একত্রিত করে এটিকে সামান্য পরিষ্কার করে তোলে। তবে ফায়ারফক্সে তারা কাজ করবে না যতক্ষণ না তারা প্রিললোড কীওয়ার্ডটি সমর্থন করে । এবং আবারও, উপরের নথিভুক্ত উত্তরে যেমন বর্ণনা করা হয়েছে, প্রিলোডিং আসলে উপকারী হতে পারে না।

<link href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

অতিরিক্ত বিবেচনা:

নোট করুন, সাধারণভাবে, আপনি যদি সিএসএসকে তাত্পর্যপূর্ণভাবে লোড করতে চলেছেন তবে সাধারণত সমালোচনামূলক সিএসএস ইনলাইন করার পরামর্শ দেওয়া হয় , কারণ সিএসএস কোনও কারণে রেন্ডার-ব্লকিং রিসোর্স ।

তাদের অনেক অ্যাসিঙ্ক সিএসএস সমাধানের জন্য ফিলামেন্ট গ্রুপকে ক্রেডিট ।

Question 4

ব্যবহার `media="print"`এবং`onload`

ফিলামেন্ট গ্রুপটি সম্প্রতি (জুলাই 2019) সিএসএসকে কীভাবে সংবিধানে লোড করতে হবে সে সম্পর্কে তাদের সর্বশেষ সুপারিশ দিয়ে একটি নিবন্ধ প্রকাশ করেছে । যদিও তারা জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি লোডসিএসএসের বিকাশকারী , তারা আসলে এই সমাধানটির প্রস্তাব দেয় যার জন্য জাভাস্ক্রিপ্ট লাইব্রেরির প্রয়োজন নেই:

<link
  rel="stylesheet"
  href="/path/to/my.css"
  media="print"
  onload="this.media='all'; this.onload = null"
>

ব্যবহার media="print"ব্রাউজারকে এই স্টাইলশীটটি স্ক্রিনে ব্যবহার না করার জন্য, তবে মুদ্রণকে নির্দেশ করবে। ব্রাউজারগুলি প্রকৃতপক্ষে এই প্রিন্টের স্টাইলশিটগুলি ডাউনলোড করে তবে অ্যাসিনক্রোনাক্যালি যা আমরা চাই। আমরা একবারও স্টাইলশিটটি ডাউনলোড হয়ে গেলে এটি ব্যবহার করা উচিত এবং এর জন্য আমরা সেট করি onload="this.media='all'; this.onload = null"। (কিছু ব্রাউজার onloadদু'বার কল করবে , তার চারপাশে কাজ করার জন্য, আমাদের সেট করা দরকার this.onload = null)) আপনি যদি চান, আপনি <noscript>জাভাস্ক্রিপ্ট সক্ষম না করে এমন বিরল ব্যবহারকারীদের জন্য একটি ফ্যালব্যাক যোগ করতে পারেন ।

মূল নিবন্ধ যেমন আরো বিস্তারিত মধ্যে যায় চেয়ে আমি এখানে, একটি পঠিত মূল্য। Csswizardry.com এ এই নিবন্ধটিও পঠনযোগ্য।

Question 5

আপনি এটি অনেক উপায়ে পাওয়ার চেষ্টা করতে পারেন:

1. ব্যবহার media="bogus"এবং একটি <link>পাদদেশে

<head>
    <!-- unimportant nonsense -->
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    <!-- other unimportant nonsense, such as content -->
    <link rel="stylesheet" href="style.css">
</body>

2. পুরানো উপায়ে ডোম প্রবেশ করানো

<script type="text/javascript">
(function(){
  var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>

3. যদি আপনি প্লাগইন চেষ্টা করতে পারেন তবে আপনি লোডসিএসএস চেষ্টা করতে পারেন

<script>
  // include loadCSS here...
  function loadCSS( href, before, media ){ ... }
  // load a file
  loadCSS( "path/to/mystylesheet.css" );
</script>

Question 6

নীচের ফাংশনটি আপনি যে স্টাইলশীটগুলি অবিচ্ছিন্নভাবে লোড করতে চান তা নথিতে তৈরি এবং যুক্ত করবে। (তবে, আপনাকে ধন্যবাদ Event Listener, উইন্ডোর সমস্ত অন্যান্য সংস্থানগুলি লোড হওয়ার পরে এটি কেবল তখনই ঘটবে))

নিম্নলিখিত দেখুন:

function loadAsyncStyleSheets() {

    var asyncStyleSheets = [
    '/stylesheets/async-stylesheet-1.css',
    '/stylesheets/async-stylesheet-2.css'
    ];

    for (var i = 0; i < asyncStyleSheets.length; i++) {
        var link = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('href', asyncStyleSheets[i]);
        document.head.appendChild(link);
    }
}

window.addEventListener('load', loadAsyncStyleSheets, false);

Question 7

অ্যাসিঙ্ক সিএসএস লোডিং পদ্ধতির

সিএসএসকে তাত্পর্যপূর্ণভাবে লোড করার বিভিন্ন উপায় রয়েছে, তবে আপনার প্রত্যাশার তুলনায় কোনওটি এতটা সহজ নয়।

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

Question 8

আপনার যদি প্রোগ্রামগতভাবে এবং অবিচ্ছিন্নভাবে একটি সিএসএস লিঙ্ক লোড করতে হয়:

// https://www.filamentgroup.com/lab/load-css-simpler/
function loadCSS(href, position) {
  const link = document.createElement('link');
  link.media = 'print';
  link.rel = 'stylesheet';
  link.href = href;
  link.onload = () => { link.media = 'all'; };
  position.parentNode.insertBefore(link, position);
}

Question 9

আপনি যদি একটি কঠোর বিষয়বস্তু নিরাপত্তা নীতি যে অনুমতি দেয় না থাকে তাহলে @ ভ্লাদিমির-salguero এর উত্তর , আপনি (অনুগ্রহ করে স্ক্রিপ্ট নোট করা এই ব্যবহার করতে পারেন nonce):

<script nonce="(your nonce)" async>
$(document).ready(function() {
    $('link[media="none"]').each(function(a, t) {
        var n = $(this).attr("data-async"),
            i = $(this);
        void 0 !== n && !1 !== n && ("true" == n || n) && i.attr("media", "all")
    })
});
</script>

শুধু আপনার স্টাইলশীট রেফারেন্স নিচের টি যোগ করুন: media="none" data-async="true"। এখানে একটি উদাহরণ:

<link rel="stylesheet" href="../path/script.js" media="none" data-async="true" />

JQuery জন্য উদাহরণ:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" media="none" data-async="true" crossorigin="anonymous" /><noscript><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" /></noscript>

Question 10

উপরের সমস্তগুলি এখনই গুগল পেজস্পিড অন্তর্দৃষ্টিগুলিকে ইমপ্রেস করতে ব্যর্থ হওয়ায় দয়া করে উত্তরটি আপডেট করার যত্ন নিন।

গুগলের মতে আপনারা কীভাবে CSS এর অ্যাসিঙ্ক লোডিং বাস্তবায়ন করবেন

 < noscript id="deferred-styles" >
        < link rel="stylesheet" type="text/css" href="small.css"/ >
    < /noscript >

<script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>

Question 11

আমি ব্যবহার করার চেষ্টা করেছি:

<link rel="preload stylesheet" href="mystyles.css" as="style">

এটি জরিমানা কাজ করে, তবে এটি ক্রমবর্ধমান লেআউট শিফটও উত্থাপন করে কারণ যখন আমরা rel = "প্রিললোড" ব্যবহার করি তখন এটি কেবল CSS ডাউনলোড করে, তাত্ক্ষণিকভাবে প্রয়োগ হয় না।

উদাহরণস্বরূপ যখন ডোম লোড একটি তালিকায় উল, লি ট্যাগ থাকে, ডিফল্ট হিসাবে লি ট্যাগের আগে একটি বুলেট থাকে, তখন সিএসএস প্রয়োগ করে আমি তালিকাভুক্তির জন্য কাস্টম শৈলীতে এই বুলেটগুলি সরিয়ে ফেলি। সুতরাং, এখানে ক্রমবর্ধমান লেআউট শিফট ঘটছে।

এর কোন সমাধান আছে কি?

Question 12

rel="preload"এটি স্বাধীনভাবে ডাউনলোড করার জন্য ব্যবহার করুন , তারপরে onload="this.rel='stylesheet'"এটি স্টাইলশীটে প্রয়োগ করতে ব্যবহার করুন (স্টাইলশীটে as="style"এটি প্রয়োগ করা প্রয়োজন অন্যথায় এটি onloadকাজ করবে না)

<link rel="preload" as="style" type="text/css" href="mystyles.css" onload="this.rel='stylesheet'">

সিএসএস অসিনক্রোনলি লোড করবেন কীভাবে

2020 আপডেট

ব্যবহার media="print"এবংonload

অ্যাসিঙ্ক সিএসএস লোডিং পদ্ধতির

সিএসএসকে তাত্পর্যপূর্ণভাবে লোড করার বিভিন্ন উপায় রয়েছে, তবে আপনার প্রত্যাশার তুলনায় কোনওটি এতটা সহজ নয়।

ব্যবহার `media="print"`এবং`onload`