👩‍🏫 👩🏼‍🎨 🧑🏿‍🤝‍🧑🏻 वेब पेज रेंडरिंग: फ्रंट-एंड डेवलपर को इसके बारे में क्या पता होना चाहिए 🤙🏿 🌂 👮

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

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

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

एक ब्राउज़र द्वारा एक वेब पेज को संसाधित करने की प्रक्रिया

आरंभ करने के लिए, दस्तावेज़ प्रदर्शित करते समय ब्राउज़र के अनुक्रम पर विचार करें:

DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) सर्वर से प्राप्त HTML डॉक्यूमेंट से बनता है।
शैलियाँ भरी हुई हैं और पहचानी जाती हैं, CSSOM (CSS Object Model) बनाई जाती है।
DOM और CSSOM के आधार पर, एक रेंडरिंग ट्री बनता है, या एक रेंडर ट्री रेंडरिंग ऑब्जेक्ट्स का एक सेट है (वेबकिट "रेंडरर", या "रेंडर ऑब्जेक्ट" शब्द का उपयोग करता है, और गेको "फ्रेम" का उपयोग करता है)। रेंडर ट्री DOM संरचना को डुप्लिकेट करता है, लेकिन अदृश्य तत्व (उदाहरण के लिए, <head>

, या शैली display:none;

तत्व display:none;

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

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

रीपेंट

तत्व की शैलियों को बदलने के मामले में जो पृष्ठ पर इसके आकार और स्थिति को प्रभावित नहीं करता है (उदाहरण के लिए, background-color

, border-color

, visibility

), ब्राउज़र बस इसे फिर से प्रस्तुत करता है, नई शैली को ध्यान में रखते हुए - रिपेट (या रेस्टाइल) होता है।

रीफ़्लो

यदि परिवर्तन सामग्री, दस्तावेज़ की संरचना, तत्वों की स्थिति को प्रभावित करते हैं, तो एक रिफ्लो (या रिलेयआउट) होता है। ऐसे परिवर्तनों के कारण आमतौर पर हैं:

DOM के साथ जोड़तोड़ (जोड़ना, हटाना, बदलना, तत्वों को फिर से जोड़ना);
सामग्री में परिवर्तन, झुकाव। प्रपत्र फ़ील्ड में पाठ;
सीएसएस गुणों की गणना या परिवर्तन;
स्टाइल शीट को जोड़ना, हटाना;
विशेषता " class

" के साथ जोड़तोड़;
ब्राउज़र विंडो के साथ जोड़तोड़ - आकार बदलना, स्क्रॉल करना;
सक्रिय छद्म वर्ग ( :hover

)।

ब्राउज़र अनुकूलन

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

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

 var $body = $('body'); $body.css('padding', '1px'); // reflow, repaint $body.css('color', 'red'); // repaint $body.css('margin', '2px'); // reflow, repaint //      1 reflow  repaint

हालांकि, जैसा कि ऊपर वर्णित किया गया है, तत्व गुणों तक पहुंच एक मजबूर रिफ्लो का कारण होगा। यही है, अगर हम उपरोक्त कोड ब्लॉक में तत्व संपत्ति में एक कॉल जोड़ते हैं, तो इससे अतिरिक्त रिफ्लो होगा:

 var $body = $('body'); $body.css('padding', '1px'); $body.css('padding'); //   ,  reflow $body.css('color', 'red'); $body.css('margin', '2px');

नतीजतन, हमें एक के बजाय 2 रिफ्लो मिलते हैं। इसलिए, यदि संभव हो, तो प्रदर्शन को अनुकूलित करने के लिए तत्वों के गुणों तक पहुंच को एक स्थान पर वर्गीकृत किया जाना चाहिए ( JSBin पर अधिक विस्तृत उदाहरण देखें )।

लेकिन, व्यवहार में, ऐसी स्थितियां हैं जब आप एक मजबूर रिफ्लो के बिना नहीं कर सकते। मान लीजिए कि हमारे पास एक कार्य है: हमें उसी संपत्ति को एक तत्व (" margin-left

") को पहले एनीमेशन के बिना लागू करने की आवश्यकता है ( 100px

सेट करें), और फिर 50px

संक्रमण के माध्यम से चेतन करें। आप इस उदाहरण को तुरंत JSBin पर देख सकते हैं , लेकिन मैं यहां भी इस पर हस्ताक्षर करूंगा।

पहले, चलिए संक्रमण के साथ एक वर्ग बनाते हैं:

 .has-transition { -webkit-transition: margin-left 1s ease-out; -moz-transition: margin-left 1s ease-out; -o-transition: margin-left 1s ease-out; transition: margin-left 1s ease-out; }

तो, चलो इस प्रकार हमारी योजना को लागू करने की कोशिश करते हैं:

 var $targetElem = $('#targetElemId'); //  ,       "has-transition" //    transition $targetElem.removeClass('has-transition'); //  , ,  transition ,     $targetElem.css('margin-left', 100); //    transition   $targetElem.addClass('has-transition'); //   $targetElem.css('margin-left', 50);

यह समाधान तब से काम नहीं करेगा जब से अपेक्षित है बदलावों को कोड ब्लॉक के अंत में ही कैश और लागू किया जाता है। एक मजबूर रिफ्लो हमें मदद करेगा, परिणामस्वरूप, कोड निम्नलिखित रूप लेगा, और कार्य को पूरा करेगा:

 //    transition $(this).removeClass('has-transition'); //   $(this).css('margin-left', 100); //   reflow,         $(this)[0].offsetHeight; //  ,       //    transition   $(this).addClass('has-transition'); //   $(this).css('margin-left', 50);

अनुकूलन युक्तियाँ

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

एन्कोडिंग को इंगित करते हुए मान्य HTML और CSS लिखें। शैलियाँ सबसे अच्छी तरह से <head>

और लिपियों में <body>

के अंत में शामिल हैं।
CSS चयनकर्ताओं को सरल और अनुकूलित करने की कोशिश करें (यह अक्सर प्रीप्रोसेसरों का उपयोग करके डेवलपर्स द्वारा उपेक्षित किया जाता है)। कम नेस्टिंग बेहतर है। दक्षता को संसाधित करके, चयनकर्ताओं को निम्नलिखित क्रम में व्यवस्थित किया जा सकता है (सबसे तेज़ से शुरू):
1. ID: #id
2. क्लास: .class
3. टैग: div
4. पास का चयनकर्ता: a + i
5. बाल चयनकर्ता: ul > li
6. यूनिवर्सल चयनकर्ता: *
7. चयनकर्ता चुनें: input[type="text"]
8. सभी तत्व और छद्म वर्ग: a:hover
यह याद रखना चाहिए कि ब्राउज़र चयनकर्ताओं को दाईं से बाईं ओर संसाधित करता है, इसलिए सबसे प्रभावी - पहचानकर्ता और वर्ग - कुंजी (सबसे दाएं) चयनकर्ता के रूप में उपयोग करना बेहतर होता है।
```
 div * {...} //  .list li {...} //  .list-item {...} //  #list .list-item {...} // 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
```
स्क्रिप्ट में, DOM के साथ किसी भी काम को कम से कम करें। सब कुछ कैश करें: गुण, ऑब्जेक्ट, यदि वे पुन: उपयोग किए जाने के लिए हैं। जटिल जोड़तोड़ के लिए, "ऑफ़लाइन" तत्व के साथ काम करना उचित है (जो कि DOM में नहीं है, लेकिन मेमोरी में है), इसके बाद DOM में रखकर।
तत्वों का चयन करने के लिए jQuery का उपयोग करते समय, चयनकर्ताओं के संकलन के लिए दिशानिर्देशों का पालन करें।
तत्वों की शैलियों को बदलने के लिए, केवल " class

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

" वर्ग जोड़ते हुए)। इस विषय पर एक लेख ।

समस्या के अधिक विस्तृत अध्ययन के लिए, मेरा सुझाव है कि आप लेख पढ़ें:

मुझे उम्मीद है कि प्रत्येक पाठक ने लेख से कुछ उपयोगी सीखा है। किसी भी मामले में - देखने के लिए धन्यवाद!

UPD: CSS चयनकर्ताओं के प्रसंस्करण की दक्षता के बारे में सही टिप्पणियों के लिए SelenIT2 और piumosso को धन्यवाद।

वेब पेज रेंडरिंग: फ्रंट-एंड डेवलपर को इसके बारे में क्या पता होना चाहिए

एक ब्राउज़र द्वारा एक वेब पेज को संसाधित करने की प्रक्रिया

रीपेंट

रीफ़्लो

ब्राउज़र अनुकूलन

अनुकूलन युक्तियाँ

More articles: