Sind DOM-Mutationsbeobachter langsamer als DOM-Mutationsereignisse?

Question

Jul 11, 2012, 05:43 AM

observers events performance javascript mutation-events

Sind DOM-Mutationsbeobachter langsamer als DOM-Mutationsereignisse?

Der folgende Code verwendet DOM Mutation EventDOMNodeInserted die Existenz der zu erkennenbody Element und wickeln seineinnerHTML in eine Hülle.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        function DOMmanipulation() {
            if (document.body) {
                document.removeEventListener('DOMNodeInserted', DOMmanipulation);
                // DOM manipulation start
                document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
                // DOM manipulation end
            }
        }
        document.addEventListener('DOMNodeInserted', DOMmanipulation);
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

Und trotz des erfolgreichen Wrappings gibt es einen Fehler, der anzeigt, dass ein Knoten nicht gefunden wurde.Diese Antwort einer Frage wurde erklärt, dass dies darauf zurückzuführen ist, dass beim Laden von jQuery eindiv Element in den Körper, um einige Tests durchzuführen, aber es gelang nicht, das zu entfernendiv element, da dieses Element in den Wrapper eingeschlossen wurde, sodass es kein untergeordnetes Element von body mehr ist.

Das obige Experiment sagt uns dasDOMNodeInserted Das Ereignis ist schneller als die Tests von jQuery, da das Testelement von jQuery (div) wurde verpackt, bevor es von jQuery entfernt werden kann.

Der folgende Code kann jetzt dieselbe Manipulation ausführen und verwendet die neu eingeführten DOM-Mutationsbeobachter. Ab diesem Zeitpunkt (11.07.2012) funktioniert es nur mit Chrome 18 und höher.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        var observer = new WebKitMutationObserver(function() {  
            if (document.body) {
                observer.disconnect();
                // DOM manipulation start
                document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
                // DOM manipulation end
            }
        });
        observer.observe(document, { subtree: true, childList: true });
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

Dieser Code hat keinen Fehler erzeugt. Das bedeutet, dass jQuery schneller als DOM Mutation Observer ist und daher sein Testelement entfernen konnte (div), bevor dieses Element in den Wrapper eingewickelt werden kann.

Aus den beiden oben genannten Experimenten geht hervor, dass in Bezug auf die Ausführungsgeschwindigkeit Folgendes zutrifft:

DOM-Mutationsereignisse> jQuery-TestsTests von jQuery> Beobachter der DOM-Mutation

Kann dieses Ergebnis angemessen beweisen, dass DOM-Mutationsbeobachter langsamer sind als DOM-Mutationsereignisse?