नया होम पोर्टल Mail.Ru

मुझे लगता है कि आपमें से कई लोगों ने कम से कम एक बार पुराने Mail.Ru मुख्य पृष्ठ को देखा होगा, जो कि काफी समय से नहीं बदला है। इसलिए, सामान्य समझ के लिए, एक छोटी प्रस्तावना: एक तकनीकी अद्यतन, जिस पर इस पोस्ट में चर्चा की जाएगी, कंपनी में आंतरिक परिवर्तन के बाद संभव हो गया।



नए मुख्य एक का विकास एक बड़ी टीम द्वारा किया गया था: इसमें डिजाइनर, प्रयोज्य विशेषज्ञ और निश्चित रूप से, डेवलपर्स शामिल थे, जिनके बीच में यह ध्यान दिया गया था ।



सबसे पहले, पुराने पेज को टेबल पर रखा गया था और उतनी तेजी से लोड नहीं हुआ जितना हम चाहेंगे। तो, पहली बात यह थी कि डाउनलोड को गति देना।

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

पहले चीजें पहले।

तेजी से लोड हो रहा है

Mail.ru उपयोगकर्ताओं द्वारा एक अच्छा और बहुत धीमा इंटरनेट चैनल दोनों के साथ डाउनलोड किया जाता है। हम चाहते थे कि पोर्टल नेविगेशन, लोगो, डाक और सामाजिक ब्लॉक को जल्द से जल्द प्रदर्शित किया जाए, ताकि धीमी गति वाले चैनल जल्द से जल्द पृष्ठ के साथ काम करना शुरू कर सकें।

<style> /* mailbox styles */ </style> <div class="mailbox"> <!-- mailbox HTML --> </div> <script> // mailbox JS </script> 

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

ब्लॉक को रेंडर करने से रोकने और उसके कार्य को अभी तक निष्पादित नहीं करने के लिए, उदाहरण के लिए, "कस्टम" इंटरफ़ेस तत्वों के साथ मेल ब्लॉक में प्राधिकरण फ़ॉर्म, मूल जेएस कार्यक्षमता इनलाइन स्क्रिप्ट HTML के बाद रखा गया है।

इस प्रकार, त्वरित ब्लॉकों को पृष्ठ लोड के रूप में क्रमिक रूप से प्रदर्शित किया जाता है, और प्रतिपादन के बाद वे पूरी तरह से चालू होते हैं।



फिर आप बाकी ब्लॉक कर सकते हैं।
बाएं कॉलम के बाद, हम बाहरी स्टाइल शीट को लोड करते हैं जिसमें शेष नियम, केंद्रीय कॉलम का HTML, उन्नत कार्यक्षमता स्क्रिप्ट और दाहिने कॉलम का HTML होता है।

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

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



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



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

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



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



बहुत कम उपयोग किए जाने वाले ब्लॉक हैं (विभिन्न प्रचार पॉप-अप की तरह) जिनके कॉल एलिमेंट्स ब्लॉक घोषित किए जाने से पहले स्थित हैं।
उदाहरण के लिए, नए डिज़ाइन के बारे में प्रोमो-प्लेट में लिंक "अधिक जानें", जो अतिरिक्त जानकारी के साथ एक पॉप-अप खोलता है।

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

ऐसी स्थितियों को संभालने के लिए, हम डिफर्ड फ़ंक्शन कॉल की एक सरल प्रणाली का उपयोग करते हैं।
एक हैंडलर को लिंक पर लटका दिया गया है, इस समारोह में इसे कतार में रखा गया है:

 <a onclick="callbackQuery.run(function(){openPopup()});">...</a> 

