Geschwindigkeit Tablet-UI - Aufruf von Labels, Switches optimieren

Begonnen von Tsturm, 06 März 2018, 22:36:36

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1 2 Alle
Benutzer-Aktionen

Tsturm

06 März 2018, 22:36:36
Hallo Zusammen,

habe ein kleine Tablet-UI gebaut, um diverse Schalter und Stati abzufragen und zu bedienen.

Allerdings ist der Aufruf immer zwei bei drei Sek lang - obwohl nur einfache Schalter abgefragt werden. Besonders draußen zum Garage-bedienen ist das einfach unschön. Laut Google Entwickler-Tool dauern die Abfragen eines Devices (Switch oder Label) etwa 150-300 ms. Ich habe so um die 6-15 Labels und Switches.

Gibt es da Strategien, das zu optimieren? Tablet-UI aufbauen, und dann nacheinander die Abfragen abarbeiten? FHEM tuning, um die Antworten schneller zu bekommen?
VG Timmo

Index.html (habe da mal alles reingepackt, um weniger Dateien zu laden)

Code Auswählen
<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.6.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="web_device" content="WEB_Tablet_UI">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="longpoll" content="1">
<meta name="longpoll_type" content="websocket">
<meta name="toast" content="0" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes" />
    <meta name="debug" content="0">
    <script src="js/fhem-tablet-ui.js" async></script>


    <title>FHEM-Tablet-UI</title>
</head>
<body>
    <div data-type="swiper" data-height="90%" data-width="100%" class="top-space-2x navbuttons nopagination">
    <ul>
        <li>
<div class="inline">
<div data-type="label" class="big bold">Home</div>
<div class="sheet center-align">
<div class="row">
<div class="sheet">
<div class="cell inline">
<header class="large white">Garage</header>
<div
data-type="switch"
data-device="Garage"
data-states='["open","closed","set_opening","set_closing"]'
data-set-states='["set_closing","set_opening","",""]'
data-icons='["fa-car","fa-car","fa-hand-o-up","fa-hand-o-down"]'
data-colors='["white","white","white","white"]'
data-background-colors='["green","red","blue","yellow"]'
class="large"></div>
</div>
<div class="cell inline">
<header class="large white">Licht</header>
<div
data-type="switch"
data-device="Licht_01_Garten_struc"
data-states='["on","off"]'
data-set-states='["off","on"]'
data-colors='["white","white"]'
data-background-colors='["yellow","red"]'
class="large"></div>
</div>
</div>
</div>
<div class="row">
<div class="sheet">
<div class="cell inline">
<header class="large white">Küche</header>
<div
data-type="switch"
data-device="Kueche_Sw_LED"
data-set-on="on"
data-set-off="off"
data-states='["on","off"]'
data-colors='["white","white"]'
data-background-colors='["red","green"]'
class="large"></div>
</div>
<div class="cell inline">
<header class="large white">Rolläden</header>
<div
data-type="switch"
data-device="EG_Rolladen"
data-set-on="on"
data-set-off="off"
data-states='["on","off"]'
data-icons='["oa-fts_shutter_10","oa-fts_shutter_100"]'
data-colors='["white","white"]'
data-background-colors='["green","red"]'
class="large"></div>
</div>
</div>
</div>
<div class="row">
<div class="sheet">
<div class="cell inline">
<header class="large white">Stereo</header>
<div
data-type="switch"
data-device="Stereo_struc"
data-set-on="on"
data-set-off="off"
data-states='["on","off"]'
data-icons='["fa-music","fa-music"]'
data-colors='["white","white"]'
data-background-colors='["green","red"]'
class="large"></div>
</div>
<div class="cell inline">
<header class="large white">Kaffee</header>
<div
data-type="switch"
data-device="Kaffee_plug"
data-set-on="on"
data-set-off="off"
data-states='["on","off"]'
data-icons='["fa-coffee","fa-coffee"]'
data-colors='["white","white"]'
data-background-colors='["green","red"]'
class="large"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="inline">
<div data-type="label" class="big bold">Gartenlicht</div>
<div class="sheet">
<div class="row">
<div class="sheet">
<div class="cell inline">
<header class="large white">Haus</header>
<div
data-type="switch"
data-device="Licht_06_Haus_struc"
data-states='["on","off"]'
data-set-states='["off","on"]'
data-colors='["white","white"]'
data-background-colors='["yellow","red"]'
class="large"></div>
</div>
</div>
</div>
<div class="row">
<div class="sheet">
<div class="cell inline">
<header class="large white">Küche</header>
<div
data-type="switch"
data-device="Licht_02_Garage_struc"
data-states='["on","off"]'
data-set-states='["off","on"]'
data-colors='["white","white"]'
data-background-colors='["yellow","red"]'
class="large"></div>
</div>
<div class="cell inline">
<header class="large white">Mitte</header>
<div
data-type="switch"
data-device="Licht_03_Mitte_struc"
data-states='["on","off"]'
data-set-states='["off","on"]'
data-colors='["white","white"]'
data-background-colors='["yellow","red"]'
class="large"></div>
</div>
</div>
</div>
<div class="row">
<div class="sheet">
<div class="cell inline">
<header class="large white">Deck</header>
<div
data-type="switch"
data-device="Licht_04_Deck_struc"
data-states='["on","off"]'
data-set-states='["off","on"]'
data-colors='["white","white"]'
data-background-colors='["yellow","red"]'
class="large">
</div>
</div>
<div class="cell inline">
<header class="large white">Strasse</header>
<div
data-type="switch"
data-device="Licht_05_Strasse_struc"
data-states='["on","off"]'
data-set-states='["off","on"]'
data-colors='["white","white"]'
data-background-colors='["yellow","red"]'
class="large"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="inline">
            <div data-type="label" class="big bold">Bewässerung</div>
