क्या कोई मुझे साबित कर सकता है कि उन्हें बदलने से पहले डोम तत्वों को हटाने के संबंध में here (नीचे कॉपी) की सलाह दी गई है और फिर उन्हें फिर से सम्मिलित करना हमेशा तेज है।जावास्क्रिप्ट प्रदर्शन - डोम रीफ्लो - Google आलेख
साबित करके, मैं कुछ आंकड़े देखना चाहता हूं। यह बहुत अच्छा है कि वे इसका शोध करते हैं, लेकिन मुझे लगता है कि यह लेख बिना किसी समस्या के वास्तव में बहुत कमजोर है और समाधान कैसे हल करता है (जैसे लेख शीर्षक शीर्षक जावास्क्रिप्ट को गति देता है)
लेख ....
बाहर का प्रवाह डोम हेरफेर
यह पैटर्न हमें कई तत्वों को बनाने और उन्हें डोम एक भी पुनर्प्रवाहित ट्रिगर में डालने की सुविधा देता है। यह दस्तावेज़ फ्रेगमेंट नामक कुछ का उपयोग करता है। हम डीओएम के बाहर एक दस्तावेज़फ्रेगमेंट बनाते हैं (इसलिए यह प्रवाह के बाहर है)। इसके बाद हम इसमें कई तत्व बनाते हैं और जोड़ते हैं। अंत में, हम दस्तावेज़ तत्वों में सभी तत्वों को डीओएम में ले जाते हैं लेकिन एक एकल रिफ्लो ट्रिगर करते हैं। समस्या
चलिए एक ऐसा फ़ंक्शन बनाते हैं जो तत्व के भीतर सभी एंकरों के लिए क्लासनाम विशेषता को बदलता है। हम बस प्रत्येक एंकर के माध्यम से पुनरावृत्ति करके और अपने href विशेषताओं को अद्यतन करके ऐसा कर सकते हैं। समस्या यह है कि इससे प्रत्येक एंकर के लिए एक रिफ्लो हो सकता है।
function updateAllAnchors(element, anchorClass) {
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
}
समाधान
इस समस्या को हल करने के लिए, हम, डोम से तत्व निकाल सकते हैं सभी एंकर को अद्यतन, और उसके बाद तत्व वापस डालने जहां यह किया गया था। इसे प्राप्त करने में सहायता के लिए, हम एक पुन: प्रयोज्य फ़ंक्शन लिख सकते हैं जो न केवल डीओएम से तत्व को हटा देता है, बल्कि एक फ़ंक्शन भी देता है जो तत्व को अपनी मूल स्थिति में वापस डाल देगा।
/**
* Remove an element and provide a function that inserts it into its original position
* @param element {Element} The element to be temporarily removed
* @return {Function} A function that inserts the element into its original position
**/
function removeToInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element, nextSibling);
} else {
parentNode.appendChild(element);
}
};
}
अब हम एक तत्व है कि बाहर के प्रवाह के भीतर एंकर अद्यतन करने के लिए इस सुविधा का उपयोग कर सकते हैं, और केवल एक पुनर्प्रवाहित को गति प्रदान जब हम तत्व को हटा दें और हम तत्व सम्मिलित हैं।
function updateAllAnchors(element, anchorClass) {
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
insertFunction();
}
अच्छा विस्तार हालांकि दोनों उदाहरण मेरे लिए समान मात्रा में रेड्रॉज करते हैं। किसी भी मौके पर आप pastebin.me पर डेमो दे सकते हैं :) – redsquare
मैं स्वीकार करूंगा कि एक्सटेंशन चीजों को बहुत धीमा कर देता है, इसलिए कभी-कभी कम्प्यूटेशनल हेवी ऑपरेशंस पर अंतर देखना मुश्किल हो सकता है। Google मानचित्र ज़ूमिंग। – Alex