• Hi

    Thank you so much for this brilliant plugin. I have tried numerous other optimization plugins and nothing else comes close.

    I use dareboost to test my website and have found when I enable the lazyload option in Autoptimize I get an error, (marked in red), reported.

    It says :-
    Avoid Mutation Events in your scripts
    To capture DOM events, do not use Mutation Events. Alternatives exist.
    Good concept, bad implementation
    When developing complex JavaScript applications, you may need to know when the DOM node tree has changed. Introduced in 2000 in the DOM, Level 2 specification to provide a solution to this need, Mutations Events are browser-initiated events that let you know when a DOM node is added, removed, or deleted.

    Mutation Events, however, present major performance problems. First, they are synchronous, i.e. they prevent other events in the queue from being fired (if those events are used to update the UI, this will cause some lag). Second, they are implemented as browser events, thus traverse the DOM tree from the targeted HTML element to the parent element which listens for the event, clogging the JavaScript thread along the way.

    Mutation Events have been deprecated in 2016 in the DOM, Level 3 specification.

    Mutation Observers to the rescue
    If you need to watch for changes being made to the DOM tree, you should use the MutationObserver interface (DOM4 Living Standard). Mutation Observers are asynchronous, processed in batches, and observe specific or all changes to a node. They are more efficient in terms of CPU usage than browser events and therefore cause fewer to no UI freeze.

    Learn how to use Mutation Observers (Mozilla Developer Network).

    Detected mutations events:
    Please find below the Mutation Events that Dareboost found in your code:

    DOMNodeInserted:

    http://www.primaflorafloristaccrington.co.uk/wp-content%5B…%5D7d19.js?ao_version=2.7.7 (1 times)
    DOMAttrModified:

    http://www.primaflorafloristaccrington.co.uk/wp-content%5B…%5D7d19.js?ao_version=2.7.7 (1 times)

    Is this something I need to be concerned about and is there anything that can be done to eliminate the error?

    Thanks for you help

    Best regards

    John

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    Morning John;
    edit: thanks for the 5-star review 🙂

    AO actually implements lazysizes (a 3rd party lazyloading JS library), but I checked the source code and it actually only uses mutation events if mutationobserver is not available (i.e. on old browsers and on Opera Mini), see https://github.com/aFarkas/lazysizes/blob/gh-pages/lazysizes.js#L624-L630

    Conclusion; false positive 🙂

    Hope this clarifies,
    frank

    • This reply was modified 5 years, 9 months ago by Optimizing Matters. Reason: thank you John ;-)
    Thread Starter john53

    (@john53)

    Hi Frank

    Thank you very much for getting back to me so quickly.

    That’s great! So it only uses mutation events when required by an old browser or mini opera and this prevents problems when visitors are using the old browsers.

    Thanks once again for the fantastic plugin and support.

    Best regards

    John

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    you’re welcome John 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mutation events in scripts’ is closed to new replies.