2009-05-06 7 views
11

मेरे पास एक ईकॉमर्स साइट है जिसमें शीर्षलेख से जुड़ी लगभग 8 सीएसएस फ़ाइलें हैं - जिसके परिणामस्वरूप सर्वर पर 8 अलग-अलग http अनुरोध हैं। मैंने सभी सीएसएस फ़ाइलों को 1 बड़े में समेकित किया, जिसके परिणामस्वरूप 67 केबी (!) फ़ाइल - हमारे सीएसएस फ़ाइलों के लिए http अनुरोधों को 1 में कटौती करने के लिए।क्या सीएसएस में @import अतिरिक्त http अनुरोधों में परिणाम देता है?

मुझे इस आकार को एक सीएसएस फ़ाइल को इस तथ्य के प्रकाश में थोड़ा अप्रबंधनीय लगता है कि मैं लगातार साइट पर अपडेट कर रहा हूं। मेरी चिंता यह है कि मेरे उपयोगकर्ता मुझे अपडेट करने के बीच में पकड़ सकते हैं और पृष्ठ से पृष्ठ पर जाने पर एक गैर-स्टाइल पेज देख सकते हैं - बी/सी 67 केबी अभी भी सुरक्षित सेकंड पर सुरक्षित सर्वर पर सुरक्षित होने से पहले 2-3 सेकंड लेता है ।

मेरा प्रश्न है: फाइलों को लोड होने पर फ़ाइलों को छोटे और अधिक प्रबंधनीय आकारों (उस सीएसएस फ़ाइल के भीतर) में विभाजित करने के लिए इस बड़ी सीएसएस फ़ाइल के भीतर @import का उपयोग करने के लिए हमें मूल 8 http-अनुरोधों पर वापस ले जाता है ? या किसी भी तरह सीएसएस हैंडल में @imports अलग-अलग हैं?

उत्तर

12

हाँ आप @import का उपयोग करते समय प्रत्येक स्टाइलशीट के अनुरोध पर वापस जाएंगे।

आपकी सबसे अच्छी शर्त सीएसएस को तैनाती के लिए एक फ़ाइल में छोटा और समेकित करना है। लेकिन आप अभी भी अलग फाइलों के साथ विकसित कर सकते हैं।

+0

धन्यवाद - मुझे बहुत डर था। :( मैंने minifying करने का प्रयास किया - लेकिन यह किसी भी कारण से साइट तोड़ दिया। मुझे यह एक और प्रयास देना होगा और शायद यह देखना होगा कि यह अलग क्यों हो रहा है। बहुत धन्यवाद। –

+0

एक सीएसएस फ़ाइल में समेकित होने की संभावना है मिनीफाईंग के साथ कुछ बाइट्स को शेविंग करने से आपको एक बड़ा लाभ (1 http अनुरोध), मैं पहले –

+0

पर तैनाती के लिए एकल फ़ाइल पर ध्यान केंद्रित करूंगा जब आप "ध्यान केंद्रित करें" - क्या आपका मतलब सीएसएस में "ब्लोट" पर कटौती करना है? मुझे अतिरिक्त कोड पर कटौती करने के लिए सीएसएस और शॉर्टकट की काफी अच्छी समझ है - इसलिए मैंने पहले से ही बहुत सारी वसा को "छंटनी" की है। क्या आपके पास कुछ और मतलब हो सकता है? –

3

ब्राउज़र को डेटा किसी भी तरह से प्राप्त करना है, तो यह किसी अन्य http अनुरोध का उपयोग कैसे नहीं कर सकता? ;-)

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

आप क्लाइंट और सर्वर के बीच कनेक्शन को स्नीफ करने का प्रयास कर सकते हैं और यह देख सकते हैं कि यह क्या अनुरोध करता है।

+0

धन्यवाद, माइक –

1

हां, प्रत्येक @import कथन के लिए एक अलग अनुरोध जारी किया गया है।

आप इसे त्वरित परीक्षण के साथ देख सकते हैं; एक सीएसएस फ़ाइल सहित एचटीएमएल का एक टुकड़ा लिखें जो दूसरी सीएसएस फ़ाइल आयात करता है। फायरबग के नेटवर्क पैनल जैसे कुछ परिणामों को देखना प्रत्येक सीएसएस फ़ाइल के लिए दो अलग-अलग अनुरोध दिखाता है। यही वह परीक्षण है जिसका उपयोग मैंने इस उत्तर की पुष्टि करने के लिए किया था।

1

सीएसएस आयात किसी पृष्ठ पर किसी भी अन्य "शामिल" से अलग नहीं हैं, जैसे बाहरी जावास्क्रिप्ट स्क्रिप्ट का संदर्भ। हालांकि, ब्राउज़र कैशिंग को आपकी साइट पर पहली पहुंच के अलावा इसे एक गैर-समस्या बनाना चाहिए।

+0

हाँ - i मुझे लगता है कि मैं उन्हें अधिक प्रबंधनीय फ़ाइलों में तोड़ने के लिए वापस जा रहा हूँ। :) यह पहले पृष्ठ लोड के बाद सच है, यह चिंता नहीं होनी चाहिए। –

0

यदि आपके पास 67 Kb सीएसएस फ़ाइल है तो कुछ अजीब बात है। याद रखें कि सीएसएस में सी CASCADING के लिए है, और इसका मतलब है कि आपको कक्षा में शामिल टैगों में से प्रत्येक के प्रत्येक गुण में प्रत्येक वर्ग में परिभाषित करने की आवश्यकता नहीं है।

उदाहरण के लिए यदि आप एक कंटेनर के रूप में एक < div id = "maincontainer" > परिभाषित आप इसे करने के लिए एक वर्ग को परिभाषित कर सकते हैं

#maincontainer {font-face:Arial,helvetica,sans;} 

इसका मतलब है कि अगर आप टैग के लिए इसके बारे में एक उप-वर्ग बनाने < पी > तरह

#maincontainer P {color:darkgray;} 

सभी < पी > DIV maincontainer अंदर टैग फ़ॉन्ट Arial, Helvetica, संज का प्रयोग करेंगे।

पेजों में उनका उपयोग करने के तरीके के लिए सीएसएस फ़ाइलों को बनाने का प्रयास करें। सभी साइट के लिए एक अनूठी सीएसएस फ़ाइल कई वर्गों को लोड करती है जो कुछ पृष्ठों में उपयोग नहीं होने वाली हैं। विभाजन और जीत।

+0

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

+0

आप गतिशील सीएसएस फ़ाइल्स भी बना सकते हैं। इसका मतलब है कि आपके ऐप के प्रत्येक भाग के लिए अनुकूलित सर्वर पक्ष में बनाई गई सीएसएस फ़ाइलें। – backslash17

3

आप .htaccess के साथ स्टाइलशीट को जोड़कर अतिरिक्त http अनुरोधों को रोक सकते हैं। तकनीक HTML5 Boilerplate .htaccess में समझाया गया है। यह इस तरह से काम करता है:

.htaccess में:

<FilesMatch "\.combined\.(js|css)$"> 
    Options +Includes 
    SetOutputFilter INCLUDES 
</FilesMatch> 

style.combined.css में:

<!--#include file="reset.css"--> 
<!--#include file="style.css"--> 

आप .js गठबंधन करने के लिए इसका उपयोग कर सकते (या किसी अन्य एक्सटेंशन आप में डाल कंस्ट्रैसिस।)

विकल्प + के लिए प्रलेखन here है।

संबंधित मुद्दे