বহিরাগত সিএসএস বনাম ইনলাইন শৈলীর পারফরম্যান্সের পার্থক্য?

Question 1

আমার এক বন্ধু বলেছিল যে হেড সেকশনে দেওয়া <div style=""></div>সংক্ষেপিত সিএসএস ফাইলের পরিবর্তে ব্যবহার করা link hrefকিছুটা পারফরম্যান্স বাড়িয়ে তোলে। এটা কি সত্যি?

Question 2

আপনার বন্ধুটি যে পারফরম্যান্স বুস্টের কথা উল্লেখ করেছে সেটি সম্ভবত সিএসএস ফাইল ব্যবহারের পারফরম্যান্স বৃদ্ধির পরিমাণের (অন্যান্য উপাদানগুলির মাধ্যমে) তুলনায় খুব তুচ্ছ।

শৈলীর বৈশিষ্ট্যটি ব্যবহার করে, ব্রাউজার কেবলমাত্র সেই নির্দিষ্ট উপাদানটির জন্য বিধি আঁকেন, যা এই ক্ষেত্রে <div>উপাদান। এটি সিএসএস ইঞ্জিনের জন্য অনুসন্ধান উপাদানগুলির পরিমাণ হ্রাস করে যা সিএসএস নির্বাচকের সাথে মিল রেখে (যেমন a.hoverবা #someContainer li) match

যাইহোক, উপাদান স্তরে স্টাইলিং স্থাপনের অর্থ হ'ল আপনি সিএসএস স্টাইলের নিয়মগুলি আলাদাভাবে ক্যাশে করতে পারবেন না। সাধারণত সিএসএস ফাইলগুলিতে শৈলী স্থাপন করা ক্যাচিংয়ের অনুমতি দেয়, সুতরাং আপনি যখন কোনও পৃষ্ঠা লোড করবেন তখন সার্ভার থেকে লোডের পরিমাণ হ্রাস পাবে।

উপাদান পর্যায়ে স্টাইলের নিয়মগুলি রাখার ফলে কী কী উপায়ে কীভাবে স্টাইল করা হয় তা আপনার ট্র্যাক হারাতে সক্ষম করবে। এটি কোনও নির্দিষ্ট উপাদানের পেইন্টিংয়ের পারফরম্যান্স বৃদ্ধিকে ব্যাকফায়ারও করতে পারে যেখানে আপনি একসাথে একাধিক উপাদান পুনরায় রঙ করতে পারেন। সিএসএস ফাইল ব্যবহার করা সিএসএসকে এইচটিএমএল থেকে পৃথক করে এবং এর ফলে আপনি আপনার শৈলীগুলি সঠিক এবং এটি পরে পরিবর্তন করা সহজ sure

অতএব আপনি যদি তুলনাটি দেখুন, আপনি দেখতে পাবেন যে সিএসএস ফাইল ব্যবহার করে উপাদান স্তরের স্টাইলিংয়ের চেয়ে অনেক বেশি সুবিধা রয়েছে।

আপনার যখন বাহ্যিক সিএসএস স্টাইলশিট ফাইল থাকে তখন ভুলে যাবেন না, আপনার ব্রাউজারটি সেই ফাইলটিকে ক্যাশে করতে পারে যা আপনার অ্যাপ্লিকেশন দক্ষতা বাড়িয়ে তুলবে!

Question 3

আপনি যদি ইনলাইন স্টাইল বনাম স্টাইল শীট ব্যবহার করেন তবে পৃষ্ঠাটি দ্রুত লোড হবে। কিছু ক্ষেত্রে অবশ্যই দ্রুত হওয়া উচিত।

আপনি যখন href ব্যবহার করে কোনও স্টাইল শীট ব্যবহার করেন তখন এটির জন্য সার্ভারের কাছে অন্য একটি অনুরোধ প্রয়োজন, তারপরে প্রতিক্রিয়ার পরে ফাইলটি বিশ্লেষণ করা। ইনলাইন শৈলীর সাথে এর কোনও কিছুই নেই, কেবল সরাসরি পার্সিং।

যদি ক্লায়েন্টের ধীরে ধীরে ইন্টারনেট থাকে তবে স্টাইল শিটটি সরবরাহ না হওয়া পর্যন্ত সেই একক অনুরোধটি পৃষ্ঠা শৈলী-কম রেখে খুব ধীর হতে পারে। আবার এটি যদি ইনলাইন হয় তবে কোনও বিলম্ব হবে না।

স্টাইল শিটগুলি ব্যবহার করার একমাত্র কারণ হ'ল সংগঠিত করা। এমন সময় আছে যখন তাদের প্রয়োজন হয় না, তাই ইনলাইন শৈলী বা ইন-ডকুমেন্ট স্টাইল শীটগুলি পর্যাপ্ত।

Question 4

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

Question 5

ঠিক আছে তবে এটি লিঙ্কযুক্ত বা বাহ্যিক স্টাইল শিটের কারণ তাই এটি ব্রাউজারে ক্যাশে করা যায় বিশেষত যখন আপনি সাইটের জন্য একাধিক পৃষ্ঠায় একই ডিভ ব্যবহার করছেন। এর অর্থ ব্রাউজারটি যখনই ব্রাউজার পৃষ্ঠাটি লোড করে ততবার কোডটি পুনরায় লোড করার পরিবর্তে কেবল একবার স্টাইল শীটটি লোড করতে হবে। এটি ক্লিনার কোডের জন্যও তৈরি করে যা কোনও পরিবর্তন বা ডিবাগিং সহজ করে।

Question 6

সত্য 'হ্যাঁ'

একটি বিশাল পার্থক্য আছে। বিশেষত যখন আপনি ব্যবহারকারী ইন্টারফেসটি স্বয়ংক্রিয় করছেন ting নিম্নলিখিত কোড ব্যবহার করে দেখুন। আমি IE10 এবং নোটপ্যাড বিকাশ করতে ব্যবহার করি। আমি যেতে যেতে শিখছি এবং পরীক্ষাগুলি করা এটি একটি সংক্ষিপ্ত সংস্করণ পরীক্ষা। (আপনার উত্তরটি দেখানোর জন্য কোডটি হ্রাস করার সাথে সাথে ত্রুটি থাকতে পারে)

আপনি যে চিত্রটি উল্লেখ করেছেন তাতে ক্লিক করুন এবং সতর্কতা বার্তা পড়ুন। ইঙ্গিত: সম্পাদনা (পরীক্ষা) করার আগে এই ফাইলটি আবার সম্পাদনা হিসাবে সংরক্ষণ করুন।

শুভকামনা, ডন

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>

Question 7

আমার মতে কোনও নির্দিষ্ট উত্তর নেই।

আপনার সার্ভার কোনও অনুরোধের (ডিএনএস সময়, সার্ভারের বিলম্বিতা ইত্যাদি বিবেচনা করে) সাড়া দেওয়ার চেয়ে সিএসএস বিষয়বস্তু আকার দ্রুত ডাউনলোড করলে একটি inline CSSদ্রুত লোড হবে ।external CSS file

সাধারণ আকারের সিএসএসের জন্য আমি সেগুলিকে পৃষ্ঠায় ইনলাইন করব, 15-20 কেবি এর বেশি কোনও কিছুর জন্য আমি সম্ভবত এটি একটি বাহ্যিক ফাইলে রেখেছি এবং নিশ্চিত হয়েছি এটি ক্যাশে যায় make

আমি নিশ্চিত যে আমি এখন মিস করছি এমন আরও অনেক বিবেচনা রয়েছে, তবে ইনলাইন বনাম বাহ্যিক কোনও নির্দিষ্ট উত্তর নেই।

Question 8

বাহ্যিক স্টাইল শীটগুলি ব্যবহার করা অবশ্যই একটি ভাল বিকল্প কারণ এটি ডিভ (গুলি) এর উপর আপনি যে স্টাইলটি প্রয়োগ করেছেন তা মনে রাখতে আপনাকে সহায়তা করবে। এটি পৃষ্ঠাটি লোড করার সময় হ্রাস করে কারণ HTML কোড যত কম তত দ্রুত লোড হবে।

তবে কিছু ক্ষেত্রে আপনাকে কোনও নির্দিষ্ট ডিভের কিছু সম্পত্তি পরিবর্তন করতে হতে পারে তবে ইনলাইন শৈলী সেরা বিকল্প। এবং সত্যই বললে, এক বা দুটি ইনলাইন স্টাইল পৃষ্ঠা লোড করার সময় কোনও পরিবর্তন আনবে না।

অভ্যন্তরীণ স্টাইল শীটের অন্য একটি বিকল্প রয়েছে তবে এটি তখনই ব্যবহার করা হয় যখন আপনি কোনও একক পৃষ্ঠার ওয়েবসাইট রাখবেন যেমন আপনি কোনও টেমপ্লেট তৈরি করছেন। এটি কারণ প্রতিটি HTML পৃষ্ঠায় আপনাকে সিএসএস লিখতে হবে

Question 9

আমি বাইরের সিএসএসের উপর ইনলাইন সিএসএস ব্যবহার করতে পছন্দ করি যেখানে প্রতিটি অন্যান্য উপাদান বা চিত্রের জন্য একাধিক ছোট সিএসএস ফাইল রয়েছে। প্রত্যেকটিতে কেবল 5-10 লাইন কোড সহ বেশ কয়েকটি সিএসএস ফাইল ডাউনলোড করার কোনও অর্থ নেই। যদি আপনার উপাদানটিতে হোভার, অ্যাক্টিভ, চেক হওয়া ইত্যাদি বৈশিষ্ট্য থাকে তবে আপনার কোনও বাহ্যিক সিএসএস ফাইল ব্যবহার করার কথা রয়েছে কারণ এটি আপনার বিকাশ প্রক্রিয়াটিকে জটিলতা এড়াতে পারে।