CPU usage is too high

[Slarper]

I have test the template project and when I moved mouse on the console, the CPU usage boosted (around 20%).

flame graph shows that it is caused by the drawing.

It's an abnormal CPU usage, right? How to solve it?

[Slarper]

Sorry, I get it. Just add std::thread::sleep(duration) in main loop.

[kdheepak]

Because of the way the rust-tui-template is implemented, i.e.

if event::poll(timeout).expect("no events available") {
    match event::read().expect("unable to read event") {
        CrosstermEvent::Key(e) => sender.send(Event::Key(e)),
        CrosstermEvent::Mouse(e) => sender.send(Event::Mouse(e)),
        CrosstermEvent::Resize(w, h) => sender.send(Event::Resize(w, h)),
        _ => unimplemented!(),
    }
    .expect("failed to send terminal event")
}

it is going to proceed in the main loop every time there's an event:

    while app.running {
        // Render the user interface.
        tui.draw(&mut app)?;
        // Handle events.
        match tui.events.next()? { // this line will block until there's an event. When moving the mouse around there are lots of events generated.
            Event::Tick => app.tick(),
            Event::Key(key_event) => handle_key_events(key_event, &mut app)?,
            Event::Mouse(_) => {}
            Event::Resize(_, _) => {}
        }
    }

You can add a std::thread::sleep(duration) in the main loop but that'll mean you can't press and hold a key to type something repeatedly, and you'll run into other issues too.

One solution is to add a spawn a new thread in the EventHandler struct, and that thread only sends a Event::Render event (a new variant that you can add) every 250ms. And if the main function, you can render only if you get a Event::Render. Your main loop will look like this:

    while app.running {
        // Handle events.
        match tui.events.next()? { // lots of mouse events are still generated but no work is done in the while loop
            Event::Tick => app.tick(),
            Event::Key(key_event) => handle_key_events(key_event, &mut app)?,
            Event::Mouse(_) => {},
            Event::Resize(_, _) => {},
            Event::Render => tui.draw(&mut app)?,
        }
    }

That way you'll render only every 250ms.

Another alternative is to use the ratatui-async-template
which basically does the same thing described above out of the box. See tui.rs where a Event::Render is sent. This template uses tokio's and crossterm's async features to send events, but the rest of the code doesn't use any async if you don't want it.

If you have any questions, feel free to open an issue either on this book repository or on one of the template repositories.

[kdheepak]

To be clear, you'll always see an increased CPU usage with lots of mouse events generated. Controlling what work is done in the main loop can minimize this CPU usage to some extent.

The other alternative is to only send mouse click events. i.e. instead of this:

                    if event::poll(timeout).expect("no events available") {
                        match event::read().expect("unable to read event") {
                            CrosstermEvent::Key(e) => sender.send(Event::Key(e)),
                            CrosstermEvent::Mouse(e) => sender.send(Event::Mouse(e)),
                            CrosstermEvent::Resize(w, h) => sender.send(Event::Resize(w, h)),
                            _ => unimplemented!(),
                        }
                        .expect("failed to send terminal event")
                    }

you can write something like

                    if event::poll(timeout).expect("no events available") {
                        match event::read().expect("unable to read event") {
                            CrosstermEvent::Key(e) => sender.send(Event::Key(e)),
                            CrosstermEvent::Mouse(e) => {
                                match e.kind {
                                    MouseEventKind::Down(_) => sender.send(Event::Mouse(e)),
                                    _ => () // skip sending events that aren't `MouseEventKind::Down` kind of events
                               }
                            }
                            CrosstermEvent::Resize(w, h) => sender.send(Event::Resize(w, h)),
                            _ => unimplemented!(),
                        }
                        .expect("failed to send terminal event")
                    }

[joshka]

Alternatively don't draw unless a reasonable time has elapsed between ticks (e.g. 16.7ms for 60fps)

[Slarper]

It doesn't work... CPU usage is still the same and it even causes another problem - Event handling is not instant. Help!🥺

[joshka]

The fundamental problem with this application model is that it does something like the following in a loop

• draw
• wait with a timeout for the next event
• handle the event

The model of repeatedly drawing with some tick rate, is one that came from the original project and there are lots of apps out there that use it, but it's not the only way that you can do things. You could render frames only when things change (keep a dirty flag in your application state, or send a message or event when drawing is necessary). You don't really have to update your UI all that often for it to be effectively "instant" - and most likely don't ever need to do so more than 60 fps.