हम विटाली फ्रिडमैन के साथ वेब का अनुकूलन करते हैं: डाउनलोड गति, मेमोरी, सीपीयू

फ्रंट-एंड डेवलपमेंट में सभी तरह के ट्रिक्स के बारे में यह दूसरी पोस्ट है। इसने अपर्याप्त रैम और धीमी सीपीयू के साथ उपकरणों पर इसकी लोडिंग गति, साइट के अनुकूलन का मुद्दा उठाया।

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



सामग्री पवित्रजेएस 2018 पाइटर सम्मेलन से विटाली की रिपोर्ट के प्रतिलेख पर आधारित है।

पहला भाग यहाँ है: हम विटाली फ्रिडमैन के साथ वेब का अनुकूलन करेंगे, - संपीड़न, चित्र, फ़ॉन्ट, HTTP / 2 और संसाधन संकेत ।
दूसरा भाग:

सरसों और धीमी डिवाइस

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


ब्राउज़र परिभाषा के लिए स्निपेट उदाहरण


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

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

इसलिए, आज इस तकनीक का उपयोग करना संभव नहीं है।

अपनी जेब में मोटो जी 4 के साथ गूगल का पालन करें

क्यों नहीं उत्तरदायी लेआउट केवल उन उपकरणों पर दिखाई देते हैं जो इसे हार्डवेयर संसाधनों के संदर्भ में "पुल" करते हैं? ऐसा करने के लिए, हम डिवाइस मेमोरी एपीआई का उपयोग कर सकते हैं। यदि यह एपीआई उपलब्ध नहीं है, तो आप "सरसों काट" ​​कर सकते हैं।

और यहाँ Moto G4 ही है:


नीचे दिए गए आंकड़े में आप देख सकते हैं कि Moto G4 फोन की रैंकिंग में उस समय की कसौटी पर स्थित है जिसके लिए जावास्क्रिप्ट को पार्स किया गया है। यह एक औसत है - और ऐसे कई फोन हैं। रेटिंग के नेता की तुलना में, इस फोन को पार्सिंग के लिए 16 गुना अधिक समय चाहिए।



यदि आप मोबाइल फोन पर साइटों के डेटा को देखते हैं, तो आप देख सकते हैं कि अधिकांश समय जेएस को पार्स करने पर खर्च किया जाता है।


पीला पृष्ठ पार्सिंग समय इंगित करता है

वास्तव में, यह एक बहुत बड़ी समस्या है। 1 मेगाबाइट स्क्रिप्ट को पार्क करने के लिए, Moto G4 को 35 सेकंड लगते हैं। यह देखते हुए कि अधिकांश साइटें साइट पर संपूर्ण स्क्रिप्ट का केवल 40% का उपयोग करती हैं, आप पार्सिंग के समय को कम करने के लिए इस स्थिति से बाहर निकलने का एक तरीका खोजने की कोशिश कर सकते हैं। उदाहरण के लिए, जीमेल ने सभी कोड पर टिप्पणी की और इसे एक पाठ चर के रूप में भेजा, और फिर, जब इस कोड की आवश्यकता थी, तो यह चर स्पष्ट था।

Google अनुशंसा करता है कि एक तथाकथित टाइम टू इंटरएक्टिव बजट है, जिस अवधि के दौरान अधिकांश उपयोगकर्ता साइट के साथ बातचीत करने के अवसर की प्रतीक्षा करते हैं - और यह केवल 5 सेकंड है। यह देखते हुए कि 1.6 सेकंड नेटवर्क इंटरैक्शन में जाते हैं, हमारे पास केवल 3.4 सेकंड बचे हैं - अर्थात, यदि हम 400kbps की औसत कनेक्शन गति लेते हैं, तो इस दौरान हम अधिकतम 170KB डेटा भेज सकते हैं। यह तत्काल उपयोग के लिए उपयुक्त कुछ भी भेजने के लिए पर्याप्त नहीं है। यह देखते हुए कि इसमें फ्रेमवर्क, यूटिलिटीज, क्रिटिकल पाथ, js, css, html शामिल हैं, डेटा की यह राशि बहुत कम है।



