👉 🎦 👸 Chrome ब्राउज़र में हार्डवेयर रेंडरिंग त्वरण 🌗 💿 🦒

परिचय

अधिकांश वेब डेवलपर्स के लिए, वेब पेज का मूल प्रतिनिधित्व DOM है। जबकि स्क्रीन पर इस प्रतिनिधित्व को एक छवि में बदलने की प्रक्रिया (बाद में रेंडरिंग) अक्सर गलतफहमी के घूंघट में ढंक जाती है। हाल के वर्षों में, ब्राउज़र डेवलपर्स सक्रिय रूप से इस प्रक्रिया का अनुकूलन कर रहे हैं, कुछ कार्यों को GPU के कंधों पर स्थानांतरित कर रहे हैं: जिसे "हार्डवेयर त्वरण" कहा जाता है। हम Canvas2D और WebGL को छोड़कर, नियमित पृष्ठों के संदर्भ में प्रतिपादन देखेंगे। यह आलेख Chrome ब्राउज़र में वेब सामग्री छवियां बनाते समय हार्डवेयर त्वरण का उपयोग करने की मूल अवधारणा पर प्रकाश डालने का प्रयास करेगा।

चेतावनी

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

इसके अलावा, ध्यान रखें कि क्रोम में रेंडरिंग इंजन तेजी से विकसित हो रहा है। और इस बात की कोई गारंटी नहीं है कि यहाँ वर्णित सब कुछ छह महीने में सच होगा।

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

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

DOM से स्क्रीन तक का रास्ता

परतें अवधारणा

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

Chrome में परतें दो प्रकार की होती हैं: RenderLayers, जिसमें DOM उपप्रकार होते हैं, और GraphicsLayers, जिनमें पिछले उपप्रकार होते हैं। अब बाद वाले हमारे लिए अधिक रुचि रखते हैं, क्योंकि ग्राफिक लेयर्स वही होते हैं जो टेक्स्ट के रूप में GPU पर भेजे जाते हैं। इसके बाद, जहां भी "लेयर" शब्द होता है, मेरा मतलब ग्राफिक लेयर है।

चलो GPU शब्दावली पर थोड़ा खुदाई करते हैं और यह पता लगाने की कोशिश करते हैं कि बनावट क्या है?
इसे ग्राफिक ऑब्जेक्ट (बिटमैप) के बिटमैप के एक हिस्से के रूप में सोचें, जिसे मुख्य मेमोरी (रैम) से ग्राफिक्स प्रोसेसर (वीआरएएम) की मेमोरी में स्थानांतरित किया जाता है। जब कोई बनावट GPU के हाथों में पड़ती है, तो वह इसे एक बहुभुज जाल पर खींच सकता है - वीडियो गेम में, इस तकनीक का उपयोग त्रि-आयामी वस्तुओं पर "त्वचा" को फैलाने के लिए किया जाता है। Chrome, पृष्ठ सामग्री के अंशों को GPU में स्थानांतरित करने के लिए बनावट का उपयोग करता है ताकि यह बाद में उन्हें एक साधारण वर्ग ग्रिड पर ओवरले कर सके और इसके साथ कोई त्रि-आयामी रूपांतरण कर सके। यह है कि 3D सीएसएस कैसे काम करता है, और इसका पेज स्क्रॉलिंग प्रदर्शन पर भी बहुत प्रभाव पड़ता है - लेकिन पहले चीजें।

आइए परतों की अवधारणा को अधिक स्पष्ट रूप से चित्रित करने के लिए कुछ उदाहरण देखें।

Chrome में परतों को समझने के लिए एक बहुत ही उपयोगी उपकरण है - डेवलपर टूलबार की सेटिंग्स विंडो के "रेंडरिंग" अनुभाग में विकल्प "कंपोज़िटेड लेयर बॉर्डर्स दिखाएं"। यह विकल्प बस नारंगी में स्क्रीन पर परतों की सीमाओं को उजागर करता है। चलो इसे चालू करें। उदाहरणों के लिए सभी स्क्रीनशॉट इस लेखन के समय क्रोम कैनरी, क्रोम 27 में लिए गए थे।

उदाहरण 1: सिंगल लेयर पेज

<html> <body> <div>I am a strange root.</div> </body> </html>

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

उदाहरण 2 : अपनी खुद की परत में एक तत्व

 <html> <body> <div style="-webkit-transform: rotateY(30deg) rotateX(-30deg); width: 200px;"> I am a strange root. </div> </body> </html>

