दिलचस्प पोस्ट
जावास्क्रिप्ट का उपयोग करते हुए मैं पाठ इनपुट फ़ील्ड का मान कैसे प्राप्त करूं? आप "यह" कीवर्ड का उपयोग कब करते हैं? बाइट सरणी पर GetHashCode () मिस्टेक। जेएस और हैंडलेबार.जेएस के बीच क्या अंतर है? मैं PHP के साथ JSON से डेटा कैसे निकाल सकता हूं? क्या मुझे गुणन या विभाजन का उपयोग करना चाहिए? "रडार चार्ट" (उर्फ स्टार प्लॉट, मकड़ी का साजिश) आर जी में जीजीप्लोट 2 का उपयोग करना एकाधिक फ़ाइलों को एक HTTP अनुरोध के साथ कैसे डाउनलोड करें? रूबी ब्लॉक सिंटैक्स त्रुटि अप्रयुक्त चर के बारे में चेतावनी को कैसे चुप कर सकता हूं? कैसे XCode बिना एक आईओएस एप प्रस्तुत करने के लिए? जावा: आप यूटीसी टाइमस्टैम्प को स्थानीय समय में कैसे बदल सकते हैं? सी # स्ट्रिंग का GetHashCode () कैसे कार्यान्वित किया जाता है? .htaccess रीडायरेक्ट को रीडायरेक्ट रूट यूआरएल को उपनिर्देशिका में डालें एक्सेल में एचटीएमएल टेबल निर्यात करने के लिए जावास्क्रिप्ट

क्या मुझे छवियों को सीएसएस या एचटीएमएल में डेटा / बेस 64 में एम्बेड करना चाहिए?

सर्वर पर नंबर अनुरोधों को कम करने के लिए मैंने सीधे सीएसएस में BASE64 के रूप में कुछ छवियां (पीएनजी और एसवीजी) एम्बेड की हैं। (इसकी निर्माण प्रक्रिया में स्वचालित)

इस तरह:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...); 

क्या यह एक अच्छा अभ्यास है? क्या इस से बचने के कुछ कारण हैं? क्या कुछ प्रमुख ब्राउज़र है जिसमें डेटा यूआरएल समर्थन नहीं है?

बोनस प्रश्न: क्या यह सीएसएस और जेएस के लिए भी ऐसा करने का मतलब है?

Solutions Collecting From Web of "क्या मुझे छवियों को सीएसएस या एचटीएमएल में डेटा / बेस 64 में एम्बेड करना चाहिए?"

क्या यह एक अच्छा अभ्यास है? क्या इस से बचने के कुछ कारण हैं?

यह आमतौर पर बहुत सी सीएसएस छवियों के लिए आमतौर पर एक अच्छा अभ्यास है जो एक साथ (सीएसएस sprites) का उपयोग करने जा रहे हैं, जब IE संगतता कोई फर्क नहीं पड़ता और अनुरोध को सहेजना कैशे योग्यता से ज्यादा महत्वपूर्ण है।

इसके कई उल्लेखनीय डाउनसाइड्स हैं:

  • आईआई 6 और 7 में सभी पर काम नहीं करता है

  • IE8 में आकार में केवल 32k तक संसाधनों के लिए काम करता है। यह सीमा है जो base64 एन्कोडिंग के बाद लागू होती है। दूसरे शब्दों में, अब 32768 वर्णों से अधिक नहीं

  • यह एक अनुरोध बचाता है, लेकिन बजाय HTML पृष्ठ ब्लोट करता है! और छवियों को बिना पहचाने योग्य बनाता है वे हर बार युक्त पृष्ठ या स्टाइल शीट लोड हो जाते हैं।

  • बेस 64 एन्कोडिंग ब्लोट्स का आकार 32% तक है।

  • यदि एक जिप्प संसाधन में सेवा की, data: छवियाँ लगभग निश्चित रूप से सर्वर के संसाधनों पर एक भयानक तनाव होने जा रहे हैं! छवियां परंपरागत रूप से बहुत सीपीयू को सघन करने के लिए गहन होती हैं, आकार में बहुत कम कमी होती हैं

यहां सामान्य जवाब देने का सुझाव देने के लिए यह आवश्यक नहीं है, क्योंकि कानूनी कारणों के एक सेट के लिए हालांकि, ये सभी आधुनिक ऐप्स व्यवहार और निर्माण प्रक्रिया को अनदेखा करते हैं।

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

यह सीएसएस पूरी तरह से कैश किया जाएगा और नाटकीय रूप से सर्वर के दौर दौरों को कम करेगा, जो कि जैसा कि @MemDeveloper द्वारा बताई गई है कि सबसे बड़ी प्रदर्शन हिट्स में से एक है

