🍔 🍃 👩🏿‍⚕️ फ़ीचर-पॉलिसी HTTP हेडर और वेब ब्राउज़र कंट्रोल 🖕🏿 🔆 ⛎

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

Feature-Policy: geolocation 'none'

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

ओवरसाइज़्ड-इमेज पॉलिसी

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

नीति ( निर्देश )oversized-imagesब्राउज़र को बताता है कि उसे उन छवियों के उपयोग की अनुमति नहीं दी जानी चाहिए, जिनका आकार कई गुना अधिक है, उनके कंटेनरों का आकार। मानक प्रतिबंध के अनुसार, छवि कंटेनर के 2 गुना से अधिक नहीं हो सकती है। लेकिन यह मान, यदि आवश्यक हो, को फिर से परिभाषित किया जा सकता है।

इसलिए, यदि ब्राउज़र अगला हेडर प्राप्त करता है, तो यह आपको किसी भी स्रोत से ली गई छवियों को प्रदर्शित करने की अनुमति नहीं देगा (यह सेट धन्यवाद है none), जिसके आयाम उनके कंटेनरों के आकार (चौड़ाई या ऊंचाई में) से 2 गुना अधिक हैं।

Feature-Policy: oversized-images 'none';

यदि आपको अधिक लचीलेपन की आवश्यकता है, तो आप ब्राउज़र को बता सकते हैं कि इसमें ऐसे चित्र प्रदर्शित नहीं होने चाहिए जो कंटेनरों की तुलना में 3 गुना अधिक हों:

Feature-Policy: oversized-images *(3) 'none';

किसी भी मामले में, यदि छवि निर्दिष्ट सीमाओं में फिट नहीं होती है, तो छवि के बजाय एक स्टब प्रदर्शित किया जाएगा, और कंसोल को एक त्रुटि संदेश भेजा जाएगा।

यदि साइट ओवरसाइज़्ड-इमेज पॉलिसी का उपयोग करती है, तो बड़ी छवियों को अपलोड किया जाएगा, लेकिन इसके बजाय एक स्टब प्रदर्शित किया जाएगा, और कंसोल में एक त्रुटि संदेश प्रदर्शित किया जाएगा।

अयोग्य चित्र

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

अन्य बातों के अलावा, यहां आप कई स्वरूपों द्वारा समर्थित सामान्य छवि संपीड़न को याद कर सकते हैं, जो आपको तस्वीर की गुणवत्ता और फ़ाइल आकार के बीच सही संतुलन प्राप्त करने की अनुमति देता है। Unoptimized-हानिपूर्ण-छवियों और unoptimized-दोषरहित-छवियों

नीतियों ब्राउज़र पता है कि यह फ़ाइल आकार और पिक्सेल में छवि आकार से मेल खाता हैं।

Feature-Policy: unoptimized-lossy-images 'none';
Feature-Policy: unoptimized-lossless-images 'none';

यदि प्रति पिक्सेल बाइट्स (बाइट-प्रति-पिक्सेल, बीपीपी) की संख्या बहुत अधिक है, तो ब्राउज़र छवि के बजाय एक स्टब प्रदर्शित करेगा और कंसोल में एक त्रुटि संदेश प्रदर्शित करेगा।

अडॉप्टिमाइज्ड- * नीतियों को लागू करने से अनुचित छवियों के बजाय एक ठूंठ का कारण बनता है - बस ओवरसीज़-इमेज पॉलिसी का उपयोग करने की तरह

, हानिरहित संकुचित छवियों के लिए अनुशंसित बीपीपी स्तर 0.5 और दोषरहित संपीड़ित छवियों के लिए 1 है। इसके अलावा, जब छवियों का विश्लेषण किया जाता है, तो इन स्तरों से उनके कुल आकार का थोड़ा विचलन अनुमत होता है। अब नुकसान के साथ संपीड़ित छवियों के लिए यह विचलन 1 Kb है, बिना नुकसान के संपीड़ित छवियों के लिए - 10 Kb।