170 KB में एप्लिकेशन की कोर कैसे फिट करें? Google कई अलग-अलग मेट्रिक्स की सिफारिश करता है जिनका आप उपयोग कर सकते हैं, वे समय के अनुसार चरणों में लोड को विभाजित करते हैं: समय-से पहली बाइट (नेविगेशन शुरू होता है) - पहले बाइट प्रसारित होने से पहले, पहले पेंट - जब तक पहली तस्वीर लोड नहीं होती, तब तक पहले विवादास्पद पेंट - जब तक कि साइट पर नेविगेशन दिखाई नहीं देता। , पहला सार्थक पेंट - जब लगभग सब कुछ सामग्री के लिए तैयार है, तो दृश्यमान तैयार - पूरे पृष्ठ को लोड करने से पहले, इंटरएक्टिव करने का समय - जब तक कि पेज के साथ बातचीत करना संभव न हो, तब तक पूरी तरह से लोड - जब पेज पूरी तरह से तैयार हो।



सामान्य तौर पर, इस तरह की मीट्रिक प्रत्येक साइट के लिए विशेष होगी, इसलिए हमें अपनी परियोजना के लिए भी अपनी रचना करने की आवश्यकता है। तो, आज की तरह इष्टतम प्रदर्शन आधार रेखा क्या है?



छवि दिखाती है कि आपके मीट्रिक को विकसित करते समय आपको किन पहलुओं और लक्ष्यों को ध्यान में रखना चाहिए।

डाउनलोड स्पीड कैसे बढ़ाये?

लोडिंग समय की लड़ाई में उपयोग करने के लिए क्या उपयोगी है? उदाहरण के लिए, कोड-कवरेज टूल - पेज कोड की कवरेज देखने के लिए। यह यह भी दिखाता है कि कोड का कितना प्रतिशत उपयोग नहीं किया गया है।


आप अभी भी जावास्क्रिप्ट बंडल ऑडिटिंग का उपयोग कर सकते हैं। यदि आप कुछ तीसरे पुस्तकालयों का उपयोग करते हैं, तो आप उन्हें रनटाइम का उपयोग करके हटा सकते हैं, उदाहरण के लिए, वेबपैक-लिबास-अनुकूलन। और, ज़ाहिर है, आपको gif को छोड़ने की आवश्यकता है। वीडियो को मना करना संभव है, क्योंकि वीडियो कंटेनर को पार्स करने में भी लंबा समय लगता है। यदि आप वीडियो को मना नहीं कर सकते, तो इसे रखने के लिए < img src > कंटेनर का उपयोग करें।

यहां तक ​​कि अगर आपके पास पृष्ठ पर उत्तरदायी छवियां हैं, तो आप उत्तरदायी छवि ब्रेकप्वाइंट जनरेटर का उपयोग कर सकते हैं। यह उत्तरदायी लेआउट से छवियों के समूहों या छवियों के समूहों को उत्पन्न करने में मदद करेगा। आप निर्दिष्ट कर सकते हैं कि जनरेटर इंजन का उपयोग करके आपको कितने किलोबाइट की तस्वीर की आवश्यकता है। इसके अलावा, टूल साइट पर खुद ही मार्कअप बनाता है।



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

मान लीजिए कि आपके पास बहुत सारी तस्वीरें हैं। फिर आप LazySizes की मदद का सहारा ले सकते हैं। यह एक पुस्तकालय है जो पिछले उपकरण के समान है, लेकिन केवल जावास्क्रिप्ट का उपयोग कर रहा है।



आप देख सकते हैं कि पार्सिंग होने पर समय कहाँ जाता है।
एक दिलचस्प उपकरण प्राथमिकता संकेत है - इसमें आप ब्राउज़र से पूछ सकते हैं कि पहले डाउनलोड करने के लिए क्या महत्वपूर्ण है और बाद में क्या है।

लेकिन क्रिटिकल CSS का क्या करें? यदि आपके पास एक अच्छा सर्वर और सीडीएन है, तो यह आवश्यक नहीं है कि ब्राउज़र HTTP / 1 होने पर दूसरा कनेक्शन खोलने का प्रयास करें। और अगर यह HTTP / 2 है, तो वे "अनुमान" लगाने की कोशिश करते हैं कि कौन सी CSS की आवश्यकता है और जो नहीं है। इसलिए, यह परीक्षण करने के लायक है कि महत्वपूर्ण सीएसएस संस्करण कैसे काम करता है और कैसे - यदि महत्वपूर्ण सीएसएस को रूट में एक अलग फ़ाइल के रूप में सहेजा गया है।

