क्यों नहीं वेब पेज तुरंत अपने पाठ प्रदर्शित करते हैं?

यदि आप ईगल आई के साथ ब्राउजर पेन को देखने के लिए प्रवृत्त हैं, तो आपने देखा होगा कि पेज अक्सर अपने चित्रों और लेआउट को लोड करने से पहले उनके पाठ को लोड करते हैं-ठीक विपरीत लोडिंग पैटर्न जिसे हमने 1990 के दशक के दौरान अनुभव किया था। क्या चल रहा है?

आज का प्रश्न और उत्तर सत्र सुपरयूज़र के सौजन्य से आता है-स्टैक एक्सचेंज का एक उपखंड, क्यू एंड ए वेब साइटों का एक समुदाय-संचालित समूह है।.

प्रश्न

सुपरयूजर रीडर लॉरेंट इस बात को लेकर बहुत उत्सुक है कि वास्तव में पेज एक समय में एक बार किए गए तत्वों को पूरी तरह से अलग तरीके से क्यों लोड करते हैं। वह लिखता है:

मैंने देखा है कि हाल ही में कई वेबसाइटें अपने पाठ को प्रदर्शित करने के लिए धीमी हैं। आमतौर पर, पृष्ठभूमि, चित्र इत्यादि लोड किए जाने वाले होते हैं, लेकिन कोई पाठ नहीं। कुछ समय बाद पाठ यहाँ और वहाँ दिखाई देने लगता है (हमेशा एक ही समय में नहीं).

यह मूल रूप से इसके विपरीत काम करता है, जैसा कि पहले इस्तेमाल किया गया था, जब पाठ पहले प्रदर्शित किया गया था, फिर बाद में चित्र और बाकी लोड हो रहे थे। क्या नई तकनीक इस मुद्दे को बना रही है? कोई उपाय?

ध्यान दें कि मैं एक धीमे कनेक्शन पर हूं, जो शायद समस्या को बढ़ाता है.

एक उदाहरण के लिए देखें [ऊपर] - सब कुछ लोड है लेकिन पाठ को प्रदर्शित होने से पहले कुछ और सेकंड लगते हैं.

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

उत्तर

सुपरयूजर के योगदानकर्ता डैनियल एंडर्सन एक शानदार विस्तृत जवाब देते हैं, जो फोंट-लोड-अंतिम रहस्य के निचले हिस्से के लिए सही हो जाता है:

एक कारण यह है कि आजकल वेब डिजाइनर वेब फोंट (आमतौर पर WOFF प्रारूप में) का उपयोग करना पसंद करते हैं, उदा। Google वेब फोंट के माध्यम से.

पहले, केवल एक फ़ॉन्ट जो किसी साइट पर प्रदर्शित होने में सक्षम था, वह था जिसे उपयोगकर्ता ने स्थानीय रूप से इंस्टॉल किया था। चूंकि उदा। मैक और विंडोज उपयोगकर्ताओं को जरूरी नहीं कि एक ही फोंट था, डिजाइनरों ने सहज रूप से हमेशा नियमों को परिभाषित किया

फ़ॉन्ट-परिवार: एरियल, हेल्वेटिका, सैन्स-सेरिफ़; 

जहां, यदि सिस्टम पर पहला फॉन्ट नहीं मिला है, तो ब्राउजर दूसरे के लिए देखेगा, और अंत में एक फॉलबैक "सैन्स-सेरिफ़" फॉन्ट.

अब, कोई फ़ॉन्ट URL को ब्राउज़र डाउनलोड करने के लिए CSS नियम के रूप में दे सकता है, जैसे:

@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700); 

और फिर एक विशिष्ट तत्व के लिए फ़ॉन्ट लोड करें।

फ़ॉन्ट-परिवार: 'ड्रॉयड सेरिफ़', सेन्स-सेरिफ़; 

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

एक उदाहरण के रूप में: मेरे राष्ट्रीय समाचार पत्रों में से एक, डैगेन्स न्येथर, अपने हेडलाइन के लिए वेब फोंट का उपयोग करता है, लेकिन उनके लीड का नहीं, इसलिए जब उस साइट को लोड किया जाता है, तो मैं आमतौर पर लीड को पहले देखता हूं, और आधे सेकंड के बाद ऊपर के सभी रिक्त स्थान पॉपुलेट किए जाते हैं। सुर्खियों के साथ (यह क्रोम और ओपेरा पर कम से कम सच है। दूसरों की कोशिश नहीं की गई है).

(इसके अलावा, डिजाइनर इन दिनों हर जगह जावास्क्रिप्ट को पूरी तरह से छिड़कते हैं, इसलिए हो सकता है कि कोई व्यक्ति पाठ के साथ कुछ चतुर करने की कोशिश कर रहा है, जिसके कारण देरी हो रही है। यह बहुत विशिष्ट साइट होगी, हालांकि: पाठ की सामान्य प्रवृत्ति इन में देरी हो सकती है। समय ऊपर वर्णित वेब फ़ॉन्ट समस्या है, मुझे विश्वास है।)

