DOM के जावास्क्रिप्ट स्तर पर कार्यान्वित DOM रेंडर अनुकूलन की सूची

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

मैं सिस्टम स्तर पर आवेदन में मेरे द्वारा लागू किए गए तरीकों से परिचित होने का प्रस्ताव करता हूं:

• DOM ट्री के पुनर्निर्माण के बजाय CSS और क्लास स्विचिंग का उपयोग करना
• तत्व चयनों की सर्वव्यापी कैशिंग ( $ ('div.active_part span.highlighter') ), परमाणु परिवर्तन संचालन (सामान्य रिड्राविंग के बजाय, DOM ट्री के बड़े वर्गों को रीमॉडेल करने के बजाय)
• राज्य परिवर्तन लिखते समय DOM रीड पढ़ें
• तत्वों के आकार और व्यवस्था को कैशिंग (यह अन्य परिवर्तनों की उपस्थिति में इन मूल्यों को पढ़ने पर अनावश्यक गणना से बचाता है: पेड़ के कई हिस्सों के परिवर्तन के दौरान पढ़ना उत्पादकता को नकारात्मक रूप से प्रभावित करता है)
• DOM में आवश्यक परिवर्तन के सटीक, गैर-प्रचलित संचय
• एक बार में संग्रह बदलने के हिस्सों को संलग्न करना (जब, उदाहरण के लिए, सूची के बीच में 3 नए तत्व सम्मिलित किए जाते हैं; CreateDocumentFragment ) एक विशेष स्थान पर ( बाद में , पहले ) पूरे संग्रह को DOM से हटाने और फिर से अटैच करने के बजाय (और पूरी सूची को फिर से सूचीबद्ध करने के बजाय);
• प्रगतिशील अतुल्यकालिक प्रतिपादन: चित्र को विस्तार की एक छोटी राशि के साथ तुरंत खींचा जाता है, फिर अधिक विवरण दिखाई देते हैं
• क्लोनिंग नोड्स (पैटर्निंग के भाग के रूप में)
• DOM टेम्पलेट्स को पार्स करने के परिणामों के कैशिंग और उपयोग

"एक बार में संग्रह बदलने के भागों को संलग्न करना" शीर्षक से चित्र ...

DOM ट्री के पुनर्निर्माण के बजाय CSS और क्लास स्विचिंग का उपयोग करना

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


इस उदाहरण में, पूरी सूची प्रदर्शित करने के लिए, नोड्स में से एक बस want_more_songs वर्ग को स्विच करता है

नोड नमूनों का सर्वव्यापी कैशिंग, परमाणु परिवर्तन

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

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

{ artist: "The Killers", track: null } 

हमने उन्हें इस कोड के साथ बदल दिया:

 track_model.updateState('track', "When You Were Young"); 

स्थितियां इस तरह हो गई हैं:

 { artist: "The Killers", track: "When You Were Young" } 

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


एनिमेशन, 3 फ्रेम। मॉडल में ट्रैक की स्थिति बदलें, 2 दृश्य तुरंत परिवर्तन का जवाब देते हैं

दृश्य में, एक फ़ंक्शन सक्रिय होता है जो एक विशिष्ट स्थिति में परिवर्तन के प्रति प्रतिक्रिया करता है और DOM परिवर्तन उत्पन्न करता है, इस मामले में निम्नलिखित कोड काम करेगा:

 'stch-track': function(new_state, old_state){ this.container .find('.song-track-name') .text(new_state) .toggleClass('hidden', !new_state); } 

(प्रपत्र 'stch-' + state_name , इस स्थिति में 'stch-track' ) के नाम पर ध्यान दें;
इसलिए विशिष्ट परिवर्तन DOM के विशिष्ट भागों से जुड़े होते हैं

