Very high cpu load while using webclient

[rohlandm]

While using the web client, I have a very high CPU load, using both Google Chrome and Vivaldi (Chromium based). I have attached a screenshot of the chrome task manager:

This issue hinders me from using the web client in a "normal-use scenario", keeping it open in a pinned tab.

Edit:
I use Ubuntu 16.10 on a Dell XPS 13 (9360)

[offlinehoster]

Same problem with Ubuntu. High CPU usage by 105-110 %.

After closing that threema web app tab it is going down to the regulat 1-8 %....

Ubuntu 16.04 LTS (64bit)
Firefox 51.0.1 (64bit)

[2b-as]

Same issue here on OSX 10.11.6 with Firefox 51.0.1, but only in the messaging/chat view.

As soon as I return to the overview of contacs with their last messages, CPU usage drops to almost normal levels.

[meyerjo]

Same issue on Windows 10 with 56.0.2924.87 (64-bit) (only in the messaging view)

[rugk]

dupe of #20 (or at least closely related)

[fichtennadel]

Some details for this issue on FF 51.0.1 on Win7:

The CPU load goes only up to 100%, when chat/messaging view is open.
As soon as I close the indivdial chat by clicking ◀️ and returning to the contacts overview, CPU is down to idle again.

Javascript debugger "pause" button stops repeatedly in angular-material.min.js:
var n = e.Math.max(0, e.Math.min(i.now() - h, E));

Call stack:

f@https://web.threema.ch/node_modules/angular-material/angular-material.min.js?v=1.0.3:13822:0
$@https://web.threema.ch/node_modules/angular-material/angular-material.min.js?v=1.0.3:13829:0
callback@https://web.threema.ch/node_modules/angular/angular.js?v=1.0.3:12908:10
completeOutstandingRequest@https://web.threema.ch/node_modules/angular/angular.js?v=1.0.3:6045:6
Browser/self.defer/timeoutId<@https://web.threema.ch/node_modules/angular/angular.js?v=1.0.3:6324:6

Hope this helps.

[dbrgn]

Thanks @fichtennadel! That made me take a closer look at the profiler again, and I think I found the cause of the high CPU use this time :)

[dbrgn]

In case someone wants to test, the less-progressbars branch should improve the situation: #117

[fichtennadel]

In case someone wants to test, the less-progressbars branch should improve the situation

Can't test the branch, but after reading the description of the fix, I had the idea to remove all the progress bars by scrolling up the history to the top: After the top circle vanished, CPU load goes down.

[dbrgn]

The fix from #117 is now live on https://web.threema.ch/, as of v1.0.4.

Would be good to get some feedback from @fichtennadel @meyerjo @2b-as @offlinehoster @rohlandm @rugk on whether the CPU load is fixed or at least greatly reduced.

[lgrahl]

Firefox: CPU load still starts going up once a conversation is being opened ~40%. When the conversation is being closed, it goes down immediately to ~idle%. I can send you a profile if you want me to.

[2b-as]

Firefox / OSX: I can confirm what @lgrahl said. CPU usage now 40% instead of 100% in conversation view.
Interesting detail: If I scroll up to the first message in a conversation, CPU usage goes down to normal level and stays there as long as this particular conversation stays opened, even if I scroll down again. Once I close and re-open that conversation, CPU load goes to 40% again.

[sillych]

@2b-as do you habe a lot of thumbnail images in this conversation?

[2b-as]

@sillych Number of images doesn't seem to have any influence on CPU load

[sillych]

@2b-as thanks!
i can reproduce the high CPU load:

• open a conversation with a lot of text messages
• moving the mouse rapidly over different the chat bubbles

[fichtennadel]

Firefox: CPU load still starts going up once a conversation is being opened ~40%.

For me it's a bit better than before: load at about ~15% instead of 50%, but the difference to lgrahl is probably just the display value, it's the same order of magnitude.

If I scroll up to the first message in a conversation, CPU usage goes down to normal level and stays there as long as this particular conversation stays opened, even if I scroll down again. Once I close and re-open that conversation, CPU load goes to 40% again.

Same for me (modulo % load as above).

My guess is, it's related to the number of unloaded items and/or images: if I scroll upwards to the top, and repeat to do so as long as the circle on the very top still circles until the one on the top vanishes, load is down to idle.
I've tried this multiple times, behaviour is consistently reproducable and it's my current workaound ;-)

moving the mouse rapidly over different the chat bubbles

Couldn't reproduce this.

What about removing the turning circles temporarily by something static? Just to be sure they are the problem.

[rohlandm]

I can confirm that with 1.0.4 the load while scrolling through a conversation is between 5 and 15% and close to zero if left alone.

[offlinehoster]

Currently it looks good on Ubuntu Linux with Firefox.

[ovalseven8]

When I click on a contact and the conversation is loaded, the CPU load is sometimes up to ~90 %. Is this normal?

(Using Firefox 51.0.1; Lubuntu 16.04)

[dbrgn]

@ovalseven8 During the loading, or even after everything has been loaded for a while?

[ovalseven8]

During the loading.

[dbrgn]

Yes, that is currently expected. AngularJS does a lot of things in the background (many watches being fired at the same time, some animations being calculated). As always, frameworks give us big advantages, but also have their downsides. Performance is one of the downsides for Angular.

