दिलचस्प पोस्ट
सी # डीएलएल से कार्यों को वीएस सी ++ में निर्यात करना संभव है? गार्ड क्यों शामिल हैं? ActiveMQ या RabbitMQ या ZeroMQ या JSON: मैं क्रॉस-डोमेन JSON कॉल कैसे कर सकता हूं एक नोडजेएस http.get प्रतिक्रिया में शरीर कहां है? बैबल-लोडर जेएसएक्स सिंटेक्स त्रुटि: अनपेक्षित टोकन जावा जांचें कि क्या दो आयत किसी भी बिंदु पर ओवरलैप हो प्रोसेसिंग के लिए जावा लाइब्रेरी पथ कैसे सेट करें फ़ायरफ़ॉक्स के लिए जावास्क्रिप्ट मेमोरी प्रोफाइलर MVC5 (वीएस2012) पहचान CreateIdentityAsync – मान रिक्त नहीं हो सकता एक कतार का उपयोग करके निर्माता / उपभोक्ता थ्रेड्स Android में हमारे अपने श्रोता इंटरफ़ेस कैसे बनायें? एचटीएमएल 5 संपर्क फ़ॉर्म में आवश्यक फ़ील्ड में त्रुटि संदेश की भाषा बदलना कोई अग्रणी शून्य के साथ .NET डेटटाइम "दिन" प्रारूप करें त्रुटि: फ़ाइल एन्क्रिप्ट की गई है या कोई डेटाबेस नहीं है

क्या दस्तावेज़ के टुकड़े का उपयोग वास्तव में प्रदर्शन को बेहतर बनाता है?

मुझे जेएस में प्रदर्शन के बारे में संदेह है।

कहो, मुझे अगले कोड मिल गया है:

var divContainer = document.createElement("div"); divContainer.id="container"; var divHeader = document.createElement("div"); divHeader.id="header"; var divData = document.createElement("div"); divData.id="data"; var divFooter = document.createElement("div"); divFooter.id="footer"; divContainer.appendChild( divHeader ); divContainer.appendChild( divData ); divContainer.appendChild( divFooter ); document.getElementById("someElement").appendChild( divContainer ); 

यह कोड सिर्फ ग्रिड बनाने के लिए कुछ अन्य कार्यों के लिए खोल बनाता है, ग्रिड बनाने की प्रक्रिया बहुत जटिल है और कई मान्यताओं के साथ और वर्तमान में मैं ग्रिड को भरने के लिए 2 विधियों का उपयोग कर रहा हूं, जो कि एक सरणी चर में पूरे html का निर्माण कर रहा है और दूसरे तत्वों को बनाते हैं और उन्हें documentFragment जोड़ते हैं।

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

इसलिए मैं सोच रहा था कि पिछले कोड में दस्तावेज़ के टुकड़े का उपयोग करने से बेहतर प्रदर्शन किया गया है जो इसे सभी तरह से लपेटता है:

 var fragment = document.createDocumentFragment(); var divContainer = document.createElement("div"); divContainer.id="container"; var divHeader = document.createElement("div"); divHeader.id="header"; var divData = document.createElement("div"); divData.id="data"; var divFooter = document.createElement("div"); divFooter.id="footer"; divContainer.appendChild( divHeader ); divContainer.appendChild( divData ); divContainer.appendChild( divFooter ); fragment.appendChild( divContainer ) document.getElementById("someElement").appendChild( fragment.cloneNode(true) ); 

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

उम्मीद है कि कुछ जेएस गुरु / ईश्वर यहां पर एक आशा की चकाचौंध चमकेंगे और इस मुद्दे के साथ हमें मदद करेंगे।


संपादित करें : इसलिए, मैं इस मुद्दे से संबंधित सामान के लिए देख रहा हूं और ऐसा लगता है कि दस्तावेजों के लिए आवश्यक रूप से बेहतर प्रदर्शन का मतलब नहीं है।

यह सिर्फ "स्मृति में" नोड्स के कंटेनर है एक टुकड़ा और कहते हैं, एक <div> बीच का अंतर यह है कि टुकड़ा के माता-पिता नहीं हैं और यह केवल डोम में नहीं होगा, केवल स्मृति में, जिसका अर्थ है कि टुकड़े पर किए गए कार्यों को तेज़ करना है क्योंकि DOM के कोई हेरफेर नहीं है ।

दस्तावेज़ पर W3C के दस्तावेज़ीकरण बहुत ही अस्पष्ट है लेकिन इस बिंदु पर भी, हर किसी के पसंदीदा ब्राउज़र असली टुकड़े का उपयोग नहीं करता है, बल्कि इसके बजाय यह MSDN दस्तावेज़ के अनुसार एक नया दस्तावेज़ बनाता है। इसका अर्थ है, आईई पर टुकड़े धीमे हैं I

इसलिए, सवाल प्रचलित है, यदि मैं एक तत्व (उदाहरण के लिए एक <div> ) को एक चर में बना देता हूं , लेकिन उसे डोम में शामिल नहीं किया जाता है, तत्वों (divs, tables, etc) और सामग्री जोड़ें और सभी काम किए जाने के बाद (लूप, सत्यापन, तत्वों का स्टाइल), उस तत्व को जोड़ा गया है, क्या यह एक टुकड़ा के समान है?

तथ्य यह देखते हुए कि IE एक "नकली" टुकड़ा का उपयोग करता है मैं उस दृष्टिकोण (एक div, एक टुकड़ा नहीं है, एक तत्व के रूप में एक तत्व का उपयोग) का उपयोग कर कम से कम IE में कहूँगा बेहतर है, मैं वास्तव में IE के लिए परवाह नहीं है, लेकिन मुझे जरूरत है यह परीक्षण (कार्यालय की नीति)।