Guess.js

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

वेबपैक के लिए एक अनुमान प्लगइन है जिसे आप आज़मा सकते हैं।



यह सब एक वैश्विक स्तर पर होता है: मशीन लर्निंग और आर्टिफिशियल इंटेलिजेंस पर आधारित अधिक से अधिक सेवाएं हैं जो न केवल उपयोगकर्ताओं, बल्कि डेवलपर्स के जीवन को बेहतर बना सकती हैं। ऐसा उपकरण है, उदाहरण के लिए, Airbnb में: एयर / शॉट्स, एक खोज इंजन जिसे इस कंपनी के डिजाइनर और डेवलपर्स उपयोग कर सकते हैं। इसमें, आप टैग द्वारा घटक पा सकते हैं, उनके कनेक्शन देख सकते हैं और परियोजना के कार्यान्वयन के लिए आवश्यक का चयन कर सकते हैं।

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



एक और टिप: ध्यान से विकास के लिए एक रूपरेखा चुनें। मान लें कि हमें निम्नलिखित बातों पर विचार करने की आवश्यकता है: नेटवर्क स्थानांतरण, पार्स / संकलन, रनटाइम लागत। बेशक, इसके लिए उपकरण हैं, उदाहरण के लिए, आप यह परीक्षण कर सकते हैं कि आपका एप्लिकेशन विभिन्न डेटा नेटवर्क में कैसे काम करेगा: 2 जी, 3 जी, वाई-फाई।

समस्या यह है कि HTTP / 2, निश्चित रूप से, एक अच्छा नया मानक है, लेकिन यह हमेशा HTTP / 1 की तुलना में तेज़ होता है, और दूसरी बात, यह धीमे कनेक्शन पर बहुत धीमा है, खासकर अगर यह एक मोबाइल डिवाइस है। एक और समस्या है कि यह सर्वर पुश है: यदि सर्वर पुश है, तो यह महत्वपूर्ण सीएसएस के लिए एक आदर्श प्रतिस्थापन होगा। इस स्थिति में, उपयोगकर्ता, index.html का अनुरोध करते हुए, इसे महत्वपूर्ण.केएस उपांग में प्राप्त करेगा। लेकिन जैसे ही हम सर्वर से एक पेज का अनुरोध करते हैं, बाद वाले को हमेशा यह नहीं पता होता है कि यह कैश में है या नहीं।

इसलिए, कैश-डाइजेस्ट नामक एक तंत्र अब विकसित किया जा रहा है: यदि हम पहली बार पृष्ठ पर जाते हैं, तो सर्वर पुश होता है, यदि कोई पुश नहीं - कोई दोहराव नहीं। यदि यह पृष्ठ की पहली यात्रा नहीं है, तो सर्वर अभी भी धक्का देगा। यह एक समस्या है जिसे Google ने QUIC का उपयोग करके ठीक करने का निर्णय लिया है। यह HTTP पर एक ऐड-ऑन है, जो तंत्र को अधिक विचारशील बना देगा, यह UDP प्रोटोकॉल पर टीसीपी के बजाय काम करता है।



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

सेवा कर्मी

शायद वे हमारी मदद कर सकते हैं? आँकड़ों को देखते हुए, यदि वे कैशिंग के लिए उपयोग किए जाते हैं, तो वे एक ठोस प्रदर्शन को बढ़ावा देते हैं। पहला फोंट का अनुकूलन है, दूसरा सेवा कर्मचारियों को अनुकूलित कर रहा है।



सर्विस वर्कर कैसे बनाएं? आप PWA बिल्डर का उपयोग कर सकते हैं, यह आपके एप्लिकेशन को और अधिक प्रगतिशील बनाने के लिए आपके लिए एक आइकन और प्रकट भी करेगा।



एक अद्भुत PWA आँकड़े साइट है जो PWA के साथ काम करने पर विभिन्न कहानियों और मामलों को एकत्र करती है।

तृतीय-पक्ष स्क्रिप्ट - बुराई की ओर एक कदम?

यदि आप साइट पर तृतीय-पक्ष स्क्रिप्ट स्थापित करते हैं, तो क्या प्रदर्शन में सुधार करने में कोई समझदारी होगी, क्या उन्होंने साइड से अधिक स्क्रिप्ट लोड की और अंततः उपयोगकर्ता के डिवाइस को अधिभारित किया?


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