We'll probably tackle #40 some time in the future, that should help a lot.

If someone has experience optimizing AngularJS 1 applications: Pull requests are welcome :)

[ovalseven8]

Unfortunately, I can't help here. :(

And I am sure you know all the interesting posts about AnulgarJS performance already ;)
https://www.alexkras.com/11-tips-to-improve-angularjs-performance/

[dbrgn]

Yep, numbers 1, 2 and 5 are what we are trying to improve in #40 :)

[fichtennadel]

To me it seems manually painting the "loading" circle in JS causes the load. What about using a gif image instead?

[dbrgn]

To me it seems manually painting the "loading" circle in JS causes the load.

Which one, the one that appears when loading older messages? That's not animated with JS anymore, it's now pure CSS. There are still some animated through JS though, namely the ones that appear on a thumbnail when downloading a file. That's still on my TODO list.

[fichtennadel]

Which one, the one that appears when loading older messages?

I don't know, I just see that FF load is up to 20% (Chrome a little bit better: 8%) until I do once a full scroll up to the very first message.

So I guess this must be related to the "unvisited" messages, because as soon as I reach the start of the chat, load is <1% in both FF and Chrome.
Note that this is not related to the media in the chat being fully loaded: Even if there are still images and videos not fully loaded (unsharp/turning circle), load is <1% if one time scrolled up to the top.

Can you reproduce this?

[fichtennadel]

FF load is up to 20% (Chrome a little bit better: 8%) until I do once a full scroll up to the very first message.

Slight improvement with release 1.1.0, but load still constant at ~8% in FF until I do the "scroll up/down workaround"

Can anyone else confirm this "scroll up/down workaround"? Maybe this gives a hint to the cause of the load issue.

[2b-as]

Yes, the "scroll up/down workaround" also works for me.

[dbrgn]

Fun story: microsoft/vscode#22900 (was #1 on Hacker News yesterday). Seems that CSS animations really are implemented quite inefficient.

We should probably replace the loading spinner with an old fashioned GIF.

[fichtennadel]

+1 for the old fashioned GIF, at least you could give it a try if it's better than CSS in our case

[sebkraemer]

Same problem here with Firefox 52 64bit under Linux, CPU around 50% constantly.
Scrolling-up-down doesn't appear to make a difference..

[offlinehoster]

How long can this take to fix?

Even those others are able to provide an own app for example with much lower cpu usage than Threema.

I mean...using Threema would be much more efficient if the cpu would not consumpt over 50% to sometimes 100% of cpu power and so off batterytime…

[lgrahl]

@offlinehoster While I understand your concern, your posting is not constructive. However, I agree that this bug should take high priority.

[offlinehoster]

I totally agree with you @lgrahl , but what else could i do as a simple Threema user to get back to the table and talk about my bad user experiences?

sry for the (cpu fan) noise.

[lgrahl]

I'd say penetrant pinging in the issue is fine. 😉 Which is what we're doing right now.

[dbrgn]

As a workaround you can use Chrome for now, where the CPU consumption isn't that bad.

We're aware of the issue, but with limited manpower setting development priorities is hard :) At least the GIF / spinner issue should be fixed in one of the next 1 or 2 releases, that might already help.

Help is always welcome of course.

[dbrgn]

By the way, in current Firefox Nightly Threema Web barely uses 1% of CPU when idle. The animation is still executed though, but runs at 60 fps. So it seems that they fixed the performance bug of simple animations using 10% CPU.

[dbrgn]

#264 was just merged. Tests of current master are welcome :) (It's a simple npm install and npm run serve:live.) Should land in the next release.

[dbrgn]

The fix from #264 is now deployed in Threema Web 1.4.0.

Is CPU load still an issue?

[ovalseven8]

It feels like the performance improved IN THE CONVERSATION AREA and that the animation disappears faster and the messaging are there instead, what is good. 👍
However, when you want to open another conversation, it still is VERY slow and takes quite a while so that the messages are there. But when the conversation is loaded, it is faster now.

So, I guess the next step should be improving performance when opening other conversations.

Here some CPU information (using Firefox):

When I move the mouse rapidly over different chat bubbles:

When I do nothing (with Threema Web open):

When I open (another) conversation:

[2b-as]

Firefox CPU load while in conversation view: ~ 5% Firefox CPU load if not in conversation (where the contacts are listed): ~ 0.5% So, much better than before.

…

On 20.07.17 11:40, Danilo Bargen wrote: The fix from #264 <#264> is now deployed in Threema Web 1.4.0. Is CPU load still an issue? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#39 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADM1GFVrCNdq_trCDhtg4vx-igqaUA8Aks5sPyChgaJpZM4MCZB->.

[rugk]

BTW: If you need to want to use a better thing instead of the gif spinner, maybe use the new format APNG… It is quite widely supported – at least for the browsers you can support, because of WebRTC.

[dbrgn]

However, when you want to open another conversation, it still is VERY slow and takes quite a while so that the messages are there.

Yes, but in that case a lot of things are happening at the same time, so (at least currently) it's expected.

Speeding up the loading of conversations is planned. Among other things, #273, #272, #40 and others should also improve the situation.

Will close this for now, since the main problem (high load even when idle) should now be solved.