पृष्ठ के अंत में, कतार हैंडलर को यह आदेश दिया जाता है कि पृष्ठ लोड किया गया है, हैंडलर कतार में संग्रहीत सभी कार्यों को लॉन्च करता है, जिसके बाद इसे स्थानांतरित किए गए सभी नए कार्यों को तुरंत लॉन्च किया जाएगा।

  <div class="popup">...</div> <script> function openPopup(){ … } </script> ... <script> callbackQuery.loaded(); </script> </body> 

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

 <style> @media all and (min-height: 765px) { .logo__link__img_medium { display:none; } } @media all and (min-height: 765px) { .logo__link__img_wide { display:block; } } </style> <span class="logo__link__img logo__link__img_medium"></span> <span class="logo__link__img logo__link__img_wide"></span> 

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

 <script> logos.forEach(function(logo){ if (logo.currentStyle.display === "block"){ document.write("<img … />"); } else { var image = document.createElement("img"); ... } }); </script> 

बेशक, noscript जेएस अक्षम के साथ उपयोगकर्ताओं के लिए दोनों छवियों को प्रदर्शित करता है।

 <noscript> <img class="logo__link__img logo__link__img_medium" … /> <img class="logo__link__img logo__link__img_wide" … /> </noscript> 

सीएसएस

प्रत्येक ब्लॉक की शैलियों को एक दूसरे से अलग किया जाता है और प्रत्येक अपनी फ़ाइल में झूठ बोलते हैं।



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

 /* css/forced-blocks/mailbox.scss */ @import "../../blocks/mailbox/mailbox"; 

 <style> <fest:insert src="css/forced-blocks/mailbox.scss" /> </style> 

बाकी शैलियों को एक एकल फ़ाइल (/css/styles.scss) में एकत्र किया जाता है और बाएं कॉलम के बाद स्थित लिंक के माध्यम से पृष्ठ पर अपलोड किया जाता है।

 @import "blocks/news/_news.scss"; @import "blocks/text-banner/_text-banner.scss"; @import "blocks/banner/_banner.scss"; @import "blocks/informers/_informers.scss"; 

 <link href="styles.css" /> 

यह दृष्टिकोण ब्लॉक लोडिंग में हेरफेर करना आसान बनाता है। अगर हमें कुछ ब्लॉक को गति देने की आवश्यकता है, तो हमें बस इसकी शैलियों को अलग तरीके से जोड़ने की आवश्यकता है।

जे एस

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

 <head> <script> var mr = { bind: function(){} }; </script> </head> <div class="mailbox">...</div> <script> mr.bind </script> 

जिसके बाद विस्तारित कार्यक्षमता की बाहरी स्क्रिप्ट लोड की जाती है, जिसमें
कार्यों का मूल सेट विस्तार कर रहा है।

 <script> extend(mr, { position: function(){} }); </script> 

इस प्रकार, स्क्रिप्ट को लोड करना भी प्रबंधित करना आसान है।

इसने क्या दिया?

किए गए कार्यों के परिणामस्वरूप, निम्नलिखित औसत आंकड़े प्राप्त किए गए थे:

• अनुरोध शुरू होने के बाद 550ms के बाद पेज पूरी तरह से लोड हो जाता है, जिसमें से 16ms उस समय होता है जब सर्वर पृष्ठ उत्पन्न करता है
• पोर्टल नेविगेशन 195ms के बाद प्रदर्शित होता है
  
• लेफ्ट स्पीकर - 180 मी
• खोज - 40 मी
• समाचार - 12ms
• मुखबिर - 30 मी
• बैनर - 180 मी
• शैलियाँ - 190 मी
• पोस्ट डाउनलोड - 117 मी
• लिपियों - 500 मी

जो धीमे कनेक्शन के अनुकरण के साथ पृष्ठ लोडिंग प्रक्रिया के वीडियो को अच्छी तरह से समझाएगा।





जैसा कि ग्राफ़ में दिखाया गया है, उपयोगकर्ता कुछ मिलीसेकंड के साथ 600 के बाद अधिकांश पृष्ठ, अर्थात् पोर्टल नेविगेशन और बाएं और केंद्र स्तंभों को देखता है, और अधिकांश कार्यक्षमता अन्य 500ms के बाद चालू होती है। और 1.5 सेकंड के बाद, पेज पूरी तरह से चालू है।