उदाहरण के लिए, मान लें कि हमारे पास 200x200 पिक्सेल की JPEG छवि है। JPEG एक हानिपूर्ण छवि संपीड़न प्रारूप है, जिसके परिणामस्वरूप अनुशंसित BPP स्तर 0.5 है। उसी समय, कुल छवि आकार केवल 1 Kb द्वारा अनुशंसित आकार से अधिक हो सकता है। यह पता लगाने के लिए कि ब्राउज़र में एक समान छवि किस आकार की होनी चाहिए, आपको एक-दूसरे और बीपीपी द्वारा पिक्सेल में छवि के पक्षों के आयामों को गुणा करने की आवश्यकता है, और फिर जो होता है उसके लिए अनुमत विचलन जोड़ें।

(200 x 200 x .5) + 1024 = 21,024बाइट, या 20.5Kb

यदि छवि को बिना नुकसान के संकुचित किया जाता है, तो 10 Kb के "आदर्श" आकार से एक विचलन की अनुमति है, जबकि ऐसी छवि का BPP 1 होगा। अन्यथा, गणना बिल्कुल समान दिखती हैं:

(200 x 200 x 1) + 10,240 = 50,240बाइट, या 49.1Kb

अनुमत विचलन का आकार भविष्य में बदलने की संभावना है। वास्तव में, हालांकि, ब्लिंक, डिफ़ॉल्ट रूप से, बिना किसी नुकसान के संपीड़ित छवियों के लिए इस सूचक का उपयोग करता है, 10 Kb के बराबर, पहले से ही एक नीति के साथ प्रयोग चल रहे हैं unoptimized-lossless-images-strictजो इस सूचक को बदलता है, इसे 1 Kb के स्तर तक कम करता है।

मीडिया निर्दिष्ट नहीं है

नई अच्छी तरह से भूल गया पुराना है।

एक लंबे समय के लिए छवि विशेषताओं का उपयोग height, और widthकम या ज्यादा सामान्य था। इन विशेषताओं के बिना, ब्राउज़र को पता नहीं था कि छवि को कितनी जगह पर कब्जा करना चाहिए जब तक कि छवि लोड नहीं हुई थी। इससे पेज लेआउट में बदलाव आया। पृष्ठ प्रदर्शित किया गया था, और फिर, छवि आने के बाद, इसकी सामग्री स्थानांतरित हो गई। ब्राउज़र को एक बार फिर से छवि के लिए जगह आवंटित करने के लिए लेआउट को फिर से बनाना पड़ा।

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

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

नीति ब्राउज़र को बताती है कि सभी मीडिया तत्वों में ऐसे गुण होने चाहिए जो इन तत्वों के आकार को निर्दिष्ट करते हैं। यदि ऐसी कोई विशेषताएँ नहीं हैं, तो ब्राउज़र को डिफ़ॉल्ट मानों का उपयोग करना चाहिए। सब कुछ, वास्तव में, थोड़ा अधिक जटिल है, लेकिन लब्बोलुआब यह है कि अगर छवि में उपयुक्त विशेषताएं नहीं हैं, तो ब्राउज़र मानक पिक्सेल मूल्य का उपयोग करता है ।300x150

Feature-Policy: unsized-media 'none';

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

अनसुलझी-मीडिया नीति के आवेदन से तथ्य यह होता है कि ऊँचाई और चौड़ाई विशेषताओं के बिना चित्र और वीडियो प्रदर्शित किए जाते हैं, लेकिन ब्राउज़र अपने आकार को 300x150 पिक्सेल पर सेट करता है।

संभवतः, यह एक विशेषता का उल्लेख करने योग्य है, जो पहले मुझे असामान्य लगता था। जब नीतियों को बांटने वह खुद से पता चलताunsized-mediaहै औरoversized-images। इस स्थिति में, किसी को पहले से अधिक की उपस्थिति पर आश्चर्य नहीं होना चाहिए, बहुत बड़ी छवियों के बारे में संदेशों की संख्या। तथ्य यह है कि नीति के आवेदन के कारण,unsized-mediaब्राउज़र उन छवियों का आकार बदलता है,जिनमें विशेषताएँ नहीं होती हैंheightऔरपिक्सेलwidthतक होती300x150हैं। जिसके बाद यह इस आकार का है कि ब्राउज़र यह निर्धारित करने के लिए संदर्भ बिंदु के रूप में उपयोग करता है कि क्या छवि उसके कंटेनर से मेल खाती है।