<div class="sheet">
<div class="row">
<div class="sheet">
<div class="cell inline">
<header class="large white">Rasen Kü</header>
<div data-template="00_ftui/x01_switch.html" data-parameter='{"par01":"RainSW_2_4"}'></div>
<div data-template="00_ftui/x02_label.html" data-parameter='{"par01":"target_2_4_min","par02":"Rain_2_4_counter"}'></div>
</div>
<div class="cell inline">
<header class="large white">Rasen Str</header>
<div data-template="00_ftui/x01_switch.html" data-parameter='{"par01":"RainSW_2_1"}'></div>
<div data-template="00_ftui/x02_label.html" data-parameter='{"par01":"target_2_1_min","par02":"Rain_2_1_counter"}'></div>
</div>
<div class="cell inline">
<header class="large white">Hecke</header>
<div data-template="00_ftui/x01_switch.html" data-parameter='{"par01":"RainSW_1_3"}'></div>
<div data-template="00_ftui/x02_label.html" data-parameter='{"par01":"target_1_3_min","par02":"Rain_1_3_counter"}'></div>
</div>
</div>
</div>
<div class="row">
<div class="sheet">
<div class="cell inline">
<header class="large white">Grenze</header>
<div>
<div data-template="00_ftui/x01_switch.html" data-parameter='{"par01":"RainSW_2_2"}'></div>
<div data-template="00_ftui/x02_label.html" data-parameter='{"par01":"target_2_2_min","par02":"Rain_2_2_counter"}'></div>
</div>
</div>
<div class="cell inline">
<header class="large white">Küche</header>
<div>
<div data-template="00_ftui/x01_switch.html" data-parameter='{"par01":"RainSW_2_3"}'></div>
<div data-template="00_ftui/x02_label.html" data-parameter='{"par01":"target_2_3_min","par02":"Rain_2_3_counter"}'></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="sheet">
<div class="cell inline">
<header class="large white">Teich</header>
<div>
<div data-template="00_ftui/x01_switch.html" data-parameter='{"par01":"RainSW_1_1"}'></div>
<div data-template="00_ftui/x02_label.html" data-parameter='{"par01":"target_1_1_min","par02":"Rain_1_1_counter"}'></div>
</div>
</div>
<div class="cell inline">
<header class="large white">WZ Einf</header>
<div>
<div data-template="00_ftui/x01_switch.html" data-parameter='{"par01":"RainSW_1_2"}'></div>
<div data-template="00_ftui/x02_label.html" data-parameter='{"par01":"target_1_2_min","par02":"Rain_1_2_counter"}'></div>
</div>
</div>
<div class="cell inline">
<header class="large white">Strasse</header>
<div>
<div data-template="00_ftui/x01_switch.html" data-parameter='{"par01":"RainSW_1_4"}'></div>
<div data-template="00_ftui/x02_label.html" data-parameter='{"par01":"target_1_4_min","par02":"Rain_1_4_counter"}'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
    </ul>
</div>
</body>
</html>

Switch.html
Code Auswählen
<div
data-type="switch"
data-device="par01"
data-set-on="on"
data-set-off="off"
data-states='["on","off"]'
data-icons='["fa-tint","fa-tint"]'
data-colors='["white", "white"]'
data-background-colors='["green", "red"]'
class="large center-align">
</div>

Label.html
Code Auswählen
<div
class="inline"
data-type="label"
data-device="Rain_Para"
data-get="par01"
data-pre-text="s: ">
</div>
<div
class="inline"
data-type="label"
data-device="par02"
data-get="pulseTimePerDayMin"
data-pre-text="/ i: ">
</div>

setstate

#1
07 März 2018, 09:23:38
2-3 sek sind doch gut.
Switch und Label werden als Modul geladen und dann alle Instanzen innerhalb des Moduls initiiert. Man kann also nicht die Ladezeit des Moduls mit der Anzahl der Widgets multiplizieren.   


Optimieren könnte man noch:
- Seiten von einem Webserver (z.B. Apache) ausliefern lassen.
- fhem-tablet-ui.min.js verwenden (aber "defer", "async" kann hier zu RaceContition Problemen führen)
- templates vermeiden.

Tsturm

#2
07 März 2018, 15:59:28
Grüß Dich,

Vielen Dank für Deine schnelle Reaktion!

