The docs on MDN एक सामान्य अधूरा उदाहरण है और प्रदर्शन नहीं है सामान्य कठिनाइयों। Mutation summary लाइब्रेरी मानव-अनुकूल आवरण प्रदान करती है, लेकिन सभी रैपरों की तरह यह ओवरहेड जोड़ती है। Performance of MutationObserver to detect nodes in entire DOM देखें।
पर्यवेक्षक बनाएं और शुरू करें।
चलिए एक रिकर्सिव दस्तावेज़-व्यापी उत्परिवर्तन ऑब्सर्वर का उपयोग करते हैं जो सभी जोड़े/हटाए गए नोड्स की रिपोर्ट करता है।
var observer = new MutationObserver(onMutation);
observer.observe(document, {
childList: true, // report added/removed nodes
subtree: true, // observe any descendant elements
});
अतिरिक्त नोड्स की निष्क्रिय गणना।
बड़े पैमाने पर बड़े/जटिल पृष्ठों की लोडिंग धीमा कर देता है, Performance देखें।
कभी-कभी एच 1 तत्वों को मूल कंटेनर में एकत्रित किया जाता है, अगला अनुभाग देखें।
function onMutation(mutations) {
mutations.forEach(mutation, mutation =>
Array.prototype
.filter.call(mutation.addedNodes, added =>
added.localName == 'h1' && added.textContent.match(/foo/)
).forEach(h1 =>
h1.innerHTML = h1.innerHTML.replace(/foo/, 'bar')
);
);
}
अतिरिक्त नोड्स की कुशल गणना।
अब कठिन हिस्सा है। एक उत्परिवर्तन रिकॉर्ड में नोड्स कंटेनर हो सकते हैं जबकि एक पृष्ठ लोड किया जा रहा है (पूरे साइट हेडर ब्लॉक की तरह इसके सभी तत्वों को केवल एक जोड़ा नोड के रूप में रिपोर्ट किया गया है): विनिर्देश doesn't require प्रत्येक जोड़ा नोड अलग-अलग सूचीबद्ध होने के लिए, इसलिए हमें querySelectorAll (अत्यंत धीमी) या getElementsByTagName (अत्यंत तेज़) का उपयोग करके प्रत्येक तत्व के अंदर देखें।
function onMutation(mutations) {
for (var i = 0, len = mutations.length; i < len; i++) {
var added = mutations[i].addedNodes;
for (var j = 0, lenAdded = added.length; j < lenAdded; j++) {
var node = added[j];
var found;
if (node.localName === 'h1') {
found = [node];
} else if (node.children && node.children.length) {
found = node.getElementsByTagName('h1');
} else {
continue;
}
for (var k = 0, lenFound = found.length; k < lenFound; k++) {
var h1 = found[k];
if (!h1.parentNode || !h1.textContent.match(/foo/)) {
// either removed in another mutation or has no text to replace
continue;
}
var walker = document.createTreeWalker(h1, NodeFilter.SHOW_TEXT);
while (walker.nextNode()) {
var textNode = walker.currentNode;
var text = textNode.nodeValue;
if (text.match(/foo/)) {
textNode.nodeValue = text.replace(/foo/, 'bar');
}
}
}
}
}
}
क्यों बदसूरत वेनिला for छोरों? क्योंकि forEach और filter और ES2015 for (val of array) तुलना में बहुत धीमी हैं। Performance of MutationObserver to detect nodes in entire DOM देखें।
TreeWalker क्यों? उप-तत्वों से जुड़ी किसी भी घटना श्रोताओं को संरक्षित करने के लिए। केवल Text नोड्स को बदलने के लिए: उनके पास बच्चे नोड्स नहीं हैं, और उन्हें बदलने से नया उत्परिवर्तन ट्रिगर नहीं होता है क्योंकि हमने childList: true का उपयोग किया है, characterData: true नहीं।
उत्परिवर्तन की गणना किए बिना लाइव HTMLCollection के माध्यम से अपेक्षाकृत दुर्लभ तत्वों को संसाधित करना।
तो हम एक तत्व है कि शायद ही कभी H1 टैग, या IFRAME, आदि इस मामले में हम को सरल बनाने और एक स्वचालित रूप से अपडेट getElementsByTagName द्वारा दिया HTMLCollection साथ पर्यवेक्षक कॉलबैक में तेजी लाने के कर सकते हैं की तरह इस्तेमाल किया जा माना जाता है के लिए देखो।
var h1s = document.getElementsByTagName('h1');
function onMutation(mutations) {
if (mutations.length == 1) {
// optimize the most frequent scenario: one element is added/removed
var added = mutations[0].addedNodes[0];
if (!added || (added.localName !== 'h1' && !added.children.length)) {
// so nothing was added or non-H1 with no child elements
return;
}
}
// H1 is supposed to be used rarely so there'll be just a few elements
for (var i = 0, len = h1s.length; i < len; i++) {
var h1 = h1s[i];
if (!h1.textContent.match(/foo/)) {
continue;
}
var walker = document.createTreeWalker(h1, NodeFilter.SHOW_TEXT);
while (walker.nextNode()) {
var textNode = walker.currentNode;
var text = textNode.nodeValue;
if (text.match(/foo/)) {
textNode.nodeValue = text.replace(/foo/, 'bar');
}
}
}
}
हैलो @ wOxxOm - सबसे पहले, आपको रविवार को चिंता करने के लिए क्षमा करें लेकिन आपके उत्तर के लिए धन्यवाद। दूसरा, क्या आप साझा कर सकते हैं विशेष रूप से आप किस बारे में चिंतित हैं? तीसरा, एक से दस के बीच पैमाने पर, आप कितने चिंतित थे? और आखिरकार, यदि आपके पास आसानी से Google के उदाहरणों में से एक से एक उपयुक्त संसाधन है, तो शायद आप इसे एक उत्तर के रूप में साझा कर सकते हैं और यदि यह सही है तो मैं इस तरह चिह्नित करूंगा। आपकी सहायता के लिए धन्यवाद. –
मुझे इसके उत्तर के बारे में सुनने में दिलचस्पी होगी, मैं इसे बहुत पहले नहीं देख रहा था, लेकिन इसे समाप्त करने के लिए समाप्त हो गया क्योंकि समय नहीं था या इसे पूरा करने की आवश्यकता नहीं थी। – osouthgate
आपकी प्रतिक्रिया @wOxxOm के लिए धन्यवाद - वास्तव में बहुत उपयोगी है हालांकि पहले दो पृष्ठों पर किसी भी लिंक ने वैध उत्तर प्रदान नहीं किया है, हालांकि कुछ अच्छे लेख हैं। यदि आप स्टैक ओवरफ्लो पर डुप्लिकेट थ्रेड से अवगत हैं, तो हम इस प्रश्न को वैध उत्तर के रूप में लिंक कर सकते हैं यदि इसे वैध डुप्लिकेट माना जाता है।हालांकि आपका समय बर्बाद करने के लिए खेद है, आपको जवाब देने से रोकने के लिए बहुत स्वागत है और शायद कहीं और चिंताजनक प्रयासों पर ध्यान केंद्रित करें। मैं आपकी भलाई की कामना करता हूं। –