स्क्रॉल

दूसरी बड़ी चुनौती स्क्रॉल की कमी थी।
सभी ने तुरंत मीडिया क्वेरीज़ तकनीक को याद किया, जिसके साथ आप पृष्ठ को आवश्यक आकारों में फिट कर सकते हैं।
मुख्य बात यह समझना है कि क्या अनुकूलित करना है।

सबसे सरल, पहली नज़र में, समाधान स्क्रीन रिज़ॉल्यूशन पर मौजूदा आँकड़ों को देखना होगा।



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


X- अक्ष व्यूपोर्ट ऊँचाई है, y- अक्ष उन उपयोगकर्ताओं की संख्या है जिनका व्यूपोर्ट इस ऊँचाई से कम है।

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



प्राप्त आंकड़ों ने हमारे अनुमानों की पुष्टि की।
ग्राफ़ दिखाता है कि पृष्ठ खोलते समय समान उपयोगकर्ता, एक खिड़की का आकार, और बाद में एक अलग होता है।

ग्राफ़ पर, कूदता स्पष्ट रूप से दिखाई देता है, जिसका अर्थ है कि इस ऊंचाई पर बहुत सारे उपयोगकर्ता हैं। हमने इन छलांगों पर ध्यान केंद्रित करने का फैसला किया।



हमने निम्नलिखित मूल्यों का चयन किया है:

• 633px, बड़ी छलांग के ठीक नीचे
• 765px, जो जंप के दूसरे समूह की तुलना में थोड़ा कम है
• 830px - अधिकतम ऊंचाई जिसके ऊपर हम कुछ भी नहीं बदलते हैं

633px का क्या अर्थ है?
21% उपयोगकर्ता जिनके पास व्यूपोर्ट कम है उन्हें स्क्रॉल दिखाई देगा। यह हमें शोभा नहीं देता, और हमने इस क्षेत्र को 576px के एक और मूल्य के साथ तोड़ दिया - जहां चार्ट पर व्यावहारिक रूप से कोई परिवर्तन नहीं हैं।



हमने 670 पिक्सल के दूसरे मूल्य के साथ क्षेत्र को 633 से 765 पिक्सल में विभाजित करने का भी फैसला किया। विशेष रूप से सौंदर्य कारणों से, हमने उपयोगकर्ताओं के एक बड़े समूह के साथ मुक्त स्थान को भरने का फैसला किया।

इसलिए, 576px से शुरू होने पर उपयोगकर्ता के पास कोई स्क्रॉल नहीं है।

633px पर हम इंडेंटेशन बदलते हैं, बाएं कॉलम में हस्ताक्षर प्रदर्शित करते हैं, मुख्य समाचार पर अतिरिक्त जानकारी और दाहिने कॉलम में कुछ गेम।

670px पर, हम बस खाली जगह भरने के लिए प्रेरित करते हैं।

765px पर हम बाएं कॉलम में लोगो और फोटो ब्लॉक को बड़ा करते हैं, खोज के तहत "अब देख" ब्लॉक प्रदर्शित करते हैं, अतिरिक्त जानकारी ब्लॉक और दाएं कॉलम में एक बड़ा गेम।

830px पर इंडेंट बदलता है और अतिरिक्त समाचार प्रदर्शित होता है।

चौड़ाई में भी परिवर्तन होते हैं।
विस्तृत पृष्ठों पर, कॉलम के बीच इंडेंटेशन बढ़ जाता है, और संकीर्ण पृष्ठों पर जो फिट नहीं होते हैं, समाचार के टैब को "अधिक" संपादन में स्थानांतरित किया जाता है।

मीडिया क्वेरी के बिना ब्राउज़रों के समर्थन के लिए, हमने 633px ऊंचाई पर विकल्प चुना।