ज़रूर, यह हैक है इसमें कोई शक नहीं। जैसे ही sprites एक हैक हैं सही दुनिया में इसकी आवश्यकता नहीं होगी, तब तक, यह एक संभव अभ्यास है यदि आपको तय करने की आवश्यकता है:

  1. पृष्ठ कई चित्रों के साथ है जो आसानी से "छिपने योग्य" नहीं हैं
  2. सर्वर पर गोल यात्रा एक वास्तविक बाधा है (मोबाइल लगता है)।
  3. गति (मिलिसेकंड स्तर तक) आपके उपयोग केस के लिए वास्तव में महत्वपूर्ण है।
  4. आप आईई 5 और आईई 6 के बारे में परवाह नहीं करते (जैसा कि आप चाहते हैं कि वेब आगे जाना चाहते हैं)।

मेरे विचार।

यह एक अच्छा अभ्यास नहीं है कुछ ब्राउज़र डेटा यूआरआई (जैसे आईई 6 और 7) का समर्थन नहीं कर रहे हैं या समर्थन सीमित है (जैसे IE8 के लिए 32KB)।

डेटा यूआरआई नुकसान पर पूर्ण विवरण के लिए यह विकिपीडिया लेख भी देखें:

  • डेटा यूआरआई योजना

नुकसान

  • डेटा यूआरआई अलग-अलग उनके युक्त दस्तावेजों (जैसे सीएसएस या एचटीएमएल फाइलों) से कैश नहीं किए जाते हैं, इसलिए हर बार डाउनलोड किए गए दस्तावेजों को डाउनलोड किया जाता है।
  • सामग्री को फिर से एन्कोड किया जाना चाहिए और हर बार कोई बदलाव किया जाना चाहिए।
  • संस्करण 7 के माध्यम से इंटरनेट एक्सप्लोरर (जनवरी 2011 तक बाजार का लगभग 15%), समर्थन का अभाव है
  • इंटरनेट एक्सप्लोरर 8 में डेटा यूआरआई की अधिकतम लंबाई 32 KB है।
  • डेटा को एक सरल स्ट्रीम के रूप में शामिल किया गया है, और कई प्रसंस्करण वातावरण (जैसे वेब ब्राउज़र) कंटेनर (जैसे multipart/alternative या message/rfc822 ) का उपयोग करने के लिए मेटाडाटा, डेटा संपीड़न या सामग्री वार्ता जैसे अधिक जटिलता प्रदान करने के लिए समर्थन नहीं कर सकते।
  • बेस 64-एन्कोडेड डेटा यूआरआई उनके बाइनरी समकक्ष की तुलना में आकार में 1/3 बड़ा है। (हालांकि, इस ओवरहेड को घटाकर 2-3% कर दिया जाता है अगर HTTP सर्वर gzip का उपयोग करते हुए प्रतिक्रिया को संपीड़ित करता है)
  • डेटा यूआरआई सुरक्षा सॉफ़्टवेयर के लिए सामग्री को फ़िल्टर करने में अधिक मुश्किल बनाते हैं।

मैं एक महीने के लिए डेटा-यूरी का उपयोग कर रहा था, और Ive ने उन का उपयोग करना बंद कर दिया क्योंकि उन्होंने मेरी स्टाइलशीट बिल्कुल विशाल बना दिया है

डेटा-यूरी आईई 6/7 में काम करते हैं (आपको उन ब्राउज़र को एक एमएचटीएमएल फ़ाइल प्रदान करने की आवश्यकता है)।

डेटा-यूरी का उपयोग करने से मुझे एक लाभ यह था कि जैसे ही स्टाइलशीट डाउनलोड की गई थी, मेरी पृष्ठभूमि छवियों को उतना ही उतना ही प्रदान किया जाता था, जैसा कि धीरे-धीरे लोड होने के विपरीत हम अन्यथा देखते हैं

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

मैं छवियों को संयोजित करने और अनुरोधों को सहेजने के लिए सीएसएस स्प्राइट्स का उपयोग करने के लिए अधिक इच्छुक हूं। मैंने बेस 64 तकनीक की कोशिश कभी नहीं की है लेकिन यह जाहिरा तौर पर आईई 6 और आईई 7 में काम नहीं करता है। इसका भी अर्थ यह है कि यदि कोई भी छवियां बदलती हैं तो आपको संपूर्ण खो जाने के लिए पुन: वितरित करना होगा, जब तक आपके पास कई सीएसएस फाइल नहीं होती हैं।

मुझे सामान्य सर्वोत्तम प्रथाओं के बारे में पता नहीं है, लेकिन अगर मैं इसके लिए मदद कर सकता हूं तो मैं उस चीज़ को देखना पसंद नहीं करता। 🙂

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

क्या कारण हैं कि आपको लगता है कि इस समय सर्वर पर बहुत अधिक अनुरोध हैं?

मैं इसे छोटे चित्रों के लिए बहुत बार सुझाव देता हूं, उदाहरण के लिए वेब एप्लिकेशन के सामान्य चिह्न

  • छोटे, क्योंकि बेस 64 एन्कोडिंग आकार बढ़ता है
  • अक्सर प्रयोग किया जाता है, क्योंकि यह लंबे समय तक प्रारंभिक लोड समय को उचित ठहराता है

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

अधिक जानकारी यहां एकत्रित की जाती है: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/