कम दृश्यमान मुद्दों पर ध्यान आकर्षित करना

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

कई और नीतियां हैं जो उनके प्रदर्शन पर किसी चीज के प्रभाव के लिए पृष्ठों के विश्लेषण के संदर्भ में उपयोगी हो सकती हैं। यह वह जगह है जहां सिंक-स्क्रिप्ट जैसी नीतियां दिमाग में आती हैं (यह नीति सिंक्रोनस स्क्रिप्ट के निष्पादन को रोकती है), sync-xhr(ब्लॉक सिंक्रोनस AJAX अनुरोध) और document-write(ब्लॉक कॉल document.write)।

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

लेकिन, फिर भी, हम एपीआई का उपयोग करके "अदृश्य" नीतियों द्वारा ज्ञात त्रुटियों को बहुत अधिक ध्यान देने योग्य बना सकते हैंउल्लंघन की निगरानी के लिए और पेज पर प्रासंगिक सूचनाएं प्रदर्शित करने के लिए ReportingObserver । इस तरह की अधिसूचनाओं को बहुत ध्यान देने योग्य बनाया जा सकता है।

let reportingAlerts = document.createElement('ul');
  reportingAlerts.setAttribute('id','reportingAlerts');
  document.body.appendChild(reportingAlerts);

const alertBox = document.getElementById('reportingAlerts');

new ReportingObserver((reports, observer) => {
  let fragment = document.createDocumentFragment();
  
  Object.keys(reports).forEach(function(item) {
    let li = document.createElement('li');
    li.textContent = reports[item].body.message + ': ' + reports[item].body.featureId;
    fragment.appendChild(li);
  });
  
  alertBox.appendChild(fragment)
}, {types: ['feature-policy-violation'], buffered: true}).observe();

मैंने CodePen में एक उदाहरण दिया कि यह कैसे दिख सकता है।

फ़ीचर-पॉलिसी हेडर द्वारा निर्दिष्ट नीति उल्लंघनों की सूचनाओं को आप कैसे प्रदर्शित कर सकते हैं, इसका एक उदाहरण। इस तरह की सूचनाएं विकास के माहौल में आउटपुट के लिए तैयार की जाती हैं, या जहां उत्पादन के लिए उत्पादन के लिए परियोजना तैयार की जाती है।

फ़ीचर-पॉलिसी हेडर का कम उपयोग

हेडर का उपयोग करने का बड़ा माइनस Feature-Policyब्राउज़र द्वारा इसका समर्थन है। जाहिर है, अब यह केवल ब्लिंक-आधारित ब्राउज़रों (ओपेरा, एज, क्रोम, सैमसंग) द्वारा समर्थित है। फ़ायरफ़ॉक्स और सफारी ब्राउज़र allowआइटम के लिए विशेषता का समर्थन करते हैं iframe। लेकिन यहां तक कि जहां यह Feature-Policyसमर्थित है, कई नीतियों के स्वास्थ्य को सुनिश्चित करने के लिए, आपको ध्वज को सक्षम करने की आवश्यकता है Experimental Web Platform features(आप इसे पते पर पा सकते हैं about:flags)।

मैं फीचर-पॉलिसी हैडर का उपयोग कैसे करता हूं

शीर्षक का वह शून्य Feature-Policy, जो कि ऊपर उल्लेखित है, मेरे लिए व्यक्तिगत रूप से कोई विशेष समस्या नहीं है। मैं इस हेडर को ब्राउज़र-आधारित पेज चेकर के रूप में परिभाषित नीतियों का उपयोग करना पसंद करता हूं। इसलिए, मुझे Feature-Policyउत्पादन में आवेदन करने , या यह सुनिश्चित करने की आवश्यकता नहीं है कि नीतियां मेरे सभी उपयोगकर्ताओं के लिए काम करती हैं। वे केवल मेरे द्वारा, साथ ही उन लोगों द्वारा आवश्यक हैं जो साइट विकसित कर रहे हैं। मैं, किसी भी मामले में, विकास प्रक्रिया में मुख्य ब्राउज़र के रूप में क्रोम का उपयोग करता हूं। इसलिए, Feature-Policeमेरे कार्य वातावरण में प्रदर्शन सुनिश्चित करना उचित ध्वज को सक्षम करना है। इसके बाद, राजनेता मेरी ओर से बिना किसी अतिरिक्त हस्तक्षेप के काम करते हैं।

