बाहरी सीएसएस बनाम इनलाइन शैली के प्रदर्शन का अंतर?

Question

मेरे एक मित्र ने कहा कि हेड सेक्शन में <div style=""></div>रखी गई सीएसएस फाइल के बजाय link hrefकुछ प्रदर्शन को बढ़ावा देता है। क्या यह सच है?

Comments

जहाँ तक मुझे पता है, वे (लगभग) एक ही हैं, लेकिन मैं इसे सत्यापित नहीं कर सकता।

— रात्रि

यह कुछ प्रकाश डाल सकता है: mathiasbynens.be/notes/inline-vs-separate-file

— सुधीर बस्ताकोटी

इनलाइन शैलियों वाले रखरखाव बुरे सपने से निपटने के लिए एक महत्वपूर्ण प्रदर्शन को बढ़ावा देना होगा। अब तक मैंने थॉट का कोई इविक्शन नहीं देखा है।

— स्टीवेक्स

IE के पुराने संस्करणों के लिए प्रदर्शन को बढ़ावा देना बहुत महत्वपूर्ण है। मैंने देखा है कि HTML टेबल सीएसएस स्टाइल के साथ गोंद की तरह व्यवहार करते हैं।

— जोनाथन

Answer 1

सीएसएस फ़ाइल का उपयोग करते हुए प्रदर्शन को बढ़ावा देने की मात्रा (अन्य कारकों के माध्यम से) की तुलना में आपके मित्र ने जो प्रदर्शन किया है वह संभवतः बहुत तुच्छ है।