इसके अलावा:

यह उत्तर बहुत उलझा हुआ था, हालांकि मैं बहुत विस्तार में नहीं गया था, या शायद इसलिये इस का। प्रश्न सूत्र में कई टिप्पणियाँ दी गई हैं, इसलिए मैं थोड़ा विस्तार करने की कोशिश करूँगा […]

इस घटना को सामान्य रूप से "अस्थिर सामग्री का फ्लैश" के रूप में जाना जाता है, और विशेष रूप से "अस्थिर पाठ का फ्लैश"। "FOUC" और "FOUT" के लिए खोज करने से अधिक जानकारी मिलती है.

मैं वेब फोंट के संबंध में वेब डिजाइनर पॉल आयरिश के पोस्ट को FOUT पर सुझा सकता हूं.

जो एक नोट कर सकता है वह यह है कि विभिन्न ब्राउज़र इसे अलग तरीके से संभालते हैं। मैंने ऊपर लिखा था कि मैंने ओपेरा और क्रोम का परीक्षण किया था, जो दोनों समान व्यवहार करते थे। सभी WebKit आधारित (क्रोम, सफारी, आदि) FOUT से बचने के लिए चुनते हैं नहीं वेब फ़ॉन्ट लोडिंग अवधि के दौरान एक फॉलबैक फ़ॉन्ट के साथ वेब फ़ॉन्ट पाठ प्रदान करना. भले ही वेब फ़ॉन्ट वहाँ कैश्ड है मर्जी एक देरी दे. इस प्रश्न सूत्र में बहुत सारी टिप्पणियां हैं जो अन्यथा कह रही हैं और यह गलत है कि कैश्ड फोंट इस तरह का व्यवहार करते हैं, लेकिन पी.वी. उपरोक्त लिंक से:

किन मामलों में आपको FOUT मिलेगा

• मर्जी: दूरस्थ ttf / otf / woff को डाउनलोड करना और प्रदर्शित करना
• मर्जी: कैश्ड ttf / otf / woff प्रदर्शित करना
• मर्जी: डेटा-यूआरआई ttf / otf / woff डाउनलोड करना और प्रदर्शित करना
• मर्जी: एक कैश्ड डेटा-uri ttf / otf / woff प्रदर्शित करना
• नहीं होगा: एक फ़ॉन्ट प्रदर्शित करना जो पहले से ही स्थापित है और आपके पारंपरिक फ़ॉन्ट स्टैक में नाम है
• नहीं होगा: स्थानीय () स्थान का उपयोग करके स्थापित और नामित एक फ़ॉन्ट प्रदर्शित करना

चूंकि रेंडर करने से पहले क्रोम जोखिम का इंतजार करता है, इसलिए इससे देरी होती है। किसको सीमा प्रभाव दिखाई देता है (विशेषकर जब कैश से लोड हो रहा है) अन्य चीजों पर निर्भर करता है जो पाठ की मात्रा को प्रदान करने की आवश्यकता है और शायद अन्य कारक हैं, लेकिन कैशिंग पूरी तरह से प्रभाव को दूर नहीं करता है.

पोस्ट के नीचे 2011-04-14 के अनुसार आयरिश व्यवहार में ब्राउज़र व्यवहार के बारे में कुछ अपडेट हैं:

• फ़ायरफ़ॉक्स (FFb11 और FF4 फाइनल के रूप में) अब FOUT नहीं है! Wooohoo! Http: //bugzil.la/499292 मूल रूप से पाठ 3 सेकंड के लिए अदृश्य है, और फिर यह फॉलबैक फ़ॉन्ट वापस लाता है। वेबफ़ॉन्ट शायद उन तीन सेकंड के भीतर लोड होगा ... हालांकि ... उम्मीद है
• IE9 WOFF और TTF और OTF का समर्थन करता है (हालाँकि इसके लिए आपको एक एम्बेडिंग बिटसेट चीज़ की आवश्यकता होती है- यदि आप OOO का उपयोग करते हैं तो ज्यादातर लूट). हालाँकि!!! IE9 में FOUT है. :(
• वेबकिट में एक पैच होता है जो 0.5 सेकंड के बाद फ़ॉलबैक टेक्स्ट दिखाने के लिए लैंड करता है। एफएफ के रूप में एक ही व्यवहार लेकिन 3 के बजाय 0.5 एस.

यदि यह डिजाइनरों के लिए एक प्रश्न था, तो व्यक्ति इस तरह की समस्याओं से बचने के तरीकों में जा सकता है webfontloader, लेकिन यह एक और सवाल होगा। पॉल आयरिश लिंक इस मामले पर और विस्तार से बताता है.

स्पष्टीकरण में कुछ जोड़ना है? टिप्पणियों में ध्वनि बंद। अन्य टेक-सेवी स्टैक एक्सचेंज उपयोगकर्ताओं से अधिक उत्तर पढ़ना चाहते हैं? पूरी चर्चा धागा यहाँ देखें.