Zeit -- addiert sich halt auf, der WAF sinkt schnell (insbesondere noch mit VPN on Demand, um die Garage per Iphone aufzumachen)

Die anderen Punkte probiere ich gerne aus. Zu Apache - macht der das tatsächlich schneller - hier muss doch nur das Index-File und ein paar unterstützende Dateien geliefert werden? Oder findet da noch eine Optimierung statt?

VG timmo

dt2510

#3
08 März 2018, 09:02:02
Zitat von: setstate am 07 März 2018, 09:23:38
Optimieren könnte man noch:
- Seiten von einem Webserver (z.B. Apache) ausliefern lassen.
- fhem-tablet-ui.min.js verwenden (aber "defer", "async" kann hier zu RaceContition Problemen führen)
- templates vermeiden.

Den Umbau auf einen Apache Server hab' ich noch vor mir - gibt es da irgendwo eine Anleitung für den Linux/Apache Neuling ?
Machen die Templates wirklich so viel aus ? Ich nutze die exzessiv (aktuell schon an die 100) und mir kommt es nicht großartig langsamer vor als ohne ...

setstate

#4
08 März 2018, 09:13:54
Da habe ich auch keine Erfahrung (nutze ich kaum), hatte es nur genannt, weil das zusätzliche Loops bedeutet.
Ich hatte gestern auch mal meine Seiten auf mein NAS mit nginx geschoben. Hatte auch keine signifikante Verbesserung beim Laden gebracht.

Habt ihr debug=0 gesetzt? Das mindert das Logging und aktiviert Caching.

Ulm32b

#6
08 März 2018, 09:36:17
Zitat von: setstate am 07 März 2018, 09:23:38
...
- fhem-tablet-ui.min.js verwenden (aber "defer", "async" kann hier zu RaceContition Problemen führen)
...

Wo liegt denn eigentlich der Unterschied zwischen den "min"- und den "Normal"-Varianten bei js und css?

setstate

#7
08 März 2018, 09:38:51
Bei .min* sind alle Leerzeichen und Zeilenumbrüche entfernt. Das spart Ladezeit durch kleinere Dateigrössen.

Ulm32b

#8
08 März 2018, 15:36:31
Aha. Danke für die Erklärung.

Unvermeidbar schließt sich nun die Frage nach der Quantifizierung des Effektes an. Vielleicht kann jemand, der das richtige Werkzeug zur Hand hat, einen kleinen Benchmark erstellen.
Und die Frage nach den angedeuteten Einschränkungen ("defer", "async" --> RaceCondition-Probleme).

Wenn die Probleme beherrschbar sind und das Ganze sich lohnt, könnte eine entsprechende Empfehlung ins Wiki.

Eisix

#9
08 März 2018, 15:58:52
Hallo,

habe seit heute eine zweite FHEMWEB Instanz aktiviert und darauf den Apache gehängt wegen CORS.
Subjektiv sehe ich jetzt erstmal keinen Geschwindigkeitsunterschied (mit Chrome). Muss aber noch alle meine Anzeigegeräte(Fully) testen.

Gruß
Eisix

Tsturm

#10
08 März 2018, 22:59:10
Moin zusammen,

- debug war auf 0
- Laut Google Chrome: fhem-tablet-ui.min.js bringt schon mal 75 ms oder mehr (von 110 auf 36 ms)
- die calls direkt in die index.html eingebaut - scheint etwas schneller zu gehen, aber der Text wird halt richtig lästig lesbar...

Durch die min version werden "min" module geladen, allerdings wird noch fhem-tablet-ui.css statt der min version geladen.

Morgen mehr..

VG timmo

setstate

#11
09 März 2018, 07:14:36 Letzte Bearbeitung: 09 März 2018, 08:25:30 von setstate
Was ich komisch finde, Seiten per HTTPSRV ausgeliefert, werden im Browser überhaupt nicht ge-cached.

Alles was über FHEMWEB kommt, klappt per Cache. Das ist sehr Ladezeit-relevant.

Kleiner Test:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <title>FHEM-Tablet-UI-mobil</title>
</head>
<body>


Das /fhem/pgm2/-File kommt beim Neuladen immer aus dem Cache, das andere nie.

Nachtrag:
Wenn ich den gesamten Tablet Ordner nach fhem/pgm2 kopiere und den Header entsprechend anpasse, kommen alle Files auch wie erwartet beim zweiten Refresh aus dem Cache. Da sieht nach einem Problem mit dem HTTPSRV aus.

Tsturm

#12
09 März 2018, 08:32:07
Wie bekommst du die Anzeige, ob das gecached wird? find es nicht in chrome (Network Performance tab)?

VG timmo

setstate

#13
09 März 2018, 08:58:17
Das ist die Anzeige im Safari. Chrome habe ich nicht, aber Network klingt schon in die Richtung.

Tsturm

#14
09 März 2018, 09:10:26
Ah, scheint ein spezielles feature von Safari zu sein, in chrome und IE hab ich das nicht gefunden... suche weiter.
Drucken
Nach oben Seiten1 2 Alle
Benutzer-Aktionen