शैली विशेषता का उपयोग करते हुए, ब्राउज़र केवल उस विशेष तत्व के लिए नियम को पेंट करता है, जो इस मामले में <div>तत्व है। यह सीएसएस इंजन के लिए लुक अप समय को कम करता है ताकि यह पता लगाया जा सके कि कौन से तत्व सीएसएस चयनकर्ता (जैसे a.hoverया #someContainer li) से मेल खाते हैं ।

हालांकि, तत्व स्तर पर स्टाइल डालने का मतलब होगा कि आप CSS स्टाइल नियमों को अलग से कैश नहीं कर सकते। आमतौर पर CSS फाइलों में स्टाइल डालने से कैशिंग हो सकती है, इस प्रकार जब आप किसी पेज को लोड करते हैं तो सर्वर से लोड की मात्रा कम हो जाती है।

तत्व के स्तर पर शैली के नियम रखने से आप यह भी जान पाएंगे कि किन तत्वों को किस तरह से स्टाइल किया गया है। यह एक विशेष तत्व को चित्रित करने के प्रदर्शन को बढ़ावा भी दे सकता है जहां आप कई तत्वों को एक साथ दोहरा सकते हैं। CSS फ़ाइलों का उपयोग करना CSS को HTML से अलग करता है, और इस तरह आपको यह सुनिश्चित करने की अनुमति देता है कि आपकी शैलियाँ सही हैं और बाद में इसे संशोधित करना आसान है।

इसलिए यदि आप तुलना को देखते हैं, तो आप देखेंगे कि सीएसएस फ़ाइल का उपयोग करने से तत्व स्तर पर स्टाइल की तुलना में अधिक लाभ होता है।

जब आपके पास बाहरी CSS स्टाइलशीट फ़ाइल हो तो भूल न जाएं, आपका ब्राउज़र उस फ़ाइल को कैश कर सकता है जो आपकी एप्लिकेशन दक्षता को बढ़ाती है!

Comments

क्या आप क्रोम प्रोफाइलर के साथ कोई आँकड़े प्रदान कर सकते हैं? सीपीयू और जीपीयू मोबाइल और टैबलेट पर महंगा है, जहां बैटरी की खपत बहुत बड़ी है। मुझे लगता है कि व्यापार बंद है। और कैश का लाभ क्या है? ब्राउज़र को वर्तमान तत्व के लिए शैली की गणना करनी होगी और कई नियम होने पर शैलियों को हल करना अधिक महंगा होगा।

— आकाश काव

ध्यान दें कि रखरखाव से संबंधित सभी नुकसान गायब हो जाते हैं जब एक इंजन होता है जो ग्राहकों को भेजने से पहले शैलियों को रेखांकित करता है

— मोशे शाहम

रिएक्ट + रेडियम का उपयोग करते समय रखरखाव से संबंधित नुकसान भी गायब हो जाते हैं।

— अजाक्सलैंग

@AjaxLeung कोई शक नहीं कि आपने और शाहम ने जो कहा था, वह सच है। यह उत्तर 2011 में लिखा गया था, जब अधिकांश आधुनिक उपकरण अभी तक उपलब्ध नहीं थे।

— मोरिस

हाँ। मैं बस इस जवाब को आज और उससे आगे देखने वालों के लिए टिप्पणी जोड़ रहा था।

— AjaxLeung

Answer 2

यदि आप इनलाइन शैलियों बनाम शैली पत्रक का उपयोग करते हैं तो पृष्ठ तेजी से लोड होगा। कुछ मामलों में तेज होना चाहिए।

जब आप href का उपयोग करके एक स्टाइल शीट का उपयोग करते हैं तो इसके लिए सर्वर को एक और अनुरोध की आवश्यकता होती है, फिर प्रतिक्रिया के बाद फ़ाइल को पार्स करना। इनलाइन शैलियों के साथ कोई भी नहीं है, बस प्रत्यक्ष पार्सिंग।

यदि किसी क्लाइंट के पास धीमा इंटरनेट है, तो वह सिंगल पेज पेज स्टाइल को छोड़ते हुए बहुत ही धीमा हो सकता है, जब तक कि स्टाइल शीट डिलीवर नहीं हो जाती। फिर, अगर यह इनलाइन होता तो इसमें कोई देरी नहीं होती।

केवल एक ही कारण है कि हम स्टाइल शीट का उपयोग करते हैं। ऐसे समय होते हैं जब उनकी आवश्यकता नहीं होती है, इसलिए इनलाइन स्टाइल या इन-डॉक्यूमेंट स्टाइल शीट पर्याप्त होती हैं।

Comments

यह उत्तर ब्राउज़र कैशिंग की पूरी तरह से उपेक्षा करता है। स्टाइल्सशीट केवल शैलियों को एक बार अनुरोध करने और उन्हें कैशिंग करने की अनुमति देता है, जिससे तार पर भेजे गए सामग्री की मात्रा कम हो जाती है।

— गीकऑन्कोफी

यह उत्तर इस तथ्य की भी अनदेखी करता है कि इनलाइन शैलियाँ HTML फ़ाइल को बड़ा बनाती हैं। संभावित रूप से, विशेष रूप से बार-बार इनलाइन स्टाइलिंग का उपयोग करते समय, सीएसएस फ़ाइल से कई गुना बड़ा। वैसे, ब्राउज़र कई फ़ाइलों को समानांतर में लोड कर सकते हैं (और उन्हें ऊपर बताए अनुसार कैश कर सकते हैं)।

— जन वैन डेर हैगेन

@ गीकॉन्कोफी लेकिन HTML पेज उम्मीद से कैश (304) होगा, इसलिए कैशिंग को वास्तव में अनदेखा नहीं किया गया है।

— विदर्भ

@JanVanderHaegen प्रारंभिक लोड समय तेज हो सकता है यदि आपको सीएसएस को शामिल नहीं करना है जो आपके द्वारा देखे जा रहे विशेष पृष्ठ पर उपयोग नहीं किया गया है। यदि आप अपने सभी CSS को बाहरी फ़ाइलों में रखते हैं तो HTML फ़ाइल छोटी, सच्ची है, लेकिन बाहरी CSS फ़ाइल बड़ी हो सकती है। फायदा और नुकसान।

— विदर्भ

Answer 3

इसका उत्तर देना आसान सवाल नहीं है, क्योंकि इस मामले में पूर्णता कई कारकों (सीएसएस चयनकर्ताओं की जटिलता, दस्तावेज़ का आकार, आदि) पर निर्भर करती है। हालाँकि, यदि हम एक अलग मामला लेते हैं, तो हम देख सकते हैं कि सीएसएस वर्ग इनलाइन शैली की तुलना में सामान्य रूप से तेज है:
इनलाइन शैली बनाम सीएसएस वर्ग

Comments

बहुत यकीन है कि यह उस गति का परीक्षण कर रहा है जिस पर नोड क्लास या स्टाइल विशेषता को उस गति के बजाय बदल दिया गया है जिस पर शैली को लागू किया गया है जो सवाल पूछ रहा है

— सैम 15

@Sam "गति जिस शैली पर लागू होती है" से आपका क्या अभिप्राय है? क्या आप एक परीक्षण प्रदान कर सकते हैं जो इस गति को मापता है? यदि आप परीक्षण कोड पर एक नज़र डालते हैं, तो आप देखेंगे कि प्रत्येक पुनरावृत्ति पर पृष्ठ का रीफ़्लो होता है, जिसका अर्थ है कि परीक्षण न केवल कक्षा / विशेषता संशोधन, बल्कि पृष्ठ पर वास्तविक प्रभाव भी शामिल करता है।

— s.ermakovich

इसमें शैली को जोड़ने का समय शामिल हो सकता है लेकिन इसमें समय भी जोड़ा जाता है। क्या होगा यदि दस्तावेज़ में पहले से ही वर्ग परीक्षण या इनलाइन शैली है जिसे जेएस को जोड़ने की आवश्यकता के बिना। मैं सीएसएस के लिए गति प्राप्त कर रहा हूं या तो मामले में हल किया जाए और (मैं गलत हो सकता हूं) लेकिन मुझे नहीं लगता कि यह परीक्षण सिर्फ यही करता है, मुझे लगता है कि यह अतिरिक्त काम करता है।

— सैम

@Sam यह परीक्षण ब्राउज़र द्वारा सीएसएस को लोड करने और इसे संसाधित करने के संभावित चरण को अनदेखा करता है। मैंने अपने जवाब में उल्लेख किया कि यह एक अलग मामला है। यह विभिन्न तरीकों (इनलाइन बनाम बाहरी) का उपयोग करके शैलियों को लागू करने के प्रदर्शन को मापता है। यह वही है जो आज के विशिष्ट वेब अनुप्रयोग करते हैं - पृष्ठ डिटेल के बिना जावास्क्रिप्ट से HTML दस्तावेज़ बदलें।

— s.ermakovich

आह ठीक है, मैं गैर-गतिशील रूप से जोड़े गए शैलियों का उल्लेख कर रहा था

— सैम

Answer 4

वैसे यह लिंक या बाहरी स्टाइल शीट का कारण हो सकता है, इसलिए इसे ब्राउज़र में कैश्ड किया जा सकता है, खासतौर पर जब साइट के लिए कई पेजों में एक ही डिव का उपयोग कर रहे हों। इसका अर्थ यह है कि ब्राउज़र को हर बार कोड पुनः लोड करने के बजाय केवल एक बार स्टाइल शीट को लोड करना होगा। यह क्लीनर कोड के लिए भी बनाता है जो किसी भी बदलाव या डिबगिंग को आसान बनाता है।

Comments

यह कैशिंग तंत्र का सार है। इसे प्रमाणों की आवश्यकता नहीं है।

— स्ट्रोनशियम

यह "कैश किया जा सकता है" इसका मतलब यह नहीं है कि "कैश किया गया" है; और "सार" तथ्य नहीं हैं।

— इवान कास्टेलानोस

दोस्तों, यह अब ड्यूक न्युकेम युग नहीं है, हम लोगों को नकद नहीं करते हैं। दूसरी ओर कैश ...

— सेबस

कैशिंग तर्क एकल पृष्ठ अनुप्रयोगों के लिए नहीं होता है, जो आम तौर पर एक बार सामने की ओर सब कुछ लोड करते हैं और मक्खी पर पृष्ठ उत्पन्न करते हैं।

— माइंडजुइस

Answer 5

ट्रूथ 'हाँ' है

एक बहुत बड़ा अंतर है। विशेष रूप से जब आप उपयोगकर्ता इंटरफ़ेस को स्वचालित कर रहे हों। निम्नलिखित कोड का प्रयास करें। मैं IE10 और नोटपैड का उपयोग विकसित करने के लिए करता हूं। मैं सीख रहा हूं कि मैं जाऊंगा और परीक्षण करूंगा यह एक छोटा संस्करण परीक्षण है। (शायद गलतियाँ हैं क्योंकि मैंने आपका उत्तर दिखाने के लिए कोड घटा दिया है)

आपके द्वारा संदर्भित छवि पर क्लिक करें और चेतावनी संदेश पढ़ें। HINT: संपादन (परीक्षण) से पहले एक संपादन के रूप में इस फ़ाइल को फिर से सहेजें।

शुभकामनाएं, डॉन

<!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>

Comments

मैं IE10 और नोटपैड का उपयोग विकसित करने के लिए करता हूं। ?

— एलेक्सग्राफे

Answer 6

मेरी राय में कोई निश्चित जवाब नहीं है।

एक inline CSSतेज़ी से लोड हो अगर सीएसएस सामग्री आकार डाउनलोड तेजी से अपने सर्वर से एक का जवाब होगा external CSS fileअनुरोध (पर विचार डीएनएस समय, सर्वर विलंबता, आदि)।

सामान्य आकार के सीएसएस के लिए मैं उन्हें पेज में इनलाइन कर दूंगा, 15-20KB से अधिक के लिए मैं शायद इसे किसी बाहरी फाइल में डाल दूंगा और सुनिश्चित करूंगा कि इसे कैश किया जा सके।

मुझे यकीन है कि कई अन्य विचार हैं जो मुझे अब याद आ रहे हैं, लेकिन इनलाइन बनाम बाहरी के लिए कोई निश्चित जवाब नहीं है।

Answer 7

बाहरी स्टाइल शीट का उपयोग करना निश्चित रूप से एक बेहतर विकल्प है क्योंकि यह आपको उस शैली को याद रखने में मदद करेगा जो आपने div (s) पर लागू की है। यह पृष्ठ को लोड करने के समय को कम करता है क्योंकि HTML कोड जितना कम होगा उतनी ही तेजी से लोड होगा।

लेकिन कुछ मामलों में आपको किसी विशेष div की कुछ संपत्ति को बदलना पड़ सकता है तो इनलाइन शैली सबसे अच्छा विकल्प है। और सही मायने में, एक या दो इनलाइन शैली पेज लोड करने के समय में कोई बदलाव नहीं करेगी।

आंतरिक स्टाइल शीट का एक और विकल्प है लेकिन इसका उपयोग केवल तब किया जाता है जब आपके पास एक एकल पृष्ठ वेबसाइट होती है जैसे कि आप एक टेम्पलेट बना रहे हैं। ऐसा इसलिए है क्योंकि आपको हर HTML पेज में CSS लिखना होगा

Answer 8

मैं बाह्य CSS पर इनलाइन सीएसएस का उपयोग करना पसंद करता हूं जहां हर दूसरे तत्व या छवि के लिए कई छोटी सीएसएस फाइलें हैं। कोड में केवल 5-10 लाइनों के साथ कई सीएसएस फ़ाइलों को डाउनलोड करने का कोई मतलब नहीं है। यदि आपके तत्व में होवर, सक्रिय, जाँच आदि जैसे गुण हैं, तो आपको बाहरी CSS फ़ाइल का उपयोग करना चाहिए क्योंकि यह आपकी विकास प्रक्रिया को जटिल बनाने से बचेगा।

Comments

जो अत्यंत कठिन बनाये रखता है। सीएसएस, जेएस फाइलें डिफ़ॉल्ट रूप से आपके उपयोगकर्ता के ब्राउज़र पर कैश की जानी चाहिए।

— dave2118