हालांकि जावास्क्रिप्ट और सीएसएस कोड को उचित फ़ाइलों (.js और .css) में रखने की हमेशा अनुशंसा की जाती है, लेकिन अधिकांश प्रमुख वेबसाइटों (जैसे अमेज़ॅन, फेसबुक इत्यादि) ने मुख्य रूप से मुख्य रूप से अपने जावास्क्रिप्ट और सीएसएस कोड का एक महत्वपूर्ण हिस्सा रखा है एचटीएमएल पेज।फ़ाइलों या मुख्य HTML में सीएसएस और जावास्क्रिप्ट रखें?
सबसे अच्छा विकल्प कहां है?
http://developer.yahoo.com/performance/rules.html#external
याहू (भले ही वे कई इनलाइन शैलियों और स्क्रिप्ट है), उन्हें बाहरी बनाने अनुशंसा करता है। मेरा मानना है कि Google पेज की गति (या अभी भी करता है?) भी वही करती है।
यह वास्तव में उन्हें अलग करने के लिए एक तार्किक बात है। सीएसएस और जेएस को एचटीएमएल से अलग रखने के लिए बहुत सारे फायदे हैं।तार्किक कोड प्रबंधन जैसी चीजें, उन पृष्ठों का कैशिंग, निचला पृष्ठ आकार (क्या आप 400kb कैश किए गए संसाधन के लिए ~ 200ms अनुरोध, या प्रत्येक पृष्ठ पर उस डेटा को डाउनलोड करने से 4000ms देरी होगी?), एसईओ विकल्प (कम बकवास जब स्क्रिप्ट/शैलियों बाहरी होते हैं तो देखने के लिए Google), बाहरी स्क्रिप्ट्स (ऑनलाइन टूल्स इत्यादि) को कम करने के लिए आसान है, उन्हें विभिन्न सर्वरों से सिंक्रनाइज़ कर सकते हैं ....
यह किसी भी वेबसाइट में आपका प्राथमिक उद्देश्य होना चाहिए। आपकी पूरी वेबसाइट बनाने वाली सभी शैलियों को एक फ़ाइल में होना चाहिए (या प्रत्येक पृष्ठ के लिए फ़ाइलें, फिर अद्यतन होने पर विलय और minified), जावास्क्रिप्ट के लिए समान है।
असली दुनिया में (अपने लिए कोई प्रोजेक्ट नहीं कर रहा है, एक ग्राहक या हितधारक के लिए ऐसा करना जो परिणाम चाहता है), केवल एक समय जहां यह किसी अन्य जावास्क्रिप्ट संसाधन या किसी अन्य स्टाइलशीट में लोड करने के लिए समझ में नहीं आता है (और इस प्रकार इनलाइन शैलियों/जावास्क्रिप्ट का उपयोग करें) यह है कि अगर किसी प्रकार की गतिशील जानकारी है जो प्रति-उपयोगकर्ता, प्रति-सत्र या प्रति-अवधि-अवधि पर है जिसे किसी भी अन्य तरीके से पूरा नहीं किया जा सकता है। उदाहरण: जब मेरी वेबसाइट का प्रचार होता है, तो हम जानकारी के एक छोटे JSON ऑब्जेक्ट के साथ एक स्क्रिप्ट टैग डंप करते हैं। चूंकि हम कई फ़ाइलों को छोटा और मर्ज नहीं करते हैं, इसलिए इसे पृष्ठ में शामिल करने के लिए और अधिक समझदारी होती है। निश्चित रूप से ऐसा करने के अन्य तरीके हैं, लेकिन ऐसा करने के लिए $ 20 खर्च करते हैं, जबकि इसे एक और तरीका करने के लिए $ 100 खर्च हो सकता है।
शायद अमेज़ॅन/फेसबुक/Google आदि इतने इनलाइन कोड का उपयोग करते हैं, इसलिए उनके सर्वर पर बहुत अधिक कर नहीं लगाया जाता है। मुझे एक हिट में 1 एमबी फ़ाइल का अनुरोध करने या 10 100 केबी फाइलों का अनुरोध करने के बीच बेंचमार्किंग पर निश्चित नहीं है (उदाहरण के लिए 1 एमबी/10 = 100 केबी मानते हैं), लेकिन तेजी से क्या होगा? संभावित रूप से 1 एमबी फ़ाइल, लेकिन छोटे अनुरोधों को तुल्यकालिक रूप से लोड किया जा सकता है, जिसका अर्थ है कि उन 10 अनुरोधों में से प्रत्येक एक अलग सर्वर/डोमेन से संभावित रूप से आ सकता है, इस प्रकार कुल लोड समय को कम करता है।
आगे, उदाहरण के लिए Google होमपेज विजेट्स के लिए जेएसओएन सरणी जानकारी को डंप करने लगते हैं, संभवतः क्योंकि यह विभिन्न स्रोतों से सभी जानकारी को संकलित करता है, इसे छोटा करता है, इसे कैश करता है, फिर पेज पर रखता है, फिर जावास्क्रिप्ट फ़ंक्शन लेआउट का निर्माण (सर्वर साइड की बजाय क्लाइंट साइड प्रोसेसिंग पावर)।
"गतिशील जानकारी" खराब है। जेएस गतिशील रूप से बुराई उत्पन्न करना बुरा है। आप इसे गलत कर रहे हैं। उस डेटा को HTML में संग्रहीत करें या इसे REST पर बेनकाब करें। – Raynos
हम्म, कैसे जावास्क्रिप्ट उलटी गिनती फ़ंक्शन को किसी भी तरह पृष्ठ पर डंप किए बिना उलटी गिनती की तारीख मिल जाएगी ??? – Benno
यह उलटी गिनती क्यों हो रही है? यहां तक कि इसे HTML में डालें। व्यक्तिगत रूप से मैं इसे एक CSS3 एनीमेशन – Raynos
एक दिलचस्प जांच यह हो सकती है कि वे शैली ब्लॉक के बावजूद विभिन्न .css फ़ाइलों को शामिल करते हैं या नहीं। शायद यह ओवरहेड है या शायद यह सुविधा है।
मुझे पता चला है कि इंटरफ़ेस डेवलपर (और सामग्री नियोक्ता) की विभिन्न शैलियों के साथ काम करते समय सुविधा/प्राधिकरण अक्सर समय सीमा के मुकाबले जीतता है और "काम पूरा कर रहा है"। बड़े पैमाने पर एक परियोजना में "कोई नहीं, आप हमारी स्टाइलशीट को छू नहीं रहे हैं", या शायद यदि पहले से ही http अनुरोध का उपयोग करके स्टाइलशीट नहीं है तो कारक अच्छे अभ्यास के खिलाफ लड़ाई जीत चुके हैं।
अपने .js को एकाधिक फ़ाइलों में रखें, फिर पैकेज करें, छोटा करें और उसे एक फ़ाइल में gzip करें।
अपने HTML को कई अलग-अलग फ़ाइलों में रखें।
एकाधिक फ़ाइलों में अपना .css रखें, फिर पैकेज करें, मिनीफाई करें और उसे एक फ़ाइल में gzip करें।
फिर आप कैश किए जाने के लिए क्लाइंट को एक सीएसएस फ़ाइल और एक जेएस फ़ाइल भेजते हैं।
आप उन्हें अपने HTML के साथ इनलाइन नहीं करते हैं।
आप उन्हें तो सभी तीन फिर से डाउनलोड करने के लिए सीएसएस या एचटीएमएल के लिए कोई परिवर्तन इनलाइन उपयोगकर्ता के लिए या js बलों हैं।
मुख्य कारण प्रमुख वेबसाइटों में उनकी फ़ाइलों में जेएस & सीएस है, क्योंकि प्रमुख वेबसाइट कोड सड़ांध है। प्रमुख कंपनियां मानकों और सर्वोत्तम प्रथाओं को कायम नहीं रखती हैं, वे इसे तब तक हैक करते हैं जब तक यह काम नहीं करता है, "हमारी वेबसाइट पर पैसा बर्बाद क्यों करें, यह काम नहीं करता है?"।
लाइव वेबसाइटों के उदाहरणों को न देखें, क्योंकि इंटरनेट पर 99% सभी उदाहरण खराब प्रथाओं को दिखाते हैं।
इसके अलावा भगवान के प्यार के लिए, चिंताओं का पृथक्करण कृपया। आपको कभी भी HTML पृष्ठों में इनलाइन जावास्क्रिप्ट या इनलाइन सीएसएस का उपयोग नहीं करना चाहिए।
आप बिल्कुल सही हैं, यह बुरा बनाम बुराई का मामला है - + ब्रूस, आपको बुराई मिली, @ रेनोस, आप अच्छे को दबा रहे हैं। – danjah
यदि आपका सीएसएस और जावास्क्रिप्ट कोड वैश्विक उपयोग के लिए है, तो उन्हें उचित फाइलों में रखना सर्वोत्तम है। अन्यथा, यदि कोड केवल एक निश्चित पृष्ठ द्वारा उपयोग किया जाता है, जैसे होम पेज, उन्हें सीधे HTML में डालें स्वीकार्य है, और रखरखाव के लिए अच्छा है।
"रखरखाव के लिए अच्छा"। चूंकि रखरखाव के लिए कभी भी मुश्किल युग्मन अच्छा होता है। – Raynos
चुनने के लिए एक संतुलन बिंदु है, यदि एक पृष्ठ हमेशा बदल रहा है, हर बार जब आप जेएस/सीएसएस को बदलना चाहते हैं और उन्हें फिर से gzip करना है। और उपयोगकर्ता को जेएस/सीएसएस को पुनः लोड करने की आवश्यकता नहीं है यदि वे पहले से ही मुख्य जेएस/सीएसएस को कैश कर चुके हैं। – xdazz
हमारी टीम इसे सभी अलग रखती है। इस तरह के सभी संसाधन _Content नामक फ़ोल्डर में जाते हैं।
सीएसएस में _Content/css/xxx.js
जे एस _Content/js/lib/xxx.js में चला जाता है (सभी पुस्तकालय संकुल के लिए)
कस्टम पृष्ठ की घटनाओं और कार्यों पेज से कहा जाता हो, लेकिन _Content/js/Main.js
छवियाँ _Content/images/xxx.x
के तहत एक ही जगह में जाना जाएगा यह सिर्फ है कि हम इसे कैसे बाहर रखना के रूप में यह मार्कअप के लिए HTML मार्कअप रहता है के रूप में यह होना चाहिए,।
मुझे लगता है कि मुख्य HTML में सीएसएस और जेएस डालने से पृष्ठ तेजी से लोड हो जाता है।
हालांकि एक तेज़ इंटरनेट कनेक्शन में मापना मुश्किल है। –
यह एक दिलचस्प अवलोकन है। मुझे आश्चर्य है कि ऐसा इसलिए है क्योंकि अधिकांश समय HTTP कनेक्शन स्थापित करने में व्यतीत होता है? यदि ओवरहेड काफी बड़ा है, तो संभवतः आप वास्तविक पेलोड में जितना संभव हो उतना पैक करना चाहते हैं। –
हाँ, दिलचस्प सवाल (हालांकि शायद वेबमास्टर्स.एसई पर बेहतर अनुकूल है?) –
कई असहमत होंगे, लेकिन आईएमओ इससे थोड़ा अंतर आता है। मैं हमेशा सीएसएस और जेएस डालता हूं जिसे मैं HTML पृष्ठ में लिखता हूं। जब मैं आसानी से सामान पढ़ सकता हूं तो इसे बदलने के लिए और अधिक सुविधाजनक है। –