अब आप कैशिंग पर ध्यान दें। यदि आप प्रत्येक परिवर्तन ( this.container.find ('। Song-track-name') ) पर चयन करते हैं, तो यह प्रदर्शन को नकारात्मक रूप से प्रभावित करेगा, इसलिए, हर बार चयन न करने के लिए, हम तुरंत इसे निम्न कोड में बदल देते हैं:

 'stch-track': function(new_state, old_state){ if (!this.track_name_node){ this.track_name_node = this.container.find('.song-track-name'); //            } this.track_name_node.text(new_state).toggleClass('hidden', !new_state); } 

( इसलिए जब मैं परमाणु परिवर्तन के सिद्धांतों के अनुसार कोड लिखना शुरू कर रहा था, तब मैंने नमूनों को कैच किया था )

बाद में, जब मैंने अपने टेम्पलेट इंजन को बनाना और उपयोग करना शुरू किया, तो ऐसे मामलों के लिए जब मैन्युअल मोड में DOM में परिवर्तन करना आवश्यक है, मैंने एक निर्देश बनाया (<span pv-anchor = "track_name_con" वर्ग = "गीत-ट्रैक-नाम"> </ span >) , जो इंगित करता है कि नोड को रिपॉजिटरी में कैश करने की आवश्यकता है, क्योंकि मैं इसे मैन्युअल रूप से एक्सेस करूंगा (बजाय अनिवार्य कोड यह लिखने के लिए ।container.find ('गीत-ट्रैक-नाम') हर बार)। इस प्रकार, मैं इस तरह से परिवर्तन की प्रतिक्रिया को फिर से लिख सकता हूं:

 'stch-track': function(new_state, old_state){ this.tpl.ancs['track_name_con'].text(new_state).toggleClass('hidden', !new_state); } 

इस तरह के सरल परिवर्तन (जब पाठ या एक वर्ग, या कुछ अन्य विशेषता राज्य पर निर्भर करता है) आमतौर पर अन्य निर्देशों द्वारा वर्णित किए जाते हैं, और pv-anchor निर्देश का उपयोग अधिक जटिल परिवर्तनों के लिए किया जाता है (उदाहरण के लिए, अन्य नोड्स के स्थान या आकार को प्रभावित करना), जटिल इंटरैक्शन के दौरान घटनाओं को लटकाने के लिए। और अन्य मामलों के लिए जहां DOM मैन्युअल रूप से बदला जाता है।

राज्य परिवर्तन लिखते समय DOM रीड पढ़ें

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


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

बाद में, मैंने एंगुलरज की तेजी से बढ़ती लोकप्रियता में टेंपलेटिंग इंजन पर ध्यान आकर्षित किया, जो परमाणु परिवर्तनों के सिद्धांत का भी पालन करता था (और डेटा बाइंडिंग था)। लेकिन मेरे लिए रुचि एक सिद्धांत था, जिसके अनुसार राज्य परिवर्तन तत्वों के गुणों से बंधा हुआ है। Html डॉक्यूमेंट में अतिरिक्त विशेषताओं को घोषित करने से ऐसा होता है।

मैंने एंगुलरज से पार्सिंग एक्सप्रेशंस के लिए जिम्मेदार कोड, और विशेषताओं के माध्यम से डेट बाइंडिंग की घोषणा पद्धति को लिया। कनेक्शन का वर्णन करने का यह तरीका HTML कोड को काम करना छोड़ देता है और ब्राउज़र को काम का सबसे कठिन हिस्सा (HTML पार्सिंग) करने की अनुमति देता है, और फिर परिणाम ( .cloneNode () विधि का उपयोग करके क्लोनिंग का उपयोग करता है ) ।

एक उदाहरण:

 <div class="user_tag_page usual_page" pv-class="lula_page usual_page {{!vmp_show && 'hidden'}}" ></div> 

इस उदाहरण में, pv- श्रेणी के निर्देश का उपयोग किया जाता है। इसके मूल्य के अनुसार, तत्व में हमेशा lula_page सामान्य_पेज कक्षाएं होंगी , और यह भी, यदि मॉडल में vmp_show स्थिति नहीं है, तो तत्व में एक और वर्ग होना चाहिए - "छिपा हुआ"। जब vmp_show स्थिति बदल जाती है , तो टेम्पलेट इंजन स्वचालित रूप से .className को अधिलेखित कर देगा, हालाँकि, यदि टेम्पलेट इंजन का उपयोग नहीं किया जाता है, तो className को अधिलेखित नहीं किया जाएगा और इसका मूल्य वैसा ही होगा जैसा कि हमने मूल रूप से लिखा था - "= "_tag_page normal_page" ।

यह विधि न केवल सुविधाजनक है और पार्सिंग ऑप्टिमाइज़ेशन को सक्षम बनाती है, बल्कि DOM के परिवर्तनों से संबंधित प्रदर्शन ऑप्टिमाइज़ेशन की क्षमता भी देती है। उदाहरण के लिए, तत्व वर्गों के बदलने पर प्रदर्शन अनुकूलन लागू किया जाता है। आप जान सकते हैं कि jQuery (नोड) .addClass ('नमूना-वर्ग') विधि यह देखने के लिए जांचती है कि क्या तत्व में ऐसा वर्ग है, अर्थात्। लिखने से पहले, एक अतिरिक्त रीड करता है (कम से कम क्लासिस्ट एपी की उपस्थिति तक)। लेकिन कब से टेम्पलेट इंजन में हम कक्षाओं का पूरा सेट और कक्षाओं का सेट जानते हैं जो मॉडल की वर्तमान स्थिति में होना चाहिए (उदाहरण के लिए, " lula_page सामान्य_पेज छिपा हुआ "), हम तुरंत ऐसा कर सकते हैं:

 node.className = "lula_page usual_page hidden"; 

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

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

हालाँकि, विशेष रूप से पढ़ने वाली कक्षाओं के साथ, वर्णित सिद्धांत बिल्कुल एक प्रदर्शन लाभ नहीं दे सकता है (कम से कम, एक आधुनिक ब्राउज़र को समझना चाहिए कि उसे किसी भी आकार, स्थानों की गणना करने की आवश्यकता नहीं है, ताकि क्लासनेम का पूरा मूल्य प्रदान किया जा सके ), लेकिन यह छोटा है टेम्पलेट इंजन से मुझे मिलने वाला बोनस।

हालांकि, नवीनतम, वर्तमान में जारी jquery (1.11, 2.1, 24 जनवरी, 2014) के रिलीज़ से संबंधित एक रिकॉर्ड में, डेवलपर्स ने रिपोर्ट किया (हेडर के तहत मजबूर लेआउट के तहत देखें) कि उन्होंने कक्षा बदलने पर अतिरिक्त लेआउट परिवर्तन ट्रिगर को सही किया। यानी यह मायने रखता है, और काफी गंभीर है। क्रोम डेवलपर इस मुद्दे पर भी काम कर रहे हैं।

कैशिंग तत्व आकार और लेआउट

तत्वों के आकार या व्यवस्था को पढ़ने से किए गए अन्य सभी परिवर्तनों की समय से पहले गणना का कारण बनता है - यह अनुकूलन के लिए एक अच्छी जगह है। ऐसे मामलों के लिए जहां यह संभव है, मैं कैशिंग का उपयोग करता हूं।

उदाहरण के लिए, प्लेबैक और लोडिंग की वर्तमान प्रगति को प्रदर्शित करने वाले नोड्स की चौड़ाई निर्धारित करने के लिए, मैं चौड़ाई का प्रतिशत मान नहीं, बल्कि पिक्सेल एक का उपयोग करता हूं।


नियमित चौड़ाई प्रगति बार फ़ाइल


फ़ाइलों की विस्तारित सूची के साथ चौड़ाई प्रगति पट्टी


एक अलग विंडो चौड़ाई के साथ चौड़ाई प्रगति पट्टी



गणना करने के लिए, आपको मूल तत्व की चौड़ाई जानने की आवश्यकता है। मूल तत्व की चौड़ाई स्क्रीन की चौड़ाई और पाया फ़ाइलों की सूची के पूर्ण या एकल प्रदर्शन से भिन्न हो सकती है।

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

 this.getBoxDemension(this.getProgressWidth, 'progress_c-width', window_width, !!p_wmss); 

विधि का पहला पैरामीटर ( getProgressWidth ) सिर्फ एक फ़ंक्शन है जिसे स्टोर में इस कुंजी के लिए कोई मान नहीं होने पर getBoxDemension विधि स्वयं कॉल करेगी।
अन्य सभी मापदंडों को केवल स्ट्रिंग में जोड़ा जाता है। इस स्थिति में, पंक्ति में p_wms 'गलत' या 'सत्य' बन जाएगा (केवल एक फ़ाइल या संपूर्ण सूची प्रदर्शित होती है)। नतीजतन, कुंजी प्रगति-सी-चौड़ाई-1372-झूठी की तरह दिख सकती है।

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

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

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

DOM में आवश्यक परिवर्तन के सटीक, गैर-प्रचलित संचय

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

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

इस प्रकार, राज्य परिवर्तनों का एक संचय होता है जो बहुत लंबे समय तक नहीं खींचता है।

मैन्युअल रूप से कई राज्यों को अपडेट करते समय एक पुनरावृत्ति में प्रस्तुत करने के लिए, मैं निम्नलिखित विधि का उपयोग करता हूं:

 .updateManyStates({ artist: 'artist_224', title: 'radnomd title 014' }) 

दो ऐसे कदम उठाने के बजाय:

 updateState('artist', 'artist_224') 

 updateState('title', 'radnomd title 014') 

भविष्य में, मैं इस सिद्धांत के अलावा, प्रशंसा का उपयोग करूंगा।

एक बार में संग्रह बदलने के कुछ हिस्सों को बनाना ( createDocumentFragment ) एक विशेष स्थान पर ( बाद में , पहले ) डोम से पूरे संग्रह को अलग करने और पुनः संलग्न करने के बजाय

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

इस प्रकार, DOM में सूची बदलते समय, केवल सबसे आवश्यक और न्यूनतम परिवर्तन होते हैं।


इस सूची में प्रकाशित अंतिम तत्व के साथ एक सूची (कंसोल में वैश्विक चर $ 0 चयनित और हाइलाइट किया गया तत्व है, $ 1, $ 2, $ 3 वे तत्व हैं जो पहले चुने गए थे)


सूची में बड़ी संख्या में नई रचनाएँ जोड़ी गईं, जबकि रचना की प्रस्तुति के लिए ज़िम्मेदार तत्व (जिस सूची को बदल दिया गया है), जो पहले चुनी गई थी, ठीक उसी नोड की बनी हुई है।



इसके अतिरिक्त, आप जॉन रेजिग के ब्लॉग से प्रविष्टि का अनुवाद पढ़ सकते हैं।

प्रगतिशील अतुल्यकालिक प्रतिपादन: चित्र को विस्तार की एक छोटी राशि के साथ तुरंत खींचा जाता है, फिर अधिक विवरण दिखाई देते हैं

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

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

क्लोनिंग नोड्स

दृश्य के लिए DOM संरचना प्राप्त करना लगभग इस प्रकार है: ब्राउज़र का HTML पार्सर स्वयं HTML को एक बार पार्स करता है (सबसे कठिन काम करता है, यह पहले से ही पूरा पृष्ठ लोड करते समय होता है), फिर, यदि आवश्यक हो, तो परिणाम DOM API ( .cloneNode ()) के माध्यम से बंद कर दिया जाता है। )। टेम्पलेट से उदाहरण टेम्पलेट ट्री के डोम को क्लोन करके बनाए जाते हैं, जिसके बाद इस नोड से जुड़े निर्देशों को पढ़ा और पार्स किया जाता है।

DOM टेम्पलेट्स को पार्स करने के परिणामों के कैशिंग और उपयोग

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

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

 var getAll = function(node) { var result = []; var iteration_list = [ node ]; var i = 0; while( iteration_list.length ){ var cur_node = iteration_list.shift(); if ( cur_node.nodeType != 1 ){ continue; } for ( i = 0; i < cur_node.childNodes.length; i++ ) { iteration_list.push( cur_node.childNodes[i] ); } result.push( cur_node ); } return result; }; 

 var cloned = this.onode.cloneNode(true); var all_onodes = getAll(this.onode); var all_cnodes = getAll(cloned); 

निष्कर्ष

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

मुझे यह जानने में दिलचस्पी होगी कि सिस्टम स्तर पर अन्य अनुकूलन क्या लागू हो सकते हैं। उदाहरण के लिए, iframe / वस्तु तत्वों के आधार पर नेत्रहीन फटे क्षेत्रों की स्वचालित रचना, जैसा कि इस उदाहरण में मैन्युअल रूप से किया गया है: http://fb.html5isready.com ।


अनुप्रयोग के दृश्य प्रतिनिधित्व का हिस्सा वस्तु तत्व के अंदर है



मैंने ऐसी कोई विधि लागू नहीं की है, लेकिन मुझे लगता है कि यह स्वत: मोड में लागू करने के लिए यथार्थवादी है - जब कोई टेम्पलेट, उसके उदाहरण, शैली, परिचालन राज्य परिवर्तन किसी मानदंड के आधार पर स्वचालित रूप से बनाए गए एक iframe में आते हैं।

कृपया हमें सिस्टम स्तर पर अनुकूलन तकनीकों के अन्य कार्यान्वयन के बारे में बताएं जिनके बारे में आप जानते हैं ( जैसे या ऐसे )। या कहीं इस तरह के अनुकूलन ( उदाहरण ), या अपने विचारों के बारे में व्यक्त विचारों के बारे में यदि आप साझा करने के लिए तैयार हैं।