इसके अलावा, अगर मैं इस तरह एक सरणी पर सभी html बना देता हूं:

 var arrHTML = ["<table>","<tr>", ....]; 

और फिर यह करें

 document.getElementById("someElement").innerHTML = arrHTML.join(""); 

यह IE पर तेज़ तरीका है, लेकिन कंटेनर का उपयोग करते समय अन्य प्रमुख ब्राउज़रों (एफएफ, क्रोम, सफारी और ओपेरा) बेहतर प्रदर्शन करते हैं और फिर इसे जोड़ते हैं (टुकड़ा या div)।

यह सब इसलिए है क्योंकि सभी तत्वों को बनाने की प्रक्रिया सचमुच तेज हो जाती है, लगभग 8-10 सेकेंड्स में 24 कॉलम के साथ 20,000 पंक्तियों का निर्माण होता है, यह बहुत सारे तत्व / टैग्स होते हैं, लेकिन ब्राउज़र कुछ सेकेंड्स फ्रीज करता है जब अगर वे कोशिश करते हैं और उन्हें एक-एक करके जोड़ते हैं, तो वे सब एक ही समय में संलग्न होते हैं, यह नरक है

फिर से धन्यवाद लोग, यह वाकई दिलचस्प और मजेदार है

Solutions Collecting From Web of "क्या दस्तावेज़ के टुकड़े का उपयोग वास्तव में प्रदर्शन को बेहतर बनाता है?"

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

चलिए एक उदाहरण लेते हैं

मान लीजिए कि कक्षा कंटेनर के साथ 10 तत्वों में 20 डिविज़ जोड़ना होगा।

के बग़ैर:

 var elements = []; for(var i=20; i--;) elements.push(document.createElement("div")); var e = document.getElementsByClassName("container"); for(var i=e.length; i--;) { for(var j=20; j--;) e[i].appendChild(elements[j].cloneNode(true)); } 

साथ में:

 var frag = document.createDocumentFragment(); for(var i=20; i--;) frag.appendChild(document.createElement("div")); var e = document.getElementsByClassName("container"); for(var i=e.length; i--;) e[i].appendChild(frag.cloneNode(true)); 

मेरे लिए क्रोम 48 पर किसी दस्तावेज़ के टुकड़े का उपयोग 16 गुना तेज हो जाता है।

जेएसपीर्फ़ पर टेस्ट करें

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

मैं यहाँ एक टुकड़ा का उपयोग करने के लिए एक अच्छा उदाहरण को स्पष्ट करने के लिए एक jsPerf स्थापित किया है आप क्रोम में देखेंगे कि शायद कोई फर्क नहीं है (काम पर आधुनिक अनुकूलन, मुझे लगता है), हालांकि, आईई 7 में, टुकड़े के बिना .08 ऑप्स / सेक, 3.28 ऑप्स / सेक एक टुकड़ा के साथ मिलता है।

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

मैंने यह परीक्षण करने के लिए एक jspref लिखा है और ऐसा लगता है कि नोड टुकड़ा 2.34% तेज है

http://jsperf.com/document-fragment-test-peluchetti

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

मेरे पास ओपी के बारे में एक ही सवाल था, और सभी उत्तरों और टिप्पणियों के माध्यम से पढ़ने के बाद, ऐसा लगता नहीं था कि ओपी क्या कह रहा था, वास्तव में किसी को वास्तव में समझ में नहीं आया।

मैंने निकोल पाल्चटेटी की परीक्षा से क्यू लिया और इसे थोड़ा बदल दिया।

तत्वों को एक <div> में जोड़ने के बजाय और फिर documentFragment लिए जोड़ते हुए, टुकड़े परीक्षण को <div> बजाय पहले की बजाय तत्व ( documentFragment ) में जोड़ा जाता है। इसके अलावा, किसी भी छिपी हुई उपरि लागत से बचने के लिए, दोनों परीक्षण <div> कंटेनर और documentFragment दोनों बनाकर शुरू होते हैं, जबकि प्रत्येक टेस्ट केवल एक या दूसरे का इस्तेमाल करते हैं

मैंने मूल प्रश्न को मूल रूप से लिया, यह एक <div> या documentFragment कंटेनर के रूप में उपयोग करने वाले नोड्स के एक एकल ऐप को तेजी से करना है ?

ऐसा लगता है कि <div> का उपयोग करना तेज है, कम से कम क्रोम 49 पर।

http://jsperf.com/document-fragment-test-peluchetti/39

केवल उपयोग के मामले में मैं documentFragment के लिए सोच सकता हूं (फिलहाल) यह कम स्मृति (जो नगण्य हो सकता है) लेता है, या यदि आपके पास भाई नोड्स का एक गुच्छा शामिल है जिसे आप जोड़ना नहीं चाहते हैं तो " कंटेनर "तत्व documentFragment फ्रेगमेंट एक आवरण की तरह है जो केवल इसकी सामग्री को छोड़ कर घुलता है।

 <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div ms-controller='for1'> <ul> </ul> </div> <script> var ul = document.querySelector('ul'); console.time('no fragment'); for(var i=0;i<1000000;i++){ var li = document.createElement('li'); li.innerText = i; ul.appendChild(li); } console.timeEnd('no fragment'); console.time('has fragment');; var frg = document.createDocumentFragment() for(var i=0;i<1000000;i++){ var li = document.createElement('li'); li.innerText = i+'fragment'; frg.appendChild(li); } ul.appendChild(frg) console.timeEnd('has fragment'); </script> </body> </html>