मैंने पाया कि हेडर का उपयोग करने का सबसे आसान तरीका Feature-Policyब्राउज़र एक्सटेंशन हैमोडिडर । यह एक्सटेंशन आपको अपनी स्वयं की हेडिंग सेट करने की अनुमति देता है जो पृष्ठों पर देखे जाने पर पारित हो जाते हैं।

ModHeader एक्सटेंशन आपको फ़ीचर-पॉलिसी हेडर विकल्पों को कॉन्फ़िगर करने की अनुमति देता है। यदि वांछित हो, तो उन्हें चालू और बंद किया जा सकता है

। मेरे पास हेडर मूल्यों के तीन सेट हैंFeature-Policyजिनका मैं समय-समय पर उपयोग करता हूं:

oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';
unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';
script-sync 'none'; unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';

मैं अक्सर पहले वाले को चालू रखता हूं। उन वेब पेजों के माध्यम से यात्रा करना बहुत ही रोमांचक है, जिनमें लागू की गई नीतियां लागू होती हैं। यह देखना डरावना है कि कुछ चित्र कितने बड़े हैं। आधुनिक वेब पर कई चीजें हैं जिन्हें बेहतर बनाया जा सकता है।

इसलिए, राजनीति अक्सर पन्नों पर शुरू हो जाती है unsized-media(और मैं यह भी पाप करता हूं), इसलिए इंटरनेट पर सामान्य काम के दौरान इसका उपयोग असुविधाजनक है। इसलिए मैंने इसे एक अलग पॉलिसी में हाइलाइट किया है, जिसे मैं चालू और बंद कर सकता हूं। यही नीतियों पर लागू होता है sync-scripts, जिसके अनुप्रयोग कई साइटों को "तोड़" देते हैं।

मैंने जिन टीमों के साथ काम किया उनमें से कुछ ने विकास के दौरान मेरे द्वारा बताई गई नीतियों का उपयोग करना शुरू किया। यह उन्हें पहले से अदृश्य समस्याओं पर जल्दी ध्यान देने की अनुमति देता है। बेशक, मैं Feature-Policyविकास के माहौल में सभी नीतियों को शामिल करने की सलाह देता हूं, जो आपको त्रुटियों को जल्दी से पहचानने और सही करने की अनुमति देता है।

सारांश

मुझे उम्मीद है कि समर्थन Feature-Policyदिखाई देगा, परिणामस्वरूप, न केवल क्रोम में। हालांकि यह मेरा मुख्य ब्राउज़र है, मुझे अन्य ब्राउज़रों का भी उपयोग करना होगा। अगर वे समर्थन करते हैं तो यह मददगार होगा Feature-Policy। लेकिन यहाँ, हालांकि, हम उस दुर्लभ स्थिति को देखते हैं जब एक निश्चित अवसर का प्रायोगिक समर्थन भी वास्तविक लाभ के लिए पर्याप्त होता है।

सूक्ष्म प्रदर्शन के मुद्दे भी समस्याएं हैं। और ऐसी समस्याओं को अधिक दृश्यमान बनाने की क्षमता सबसे अच्छे तरीकों में से एक है जो एक डेवलपर उन्हें पहचानने और ठीक करने के लिए उपयोग कर सकता है।

प्रिय पाठकों! क्या आप वेब परियोजनाओं में असंगत मुद्दों की पहचान करने के लिए फ़ीचर-पॉलिसी शीर्षक का उपयोग करने की योजना बना रहे हैं?

फ़ीचर-पॉलिसी HTTP हेडर और वेब ब्राउज़र कंट्रोल