Mutation observer emits n number of changes, which makes my other functions slow. Any ways to wait for each iteration of change and then to proceed?

Question

I have 1 mutation observer which is used as directive,

Mutation.ts:

const element = this.elementRef.nativeElement;

        this.changes = new MutationObserver((mutations: MutationRecord[]) => {
            mutations.forEach((mutation: MutationRecord) => this.domChange.emit(mutation));
        }
        );

        this.changes.observe(element, {
            childList: true,
            subtree: true
        });

component HTML :

<child-component (mutation)="mutate($event)"></child-component>

component TS:

mutate(event) {
if(searchKey) {
const elements = this.elem.nativeElement.querySelectorAll(`.${'highlight'}`);
      const instance = new Mark(elements);
      instance.mark(searchKey, options);
}
}

This child component loads nearly 500 records, dom change emits so many times that my mutate(event) function is not able to handle all at once. Need to understand if there is a way that I can highlight for each request without my app freezing

Don't emit each mutation. Emit the entire `mutations` array. See also [Performance of MutationObserver to detect nodes in entire DOM](https://stackoverflow.com/a/39332340) — wOxxOm, Mar 23 '21 at 07:19

score 0 · Accepted Answer · answered Mar 23 '21 at 10:35

Check out : Performance of MutationObserver to detect nodes in entire DOM

 const queue = [];
    const mo = new MutationObserver(mutations => {
      if (!queue.length) requestAnimationFrame(process);
      queue.push(mutations);
    });
    function process() {
      for (const mutations of queue) {
        // ..........
      }
      queue.length = 0;
    }

This piece of code worked fine. Excellent answer given in that post. Thank you.

Mutation observer emits n number of changes, which makes my other functions slow. Any ways to wait for each iteration of change and then to proceed?

1 Answers1