On page performance highly impacted by Typical?

[oliveratgithub]

Hi there, I have 3 Typical texts running on my page. But I noticed some major performance usage – like even Fans start spinning when my page is open, plus Activity Monitor shows the website's progress taking like 30%-60% of all CPU, WHILE Typical is "typing" the texts. Very uncommon for a quite simple page…

Has anyone observed something similiar?

I have two example cases that lead to my finding. When disabling any of them, the page performance & CPU usage drops to an expected (non relevant) level.

Example 1

"Simple" use as according to the docu / examples (unless I missed something)

(async() => {
    let Typical = await import('https://unpkg.com/@camwiegert/typical');

    const step1 = Typical.type(myTextDiv1, hideMyTextDiv3, showMyTextDiv1, 'This is step 1', 1000);
    const step2 = Typical.type(myTextDiv2, step1, hideMyTextDiv1, showMyTextDiv2, 'This is step 2', 1000);
    const step3 = Typical.type(myTextDiv3, step2, hideMyTextDiv2, showMyTextDiv3, 'This is step 3', 3000);
})();

While running, page performance is decreased / CPU spikes to 60%+.

Example 2

Instead of just looping 1 and the same text, I am looping a group of 3 different typing texts - one after each other, after the last one, the 1st starts again.

For this I use a while() { }-loop:

(async() => {
    let Typical = await import('https://unpkg.com/@camwiegert/typical');

    var loop = true;
    while(loop) {
        const step1 = await Typical.type(myTextDiv1, hideMyTextDiv3, showMyTextDiv1, 'This is step 1', 1000);
        const step2 = await Typical.type(myTextDiv2, step1, hideMyTextDiv1, showMyTextDiv2, 'This is step 2', 1000);
        const step3 = await Typical.type(myTextDiv3, step2, hideMyTextDiv2, showMyTextDiv3, 'This is step 3', 3000);
    }
})();

Page performance here is constantly 30%+ and spikes to 60%+ while Typical is "typing".

[oliveratgithub]

P.s.: I switched to TypewriterJS as I'm not seeing the performance issues there.

[camwiegert]

@oliveratgithub Sorry you were having trouble. I was not able to recreate the issue in your first example. If you are able to provide a link to a working reproduction I could take a look.

In your second example, I would expect to see issues since you are calling typical in an infinite loop.

[oliveratgithub]

@camwiegert thanks for your feedback. You're right my Example 2 was not ideal - not a JS novice 🙈 When I switched to TypewriterJS I also solved the section loop differently.

However, regarding Example 1 it might be worth mentioning that I tested/observed the CPU usage with Safari 12 on macOS 12 Monterey, on an intel MacBook Air 2018.