ब्राउज़र कैसे आकर्षित करता है। यैंडेक्स रिपोर्ट

कुछ समय पहले तक, मैंने Yandex.Browser टीम में काम किया और इस अनुभव के मद्देनजर YaTalks सम्मेलन में एक प्रस्तुति दी। रिपोर्ट इस बारे में थी कि ब्राउज़र में हुड के नीचे क्या है और आपके पृष्ठ स्क्रीन पर पिक्सेल में कैसे बदल जाते हैं। न्यूनतम सीमा, केवल ब्राउज़र के अंदरूनी हिस्से, केवल कट्टर।



- सभी को मेरा नमस्कार, मेरा नाम कोस्त्या है। हैरानी की बात है, अब मैं Yandex.Cloud आभासी नेटवर्क की टीम में काम करता हूं। इससे पहले, मैंने ब्राउज़र टीम में पांच साल से अधिक काम किया था, इसलिए आज मैं उन चीजों के बारे में बात करूंगा जो हमारे और आपके लिए सामान्य हैं।

जैसा कि आप अनुमान लगा सकते हैं, मैं सामने के अंत में बहुत अच्छी तरह से नहीं समझता। अगर आप मुझसे रिएक्ट या उस जैसी किसी अन्य चीज के बारे में बात करते हैं, तो मैं शायद आपको समझ नहीं पाऊंगा। लेकिन मैंने ब्राउज़र में बहुत सी चीजें कीं: वीडियो डिकोडिंग, बिजनेस लॉजिक। सहित मैंने ब्राउज़र को रेंडर करने में अलग-अलग चीजें करने में बहुत समय बिताया। आज हमारे पास ब्राउज़र के आंतरिक उपकरण के बारे में ऐसा, शैक्षिक कार्यक्रम होगा। मैं सबसे दिलचस्प चीजों के माध्यम से जाने की कोशिश करूंगा जो हमने Yandex.Browser या Google में Chromium में किया था।



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



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

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

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



तब अन्य स्मार्ट लोगों ने इसे थोड़ा कम करने का फैसला किया। हमारे पास किसी तरह का डोम ट्री है, हमने इसे मेमोरी में बनाया है। ये प्लस ऑब्जेक्ट हैं, उनकी तुलना आपके द्वारा लिखे गए लेआउट से की जाती है।



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



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



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



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



यहाँ। हालांकि, ऐसा लगता है, तत्व एक-एक करके स्थित हैं। कैनवास क्यों उड़ता है? हमारे देश में, वे क्रमबद्ध रूप से व्यवस्थित हैं; मैंने कोई आदेश नहीं दिया।



जटिल करते हैं। यहाँ हमारे पास एक और div है, जैसे।



सामान्य तौर पर, अपेक्षित व्यवहार। हमारे पास div के शीर्ष पर एक div है, लेकिन कैनवास शीर्ष पर किसी कारण के लिए है। जादू! ठीक है, चलो इस उदाहरण को फिर से जटिल करते हैं।



बिल्कुल एक लाइन बदल गई है, मैंने ट्रांसफ़ॉर्मेशन जोड़ा है।



और अब हमारे पास सब कुछ सही ढंग से स्थित है - कम से कम कैनवास और div के संदर्भ में। लेकिन यह div अभी भी नीचे स्थित है, हालांकि यह हमारे लेआउट में अगला तत्व था।

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



तो क्या हुआ? जैसा कि मैंने कहा, कुछ तत्व रेंडर लेयर पर दिए गए हैं, कुछ नहीं हैं। कुछ दूसरों के साथ मिलकर खींचे जाते हैं। यहाँ निम्नलिखित हुआ: पृष्ठभूमि के रूप में दिव्य तत्व एक ही परत में रहते हैं। कैनवास एक अलग परत के लिए क्रैश हो जाता है। और z- आदेश केवल परतों के बीच किया जाता है। इस तथ्य के कारण कि हमारी एक पृष्ठभूमि और div एक परत में है और दूसरे में कैनवास है, हमें एक बग मिलता है: कैनवास div को ओवरलैप करता है।

लेकिन जैसे ही हम इस div एलिमेंट को एक अलग लेयर में ले जाते हैं और यह z- ऑर्डर को सामान्य रूप से इस्तेमाल करना शुरू करता है, यह भी समझने लगता है कि कौन किसके पीछे है। और यहां सब कुछ "सामान्य" प्रदान किया गया है।



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



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

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



यही है, इस सूची के संगीतकार और पलक पास से गुजरने वाले कुछ गुप्त ज्ञान को समझ सकते हैं कि कैसे इसे ठीक से परतों में रखना है।



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

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

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





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



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



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



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



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



अगला अनुकूलन उन्होंने किया है। कहां अक्षमता हो सकती है? क्या टाइल्स को स्थानांतरित कर दिया गया है? अच्छा विचार है, लेकिन मैं दूसरे की ओर रुख करता हूं। यहाँ सिर्फ एक सफेद आयत है। यह एक सफेद टाइल है जिस पर एक भी पिक्सेल नहीं खींचा जाता है। लेकिन यह एक बनावट है। यह मेमोरी के चार बाइट्स द्वारा 256 को ऊपर ले जाता है।



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

हम यैंडेक्स में थोड़ा आगे गए और एक अधिक विशिष्ट प्रयोग करने का फैसला किया। आपको कहां लगता है कि आप अधिक बचत कर सकते हैं?

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



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



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



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

यदि आप इस चेकमार्क को अभी सक्षम करते हैं, तो आपको आयतों का ऐसा ग्रिड नहीं दिखेगा, लेकिन यह एक है।



यह क्या है, यहाँ टाइलें इतनी चौड़ी क्यों हैं, और उनमें से कुछ क्यों हैं? यहाँ अर्थ इस प्रकार है। क्रोम में, उन्होंने सोचा: हम केवल हार्डवेयर कंपोज़िटिंग ही नहीं करते हैं, बल्कि हार्डवेयर रेंडरिंग भी करते हैं। वे क्या कर रहे हैं? हमारे पास आदेशों की एक सूची है जो किए जाने की आवश्यकता है: एक आयत बनाएं, रंग भरें, आदि। यह सब GPU में जाता है, और GPU ऐसी बनावट खींचता है। Redrawing बहुत तेज़ है, इसलिए टाइलें भी बड़ी की जा सकती हैं। यहाँ थोड़ा कटहल वीडियो है , लेकिन यह बहुत अच्छी तरह से फायदा दिखाता है कि इस तथ्य के कारण फोन पर हुआ कि प्रतिपादन हार्डवेयर त्वरित हो गया। मुझे लगता है कि यहाँ अंतर बहुत ध्यान देने योग्य है।

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

और मैं अपनी सलाह दोहराते नहीं थकूंगा। (मैं यहां उद्धृत नहीं करूंगा, इस विषय पर एक अलग बड़ी रिपोर्ट थी। - लेखक की टिप्पणी।)

यहाँ मैंने उपयोगी लिंक्स का एक सेट संकलित किया है, न केवल प्रतिपादन के बारे में, बल्कि यैंडेक्स के बारे में भी। आपका धन्यवाद