इस जानकारी का पता लगाने के लिए, एक अनुरोध मानचित्र उपकरण है।



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

Chrome अपने स्वयं के विज्ञापन अवरोधक के साथ अनुचित विज्ञापन को अवरुद्ध करने का प्रयास करता है। सबसे अच्छा विज्ञापन गठबंधन के आधार पर।

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

तो आप कैसे समझते हैं कि जब आप उन्हें नहीं देख रहे हैं तो तीसरे पक्ष की स्क्रिप्ट क्या कर रही हैं? उन्हें नियंत्रित करने के लिए उपकरणों का उपयोग करने के लिए, उदाहरण के लिए, requestmap.webperf.tools का उपयोग करके, हम साइट और तृतीय-पक्ष स्क्रिप्ट का ऑडिट कर सकते हैं। आप आईडी द्वारा बाद में आंकड़े देख सकते हैं: requestmap.webperf.tools/render/ [ईआईडी]

नीचे पृष्ठ पर रिपोर्ट के साथ CSV फ़ाइल डाउनलोड करने के लिए एक लिंक दिया गया है:



तब आप टर्मिनल के माध्यम से डेटा पार्स कर सकते हैं:



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

हमेशा की तरह, इसके लिए उपकरण भी हैं। आप इस CSV को Excel में सम्मिलित कर सकते हैं और आपके पास जो तृतीय-पक्ष अनुप्रयोग हैं, उनका कितना विस्तृत विवरण प्राप्त कर सकते हैं कि वे "कितना" वजन करते हैं, वे कितना लोड करते हैं। और भी दिलचस्प है ब्लैकहोल सर्वर, अपने आईपी की कोशिश करना:



यह पता लगाने के लिए कि आपके आवेदन का व्यवहार कैसा होगा यदि सभी तृतीय-पक्ष एप्लिकेशन टाइमआउट में जाते हैं, तो इस आईपी को होस्ट्स फ़ाइल में जोड़ें और देखें कि आपके आवेदन का क्या होता है।



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



यदि यह जमा देता है तो किसी तृतीय-पक्ष स्क्रिप्ट को ब्लॉक या निकालने के लिए किसी सेवा कार्यकर्ता का उपयोग करें।

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

आप इसके बारे में डेनिस मिशुनोव के लेख में पढ़ सकते हैं "अब आप मी देखें: हाउ टू डेफर, हेज़-लोड-लोड एंड एक्ट विद इंटर्सेक्शन ऑब्जर्वर", हैरी रॉबर्ट्स "इट्स माई (थर्ड) पार्टी, और आई विल क्राई आई वांट टू" , Yoav Weiss "तृतीय-पक्ष सामग्री पर नियंत्रण वापस लेना"।

उत्तरदायी ईमेल

ईमेल न्यूज़लेटर के लेआउट की अपनी विशेषताएं और नियम हैं। अक्षरों में चित्रों को प्रदर्शित किए बिना ग्राहकों के लिए Img टैग को किसी चीज़ के लिए बदलने की आवश्यकता होती है, इसलिए ऊँची विशेषताओं और अन्य काले जादू का उपयोग किया जाता है।



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


यहाँ इस तरह के जादू का एक उदाहरण दिया गया है :


बॉक्स क्लास का अंतिम मूल्य क्या है? स्थिति के आधार पर, विनिर्देश के अनुसार, हम इसे पढ़ते हैं: यदि चौड़ाई-मान अधिकतम-चौड़ाई से अधिक है, तो अधिकतम-चौड़ाई प्राथमिकता में है।

लेकिन यदि न्यूनतम-चौड़ाई चौड़ाई या अधिकतम-चौड़ाई से अधिक है, तो न्यूनतम-चौड़ाई लागू होती है।

इसका उपयोग तब किया जा सकता है जब मीडिया के प्रश्नों का समर्थन नहीं किया जाता है। यहाँ एक उदाहरण है: मोबाइल पर चार में से दो कॉलम कैसे बनाएं? उत्तर है:



मोटे तौर पर, चौड़ाई का मान यह निर्धारित करता है कि अधिकतम या न्यूनतम-चौड़ाई जीतती है या नहीं। यह एक भव्य हैक है!