कार्यान्वयन

मीडिया क्वेरी कोड और थ्रेशोल्ड नंबर कभी भी बदल सकते हैं।
इसलिए, इस परियोजना को आधा करने के लिए, आपको मीडिया के भाव उत्पन्न करने के लिए एक केंद्रीकृत स्थान की आवश्यकता नहीं है।
हमने एसएएसएस मिश्रण का उपयोग करने का निर्णय लिया।

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

 .someblock { margin-top:10px; @include respond-to-media(xsmall, vertical, margin-top, 5px); @include respond-to-media(small, vertical, margin-top, 10px); } @mixin respond-to-media($screen, $direction, $property, $value: "") { @if $direction == vertical { @if $screen == xsmall { @media only screen and (max-height: 632px) { ... } } @else if $screen == small { @media only screen and (min-height: 633px) and (max-height: 668px) {...} } ... } @else if $direction == horizontal { ... } } 

उत्तीर्ण स्थिरांक के आधार पर, मिक्सिन यह समझता है कि किस मीडिया अभिव्यक्ति को प्रदर्शित करना है, और परिणाम निम्न कोड है:

डिफ़ॉल्ट स्थिति

 .someblock { margin-top:5px; } 

और मीडिया क्वेरीज़ का समर्थन करने वाले ब्राउज़रों के लिए राज्य परिवर्तन

 @media only screen and (max-height: 632px) { .someblock { margin-top:5px; } } @media only screen and (min-height: 633px) and (max-height: 668px) { .someblock { margin-top:10px; } } 

पोर्टल नेविगेशन सिंक

पृष्ठ के शीर्ष पर पूरे Mail.Ru पोर्टल में सक्रिय पोर्टल नेविगेशन की एकल इकाई है।
इसमें, उपयोगकर्ता डेटा को टाइमआउट द्वारा अपडेट किया जाता है: मेल में अपठित पत्रों की संख्या, माई वर्ल्ड और ओडनोक्लास्निक में नई घटनाओं की संख्या।

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

पहली समस्या यह है कि हम विभिन्न स्रोतों से डेटा प्राप्त करते हैं: पोर्टल नेविगेशन में, मेरा विश्व और एक सर्वर से मेल डेटा, दूसरे से ओडनोक्लास्निक, और हमें मुख्य पृष्ठ से माय वर्ल्ड से विस्तारित डेटा मिलता है।

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

ऐसा करने के लिए, पोर्टल नेविगेशन में JSONP कॉलबैक में, पृष्ठ पर स्क्रिप्ट को नियंत्रण देने और रिवर्स कमांड द्वारा संख्याओं को अपडेट करने की क्षमता पेश की गई थी।

यदि पृष्ठ पर कोई कॉलबैक घोषित नहीं किया गया है, तो केवल रेंडरिंग गलत है।

 //   function JSONPCallback(data){ var _cb = JSONPCallback._pageCallback; if (typeof _cb == 'function' && _cb(data, draw) !== false){ draw(); }; function draw(){ //    } } 

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

 //  JSONPCallback._pageCallback = function(data, draw){ new AJAX('/', …, function(data){ //    … //     draw(); }); //  false,      return false; } 

इस प्रकार पृष्ठ आवश्यक जानकारी की उपलब्धता के आधार पर अपडेट के प्रदर्शन को नियंत्रित कर सकता है।

परिणाम

• हमने सामान्य रूप से पृष्ठ लोडिंग का त्वरण प्राप्त किया और धीमे चैनलों पर लोडिंग चरणों की नियंत्रणीयता
• स्क्रॉलिंग से छुटकारा पाएं - सभी सामग्री एक स्क्रीन पर उपलब्ध है
• काम की स्थिरता

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

Egor Dydykin,
Mail.Ru मुखपृष्ठ विकास टीम और क्रॉस-पोर्टल परियोजनाओं के नेता