3D सीएसएस गुण को उस तत्व में सेट करके जो इसे घुमाता है, हम देख सकते हैं कि इसकी अपनी परत इसके लिए आवंटित की गई है: ऊपर दिए गए स्क्रीनशॉट में इसे लपेटने वाले नारंगी फ्रेम पर ध्यान दें। (यह दूसरों की स्वतंत्र रूप से प्रत्येक परत को प्रस्तुत करने के लिए किया जाता है)

लेयरिंग की स्थिति

क्या अन्य तत्व आपकी खुद की परत प्राप्त कर सकते हैं? इस दिशा में क्रोम का अनुमानी विकास हाल ही में हुआ है, लेकिन वर्तमान में, निम्न में से कोई भी स्थिति एक परत के निर्माण की ओर ले जाती है:

CSS तत्व में 3D परिवर्तन गुण हैं
वीडियो डिकोडिंग के लिए हार्डवेयर त्वरण का उपयोग करके <video \> तत्व
<canvas \> 3 डी (वेबजीएल) संदर्भ या 2 डी में त्वरित
तृतीय-पक्ष प्लगइन्स (फ़्लैश सहित)
पारदर्शिता या परिवर्तनों के एनीमेशन के सीएसएस एनिमेशन का उपयोग करने वाले तत्व
हार्डवेयर त्वरण का उपयोग करके सीएसएस फिल्टर का उपयोग करने वाले तत्व
ऐसे तत्व जिनकी रचना परत के साथ होती है
तत्व का एक भाई (बहन तत्व) कम z-सूचकांक के साथ होता है, जिसकी खुद की परत होती है (दूसरे शब्दों में, यदि तत्व रचना के शीर्ष पर प्रदान किया जाता है)

व्यावहारिक अनुप्रयोग: एनीमेशन

हम जानते हैं कि सीएसएस रूपांतरित होने से, एक तत्व अपनी ही परत में गिर जाएगा। और एनीमेशन के लिए परतें बहुत अच्छी हैं।

उदाहरण 3 : एनिमेटेड परतें

 <html> <head> <style type="text/css"> div { -webkit-animation-duration: 5s; -webkit-animation-name: slide; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; width: 200px; height: 200px; margin: 100px; background-color: gray; } @-webkit-keyframes slide { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(120deg); } } </style> </head> <body> <div>I am a strange root.</div> </body> </html>

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

आप यह सुनिश्चित कर सकते हैं कि डेवलपर्स पैनल के समय पर कोई पुनर्विकास कार्य नहीं हो रहा है, जबकि परत घूमती है और जम जाती है।

चेतावनी! repainting

लेकिन अगर परत की सामग्री को बदल दिया जाता है, तो यह इसके पुनर्वितरण को जन्म देगा।

उदाहरण 4 : परतों को फिर से बनाना

 <html> <head> <style type="text/css"> div { -webkit-animation-duration: 5s; -webkit-animation-name: slide; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; width: 200px; height: 200px; margin: 100px; background-color: gray; } @-webkit-keyframes slide { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(120deg); } } </style> </head> <body> <div id="foo">I am a strange root.</div> <input id="paint" type="button" onclick="" value=”repaint”> <script> var w = 200; document.getElementById('paint').onclick = function() { document.getElementById('foo').style.width = (w++) + 'px'; } </script> </body> </html>

हर बार जब बटन दबाया जाता है, तो घूमने वाला तत्व चौड़ाई में एक पिक्सेल जोड़ देगा। इससे पूरे तत्व को फिर से जोड़ा जाएगा, जो इस मामले में एक अलग परत में है।

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

Redraw इवेंट को टाइमलाइन पर भी देखा जा सकता है। गहरी नजर रेडव इवेंट्स के दोहराव पर ध्यान देगी: एक परत के लिए, दूसरा बटन स्टेट के डिस्प्ले को बदलने के लिए।

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

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

यह सब एक साथ रखना: स्क्रीन पर DOM

तो क्रोम स्क्रीन पर एक छवि में डोम को कैसे चालू करता है? वैचारिक रूप से, निम्नलिखित चरणों को प्रतिष्ठित किया जा सकता है:

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

यह तब होता है जब पृष्ठ का पहला फ्रेम खींचता है। लेकिन प्रत्येक अगले फ्रेम को प्रस्तुत करने के ओवरहेड को कम करने के कई तरीके हैं:

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

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

वह सब है!

Chrome ब्राउज़र में हार्डवेयर रेंडरिंग त्वरण