इंटरेक्टिव लेटर कैसे बनाये? उदाहरण के लिए, वहां लाइव ट्विटर फ़ीड जोड़ें। हाँ यह संभव है! सभी ट्वीट्स के साथ एक तस्वीर है, जो सर्वर पर हर 2 सेकंड में उत्पन्न होती है, हम इसे और इसे पसंद करते हैं। यहाँ समाधान है।

एक इंटरेक्टिव ईमेल कैसे बनाया जाए जिसमें आप पूरे ऑर्डर और उत्पाद का चयन कर सकें? छवि को देखो और तुम समझ जाओगे:



लेबल, जाँच और input'ah से जुड़ा तर्क। यह एक लंबी श्रृंखला को बदल देगा, लेकिन, फिर भी, यह करना संभव है। यहां प्रयुक्त तत्वों के आंकड़ों के साथ एक उदाहरण दिया गया है। कृपया ध्यान दें, कीमत को काउंटर और वेतन वृद्धि के माध्यम से भी माना जाता है:



यह शानदार प्रतीत होगा, यह पता चलता है कि ईमेल के माध्यम से आप किसी व्यक्ति को खरीद सकते हैं। लेकिन सब कुछ इतना सरल नहीं है, ईमेल में वर्णों की संख्या (12000) की एक सीमा है, समर्थन: जाँच की गई और संदेश का आकार 102kb तक सीमित है।

फिर भी, ये आज विपणन में मुख्य रुझान हैं, और इसे रेखांकन में देखा जा सकता है:



इसलिए Google ने AMP बनाया। आपकी इच्छा के अनुसार पत्र में आवश्यक मार्कअप को स्वचालित रूप से उत्पन्न करना आवश्यक है।

चर फ़ॉन्ट्स

लॉरेंस पेनी ने इस विषय पर एक उपयोगी प्रस्तुति दी है, एक नज़र रखना सुनिश्चित करें।

यहाँ एक टिप्पणी है हकोन वैम ले, उन लोगों में से एक जिन्होंने फॉन्ट विनिर्देश लिखा है:


यह इस तरह लगता है: “एक कारण है कि हमने भविष्य में मध्यवर्ती मूल्यों का समर्थन करने के लिए तीन अंकों की संख्या (फ़ॉन्ट-वजन मान के लिए विनिर्देश में) का उपयोग करना चुना। और भविष्य पहले ही आ चुका है। ”

एशिया में फोंट के साथ एक बहुत बड़ी समस्या: कुल बड़ी संख्या में चित्रलिपि और उनकी विभिन्न शैलियों को देखते हुए। Hieroglyphs के लिए अलग-अलग फोंट लोड करने से बड़ी प्रदर्शन समस्या हो सकती है। सौभाग्य से, अब हमारे पास चलने योग्य फोंट हैं, जिसके लिए आप केवल तीन अंकों के मूल्यों को निर्दिष्ट कर सकते हैं, जिस व्यक्ति ने विनिर्देश लिखा था।



यह दो चरित्र शैलियों को बनाने के लिए डिजाइनर के लिए पर्याप्त है - मूल्य 1000 के लिए बहुत मोटा, और मूल्य के लिए बहुत पतला 1. अन्य सभी शैलियों को आवश्यक होने पर स्वचालित रूप से बनाया जाता है। लेकिन यह न केवल चौड़ाई अक्ष के लिए सच है, यह ऊंचाई के साथ भी काम करता है।



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



वांछित फ़ॉन्ट सेट करने वाले फ़ॉन्ट डिज़ाइनर का एक उदाहरण इस प्रकार है:



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

संक्षेप में प्रस्तुत करना

संक्षेप में, हम कह सकते हैं कि विनिर्देशों को पहले की तुलना में बहुत तेजी से स्वीकार किया गया है। दो महीने बीत जाते हैं और नए मानक, दृष्टिकोण, आवेदन दिखाई देते हैं। लेकिन यह सामान्य है, जैसा कि यह होना चाहिए, यह आगे विकसित करने का एक अवसर है।

यदि आपको रिपोर्ट पसंद आई है, तो ध्यान दें: 24-25 नवंबर को मॉस्को में एक नया होलीजेएस आयोजित होगा, और वहां कई दिलचस्प चीजें भी होंगी। कार्यक्रम के बारे में पहले से ही ज्ञात जानकारी साइट पर है, और वहां टिकट खरीदे जा सकते हैं।