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)
<!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
<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
<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>
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.
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
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 ...
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.
bei mir ist debug 0
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?
Bei .min* sind alle Leerzeichen und Zeilenumbrüche entfernt. Das spart Ladezeit durch kleinere Dateigrössen.
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.
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
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
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:
<!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.
Wie bekommst du die Anzeige, ob das gecached wird? find es nicht in chrome (Network Performance tab)?
VG timmo
Das ist die Anzeige im Safari. Chrome habe ich nicht, aber Network klingt schon in die Richtung.
Ah, scheint ein spezielles feature von Safari zu sein, in chrome und IE hab ich das nicht gefunden... suche weiter.
Im Firefox gibt es Netzwerkanalyse. Dort sieht man in der Spalte "Übertragen", ob xxKB oder "Aus Cache"
Laut Firefox werden alle Dateien geladen. "disable Cache" ändert die Ladezeiten nicht mal eine ms.
Die großen Zeitverbraucher sind die Stylesheets und die js scripts beim Laden, die sollten vom Caching sehr profitieren.
Vielleicht ist das Thema Caching tatsächlich der Schlüssel - irgendetwas schaltet das aus.
Da muss ich heute Abend zuhause weiter forschen, Kopfzeilen Anfragen/Antworten ansehen.
Hallo,
kann ich bestätigen. Ist bei mir auch so Apache ist cached, HTTPSRV + FTUISRV nicht.
Gruß
Eisix
update:
muss meine Aussage teilweise revidieren. Bei FTUISRV wird beim 3 load teilweise aus dem Cache geholt.
Gruß
Eisix
Ich habe mir den FHEMWEB Code angesehen. Wenn ein Request über HTTPSVR kommt, wird keine Anstalten gemacht den Browser-Cache zu unterstützen. $cacheable wird fest auf 0 gesetzt und über diesen Zweig wird kein ETag im Header mitgegeben.
Da müsste wirklich jemand am FHEMWEB optimieren ...
Bis dahin kann ich nur empfehlen, einen externen Web-Server (Apache, nginx) zum Ausliefern der FTUi Seiten zu benutzen oder die Files nach pgm2 kopieren. -> ./www/pgm2/tablet/
Im Header müsste dann der Verweis zum ftui-script angepasst werden:
<script src="../pgm2/tablet/js/fhem-tablet-ui.js" defer></script>
Der Aufruf der Startseite muss dann auch geändert werden:
http://fhem:8083/fhem/tablet/index.html
Die Ladezeiten meiner Seiten gingen damit von 3.8sek auf 2.2sek.
Das Umziehen des Tablet-Folders nach ./www/pgm2/tablet/ hat eine deutliche Verbesserung gebracht - Messung muss ich noch machen, aber der zweite Aufruf geht richtig flott - ganz ohne neuen Webserver... ;D
Thx!
Zwei aber...
- Chrome zeigt, dass nur fhem-tablet-ui.min.js und zuwei images gecached werden. Die CSS sheets etc laden immer noch (wenn auch gefühlt schneller)
- tablet-UI-Update nicht mehr glücklich, schreibt fröhlich alles in die alte location
Noch eine Änderung:
<script src="../pgm2/tablet/js/fhem-tablet-ui.min.js" defer></script>
hatte ich vorher auf "async" stehen, gefühlt hat das auch noch was gebracht.
Doch nochmals mit einem Webserver arbeiten...
Zitat von: Tsturm am 10 März 2018, 07:41:43
- tablet-UI-Update nicht mehr glücklich, schreibt fröhlich alles in die alte location
Das kannst du mit einem Link lösen.
Hallo zusammen,
weiß zwar nicht ob das hier ganz reinpasst, aber wenn ich statt:
<script src="js/fhem-tablet-ui.js" defer></script>
<script src="js/fhem-tablet-ui.min.js" defer></script>
benutze, werden z. B. Icons wieftui-window und ftui-thermo nicht mehr angezeigt.
Mikka
Hallo zusammen, habe das Thema mal in fhemweb aufgemacht, Rudis Anteort zum Thema ist mir noch nicht klar... geht in die Tiefen von tablet-ui...
https://forum.fhem.de/index.php/topic,85555.msg779481.html#msg779481
Quote:
Wenn ich den Link richtig verstehe, verwendet Tablet-UI HTTPSRV. Ich verstehe weder den Sinn von HTTPSRV (FHEMWEB kann doch beliebige Dateien ausliefern), noch warum Tablet-UI auf HTTPSRV besteht.
Btw. pgm2 muss es nicht sein, FHEMWEB liefert alles aus, was in www steht.
Viele Grüße timmo
Ja tatsächlich,
http://fhem:8083/fhem/tablet/index.html
funktioniert (inkl. Cache), mit der default Skript Definition
<script src="js/fhem-tablet-ui.js" defer></script>
kleiner Nachteil:
. man muss das File immer angeben, http://fhem:8083/fhem/tablet/ funktioniert nicht
- die Quicklinks aus dem FHEMWEB gibt es nur mit HTTPSRV
Am besten die HTTPSRV Definitionen löschen. Man bekommt sonst Vermischungen und es werden nur einige Files gecached.
Habe etwas Interessantes gefunden:
Ich habe eine weitere FHEMWEB Instanz für Tablet-UI mit Port 8087 aufgemacht - ohne HTTPS. Wenn ich diesen Port verwende, werden alle Dateien wunderbar gecached - und die Tablet-UI fliegt. Man muss sich natürlich in der richtigen FHEMWeb-Instanz befinden, damit Tablet-UI ohne HTTPS aufgerufen wird. Für den mobilen Zugang einfach die URL mit dem richtigen Port nutzen (ich gehe hier über VPN on Demand, so dass das sicher ist).
Internals:
CONNECTS 82
CSRFTOKEN csrf_323432897555053
DEF 8087 global
FD 14
NAME WEB_Tablet_UI
NR 204
NTFY_ORDER 50-WEB_Tablet_UI
PORT 8087
STATE Initialized
TYPE FHEMWEB
Attributes:
CORS 1
JavaScripts codemirror/fhem_codemirror.js
SVGcache 1
codemirrorParam { "lineWrapping":true }
confirmDelete 0
confirmJSError 0
iconPath fhemSVG:openautomation:default:icons_small
longpoll websocket
mainInputLength 80
room 9.0_System
Wenn man sich die Header der Seite über HTTPS im Dev-Board anschaut, sieht man, das beim https im ersten Aufruf die no-cache parameter gesetzt werden:
GET wss://192.168.178.2:8083/fhem/?XHR=1&inform=type=status;filter=WEB_Tablet_UI,Garage,Licht_01_Garten_struc,Kueche_Sw_LED,EG_Rolladen,Stereo_struc,Kaffee_plug,Licht_06_Haus_struc,Licht_02_Garage_struc,Licht_03_Mitte_struc,Licht_04_Deck_struc,Licht_05_Strasse_struc,RainSW_2_4,RainSW_2_1,RainSW_1_3,RainSW_2_2,RainSW_2_3,RainSW_1_1,RainSW_1_2,RainSW_1_4,Rain_Para,Rain_2_4_counter,Rain_2_1_counter,Rain_1_3_counter,Rain_2_2_counter,Rain_2_3_counter,Rain_1_1_counter,Rain_1_2_counter,Rain_1_4_counter,%20STATE%20longpoll%20target_2_4_min%20pulseTimePerDayMin%20target_2_1_min%20target_1_3_min%20target_2_2_min%20target_2_3_min%20target_1_1_min%20target_1_2_min%20target_1_4_min;since=1520767706411;fmt=JSON×tamp=1520767706515 HTTP/1.1
Host: 192.168.178.2:8083
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket
Origin: https://192.168.178.2:8083
Sec-WebSocket-Version: 13
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
DNT: 1
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,de-DE;q=0.8,de;q=0.7
Cookie: AuthToken=dGltbW86dGpoc25pZTIxIQ==
Sec-WebSocket-Key: pF2LqeTP/BP5iiJV/7q3Mg==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Mit dem Aufruf über port 8087 nichts mehr von Cachecontrol zu sehen.
Scheinbar ist die Behandlung von HTTPS-abfragen in FHEMWEB deutlich konservativer und fügt die No-Cache-Header ein. Drauf gekommen bin ich über diese Seite - wenn es auch nicht direkt damit zu tun hat:
http://securityevaluators.com/knowledge/case_studies/caching/
VG Timmo
Rudolf hatte noch eine Anmerkung.
https://forum.fhem.de/index.php/topic,85555.msg779952.html#msg779952
So langsam habe ich zwei Theorien, die gleichzeitg auftreten:
- Zitat Rudolf:
"FHEMWEB Plugins (wie HTTPSRV, FLOORPLAN, etc) muessen auf Caching verzichten, es sei denn, sie implementieren die komplette Rueckgabe samt Header. Soweit ich sehe, macht HTTPSRV das nicht, insofern sind HTTPSRV Daten (aktuell) nicht cachebar."
Ergebnis - Aufruf aus der FHEMWEB-Oberfläche via HTTPSRV hat kein Caching
Ungültiges HTTPS-Zertifikat (da kein öffentliches) führt dazu, das Chrome (und evtl andere Browser) das einfach nicht cachen.
Abhilfe - direkter Aufruf des Links ohne HTTPSRV, und ohne HTTPS über eigene HTTPWEB-Instanz (die man ja zur Sicherheit auch noch weiter einschränken kann). Das scheint konsistent mit dem oben genannten Verhalten zu sein.
VG Timmo
-