अनस्टाइलड विषयवस्तु का फ्लैश

From Vigyanwiki
Revision as of 19:56, 16 June 2023 by alpha>Indicwiki (Created page with "{{short description|Phenomenon in web browsers}} File:Wikipedia FOUC.png|thumb|विकिपीडिया के मुख्य पृष्ठ को लोड कर...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
विकिपीडिया के मुख्य पृष्ठ को लोड करते समय FOUC।

बिना स्टाइल वाली सामग्री का एक फ्लैश (या बिना स्टाइल वाला टेक्स्ट का फ्लैश, FOUC)[1][2] एक ऐसा उदाहरण है जहां एक बाहरी सीएसएस स्टाइलशीट लोड करने से पहले एक वेब पृष्ठ ब्राउज़र की डिफ़ॉल्ट शैलियों के साथ संक्षिप्त रूप से प्रकट होता है, क्योंकि वेब ब्राउज़र इंजन सभी जानकारी प्राप्त करने से पहले पेज को प्रस्तुत करता है।[3] जैसे ही शैली नियम लोड और लागू होते हैं, पृष्ठ स्वयं को सुधार लेता है; हालाँकि, पारी विचलित करने वाली हो सकती है। संबंधित समस्याओं में अदृश्य टेक्स्ट का फ्लैश और नकली टेक्स्ट का फ्लैश शामिल है।[1][2]


तकनीकी जानकारी

इस मुद्दे को फ्लैश ऑफ अनस्टाइल्ड कंटेंट नाम के एक लेख में दर्ज किया गया था।[4] सबसे पहले, FOUC इंटरनेट एक्सप्लोरर के लिए एक अद्वितीय ब्राउज़र समस्या प्रतीत हुई लेकिन बाद में अन्य ब्राउज़रों में स्पष्ट हो गई,[5][6] और उसके बाद से एक सफारी (वेब ​​​​ब्राउज़र) महामारी के रूप में वर्णित किया गया है।[7] सीएसएस या एचटीएमएल संस्करणों में बदलाव के लिए अशैली वाली सामग्री का एक फ्लैश उदासीन है। यह समस्या, जो मूल सामग्री को अप्रभावित छोड़ देती है, ब्राउज़र में क्रमादेशित प्राथमिकताओं के एक सेट से उत्पन्न होती है।[citation needed] जैसे ही ब्राउज़र HTML और मार्कअप में संदर्भित सभी सहायक फ़ाइलों को एकत्र करता है, ब्राउज़र तुरंत दस्तावेज़ ऑब्जेक्ट मॉडल बनाता है। ब्राउजर पहले टेक्स्ट प्रदर्शित करना चुन सकता है ताकि वह सबसे तेज पार्स कर सके।

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

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

अनस्टाइल वाली सामग्री के फ्लैश का अनुकरण करने के लिए, डेवलपर्स ब्राउज़र ऐड-ऑन का उपयोग कर सकते हैं जो फ्लाई पर वेब पेज के सीएसएस को अक्षम करने में सक्षम हैं। फायरबग (सॉफ्टवेयर) और Async CSS ऐसे ऐड-ऑन हैं। अन्य तकनीकों में मैन्युअल रूप से किसी पृष्ठ को CSS घटकों की लोडिंग को पूरा करने से रोकना शामिल है। एक अन्य विकल्प स्क्रिप्ट-ब्लॉकिंग टूल का उपयोग करने पर जोर देता है।

हालांकि, 2016 तक, अवांछित प्रदर्शन व्यवहारों से बचने के लिए कई अलग-अलग तकनीकों का विकास किया गया था,[2]Google क्रोम संस्करण 50 में प्रतिपादन व्यवहार में बदलाव, जिससे जावास्क्रिप्ट द्वारा इंजेक्ट की गई स्टाइलशीट को आप ऊब जाएंगे 5 विनिर्देश द्वारा आवश्यक पृष्ठ लोडिंग को अवरुद्ध करने से रोका जाता है, जिससे वेबसाइट निर्माताओं के ध्यान में फिर से स्थिति आ जाती है, विशेष रूप से प्रकार के उपयोगकर्ता प्रभावित होते हैं, एक वेब टाइपोग्राफी उत्पाद एडोब सिस्टम्स से।[1]2 महीने के भीतर, अवांछित प्रतिपादन व्यवहार से बचने के लिए Adobe ने अपने फोंट को तीसरे पक्ष की वेबसाइटों में शामिल करने के तरीके को बदल दिया था।[8]


यह भी देखें

संदर्भ

  1. 1.0 1.1 1.2 Tim Brown (3 June 2016). "Regarding the Flash of Unstyled Text in Chrome 50". Adobe Typekit blog. Adobe Systems. Archived from the original on Sep 1, 2016. Retrieved 9 August 2016.
  2. 2.0 2.1 2.2 Coyier, Chris (1 April 2015). "फूट, एफओआईटी, एफओएफटी". CSS Tricks. Archived from the original on 15 August 2020. Retrieved 9 August 2016.
  3. Boudreaux, Ryan (October 18, 2013). "अपनी वेबसाइटों पर अनस्टाइल्ड सामग्री के फ्लैश को कैसे रोकें". TechRepublic (in English). Archived from the original on 2021-03-05. Retrieved 2021-10-09.
  4. "अनस्टाइल्ड कंटेंट का फ्लैश (FOUC)". Blue Robot. 2001. Archived from the original on May 13, 2015. Retrieved 12 October 2012.
  5. Winner, Judith (2010-04-19). "अनस्टाइल्ड कंटेंट का फ्लैश (FOUC)". Bugzilla@Mozilla. Archived from the original on 5 November 2016. Retrieved 14 October 2016.
  6. "क्रोमियम बग जिसमें 'FOUC' है". bugs.chromium.org. Archived from the original on 18 October 2016. Retrieved 14 October 2016.
  7. Dave Hyatt (1 September 2006). "एफओयूसी समस्या". Surfin' Safari. The WebKit Open Source Project. Archived from the original on 30 August 2012. Retrieved 16 October 2012. The FOUC problem would normally be a minor occurrence. However with the advent of Google AdSense, FOUC has become a Safari epidemic. Because these Google ads not only execute inline script but access layout information that they often don't even end up using in the page, the problem of FOUC is much more severe than it should be.
  8. Bram Stein (28 July 2016). "टाइपकिट पर सर्विंग वेब फॉन्ट में परिवर्तन". Adobe Typekit blog. Adobe Systems. Archived from the original on 15 August 2016. Retrieved 9 August 2016.