openhab / org.openhab.ui.habpanel

OUTDATED repo - HABPanel has moved to the openhab-webui repo!
https://github.com/openhab/openhab-webui
Eclipse Public License 1.0
96 stars 92 forks source link

Slow performance #301

Open HolgerHees opened 6 years ago

HolgerHees commented 6 years ago

I'm currently running habpanel from openhab 2.1 on my wall mounted tablet. I already eliminated a lot of performance critical thinks like animations or combining all svg as sprites in a single file. But there is still a permanent workload of 20-30% CPU time.

My Setup is based on ~600 items but only 10-20 of them are updatet every minute. But still all widgets are triggered for all items every time a single item is updatet.

I know it is difficult to know which items are used in a widget. Specially if there are referenced inside the template.

Here is already a branch where they tried some performance optimizations based on items from widget settings. But this works only if you have configured all of them there. This can really a pain if you have very complex widgets.

https://github.com/csowada/org.openhab.ui.habpanel/tree/increase_cpu

So why not providing different options to limit amount of update calls.

  1. Can be the usage of the items from widget settings like in the branch above
  2. We could also try to detect the getItemState calls inside a template, but I think this will not work in all situations
  3. Which I would prefer is a very generic way. Just provide a String field where I can list (as CSV) all used itemNames inside this widget. If it is empty it should work like before. But if there are any itemNames inside, the widget should be refreshed only if one of the items is updatet.
8666 commented 5 years ago

Mine is using a lot of RAM too, like 1,2GB according Chrome task manager

pk1 commented 5 years ago

After seeing in the dev console a lot of stuff going on (item refreshes) I eliminated some of my items which are updated every few seconds (mainly related to hardware resources like CPU, RAM and so on) but overall performance on a Samsung Tab A tablet is still not really good (most of all scrolling vertically through the shown view\page) and so it's no fun working with this device which is a pity.

As I don't know the details of the habpanel architecture it would be good to know if the overall dashboard configuration has an impact on the performance or just the shown\visible view with the configured widgets?

Tried also to search the web for some best practices and so on but have not really found something useful. I can imagine that reducing the amount of generated HTML code for a page might also be something that could improve the performance but here again I'm missing some official best practices or something like that to know what should be avoided and what not.

HolgerHees commented 5 years ago

I figured out the the angular digest process was running the whole time if you have a lot of elements.

I solved this by implementing everything as a custom widget and skipping the digest cycle.

Details can be found here in the last paragraph 'Optimizing the “digest cycle”'

http://www.intranet-of-things.com/smarthome/infrastructure/control/display/

pk1 commented 5 years ago

Definitely interesting! Do you maybe have also one of your custom widgets somewhere available to better understand the implementation?

Not sure if I understand your approach correctly but I think that your widgets are "somehow" wrapped with a custom directive, right?

HolgerHees commented 5 years ago

directly above this paragraph you find 2 github urls where you can download everything.

pk1 commented 5 years ago

Ah sorry, I was expecting to see just some exported widgets and not everything in one file habpanel.config. Ok got it, let's see if I can somehow use this approach in my configuration.

pk1 commented 5 years ago

So after having everything in place I tried to do so some very basic examples by using for example your dashboard button directive which is working without any issue. Then I tried to just output the state of one of my items by just doing this in my widget:

<div oc-lazy-load="['/static/custom-theme/helper.js']">
   <div class="section">    
      <div mv-watch mv-content="itemState('seasonName')"></div>
   </div>
<div>

This unfortunately results in the error "TypeError: scope.addUpdateListener is not a function" for the mvWatch directive.

Now I'm not sure if this addUpdateListener error is related directly to Angular or not and what this error means exactly? For some reason it seems not to be possible to add the update listener to the scope object.

pk1 commented 5 years ago

Instead of using addUpdateListener I had to use a closure:

scope.onUpdate = function( updatedItemName ) { .... };

However, the update event is not really triggered.

Can you tell me on which version of openHab your implementation is based?

HolgerHees commented 5 years ago

currently I'm using openhab 2.3

HolgerHees commented 5 years ago

btw. maybe we should continue this conversation via email instead of "spamming" this issues thread.

you can contact me via my contact form at

http://www.intranet-of-things.com/contact/

or via a private message at

https://community.openhab.org/