Czy obserwatory mutacji DOM są wolniejsze niż zdarzenia mutacji DOM?

Question

Jul 11, 2012, 05:43 AM

events javascript mutation-events observers performance

Czy obserwatory mutacji DOM są wolniejsze niż zdarzenia mutacji DOM?

Poniższy kod wykorzystuje zdarzenie mutacji DOMDOMNodeInserted wykryć istnieniebody element i zawiń goinnerHTML w opakowanie.

<!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>

I pomimo sukcesu opakowania, pojawia się błąd pokazujący, że węzeł nie został znaleziony.Ta odpowiedź pytania wyjaśnił, że ponieważ załadowano jQuery, dodanodiv element do ciała, aby wykonać kilka testów, ale nie udało się tego usunąćdiv element, ponieważ ten element został zawinięty w opakowanie tak, że nie jest już elementem podrzędnym ciała.

Powyższy eksperyment nam to mówiDOMNodeInserted zdarzenie jest szybsze niż testy jQuery, ponieważ element testowy jQuery (div) został zawinięty, zanim zostanie usunięty przez jQuery.

Teraz poniższy kod może osiągnąć taką samą manipulację i wykorzystuje nowo wprowadzone obserwatory mutacji DOM. Od tego czasu (2012-07-11) działa tylko na Chrome 18 i nowszych.

<!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>

Te kody nie spowodowały żadnego błędu. Oznacza to, że jQuery jest szybszy niż obserwatorzy mutacji DOM, więc mógł usunąć swój element testowy (div) zanim ten element zostanie owinięty w opakowanie.

Z powyższych dwóch eksperymentów wiemy, że jeśli chodzi o szybkość wykonywania:

Zdarzenia mutacji DOM> testy jQueryTesty jQuery> Obserwatorzy mutacji DOM

Czy ten wynik może odpowiednio udowodnić, że obserwatory mutacji DOM są wolniejsze niż zdarzenia mutacji DOM?