Ich habe eine Anwendung erstellt, die mehrere Schaltflächen enthält, um auf eine der Schaltflächen zu klicken, die meine Anwendung zu einer Ansicht umleitet, die JQM-Formular, JQM-Kalender, Textfeld, Schaltflächen und Datenbank usw. enthält.
Meine Frage ist, dass, wenn ich meine Anwendung in Android-Gerät zu dieser Zeit testen Anwendung ein wenig langsam arbeitet, auch wenn ich keine Bilder verwendet habe, oder irgendwelche Daten, die mehr Platz enthalten können. Das ist meine erste Abfrage und die zweite ist, dass, wenn ich meine Anwendung auf Android Tablet zu dieser Zeit getestet hat, diese Formularseite für eine Weile erscheint und plötzlich automatisch auf die Startseite umgeleitet wird, während die gleiche Funktion gut für Android-Handy funktioniert.
Warum dieses seltsame Problem?
Wenn jemand mich darauf hinweisen kann, dass es mir ein Vergnügen sein wird
Es ist schwierig, Annahmen bezüglich der langsamen Leistung und des Umleitungsproblems zu machen. Im Folgenden finden Sie einige Aspekte, die meiner Meinung nach die Performance einer mobilen Anwendung beeinflussen, die aus HTML5, CSS3, JavaScript besteht und in der Analyse, dem Design und der Entwicklungsphase berücksichtigt werden sollte.
Implementierungsmethode basierend auf der Größe
Bei der Entwicklung kleiner mobiler Anwendungen wird die Verwendung einer einzelnen HTML-Seite mit interner AJAX-Seitenverknüpfung empfohlen. Für größere mobile Anwendungen wird empfohlen, verschiedene HTML-Seiten mit interner AJAX-Verknüpfung zu verwenden. Versuchen Sie, wiederverwendbare Seitenvorlagen zu erstellen.
Seitenübergänge
Wie in den jQM 1.1.1-Dokumenten angegeben, wird standardmäßig Alle Übergänge außer Fade erfordern 3D-Transformationsunterstützung. Geräte ohne 3D-Unterstützung werden unabhängig vom angegebenen Übergang auf einen Überblendungsübergang zurückgesetzt. jQM tut dies, um schlecht funktionierende Plattformen wie Android 2.x proaktiv von fortgeschrittenen Übergängen auszuschließen und sicherzustellen, dass sie weiterhin reibungslos funktionieren. Beachten Sie, dass es Plattformen wie Android 3.0 gibt, die 3D-Transformationen technisch unterstützen, aber immer noch eine schlechte Animationsleistung haben, so dass dies nicht garantiert, dass jeder Browser 100% flimmerfrei ist. Entscheiden Sie den Übergangstyp, den Sie verwenden werden, nachdem Sie die obigen Punkte berücksichtigt haben.
Minimieren Sie JS- und CSS-Dateien
Jede Seite sollte so leicht wie möglich sein. Das Ziel der Minification besteht darin, die Betriebseigenschaften des Codes zu bewahren und gleichzeitig den gesamten Byte-Footprint zu reduzieren. Es gibt viele Tools auf der WEB wie der YUI Compressor , die Minify und viele mehr. Darüber hinaus gibt es Tools wie die JLint , mit der überprüft wird, ob der JavaScript-Quellcode den Codierungsregeln entspricht. JLint ist ein Code-Qualitätstool, das auf Probleme im JavaScript-Code prüft. Die gemeldeten Probleme sind nicht unbedingt Syntaxfehler, sondern können strukturelle Probleme sein. Beachten Sie, dass JLint nicht beweist, dass Ihr Code korrekt ist. Betrachten Sie es als hilfreiches Werkzeug. Außerdem gibt es Werkzeuge zur CSS-Optimierung. Die Optimierung hilft Ihnen, kleinere CSS-Dateigrößen und besser geschriebenen Code zu erhalten. Im Web finden Sie viele CSS-Optimierer wie CleanCSS und CSSTidy .
Komponentenlimits
Es wird empfohlen, die HTML-Seiten auf 25 KByte zu beschränken, um den optimalen Caching-Vorteil für die meisten mobilen Webbrowser zu erzielen. Das Caching-Limit hängt von der Betriebssystemversion ab. Zum Beispiel hat Android 2.1 eine Caching-Grenze von ungefähr 2 MB.
HTML5 & amp; CSS3
Versuchen Sie, einfach zu lesenden, zu erweiternden und wiederverwendbaren Code zu erstellen. Es ist wichtig, die Vorteile von HTML5 und CSS3 voll auszunutzen. Die HTML5-DocType-Deklaration ( <!DOCTYPE html> ) sollte die erste Sache in Ihrem HTML5-Dokument vor dem HTML-Tag sein. Es ist eine Anweisung an den Webbrowser, über welche Version von HTML die Seite geschrieben wird.
Verwenden Sie den W3C mobileOK Checker
Der W3C mobileOK Checker ist ein kostenloser Service von W3C, der hilft, das Niveau der mobilen Freundlichkeit von Webdokumenten zu überprüfen insbesondere feststellen, ob ein Webdokument mobileOK ist. Eine Webseite ist mobileOK, wenn sie alle Tests besteht. Die Tests sind in der Spezifikation mobileOK Basic Tests 1.0 definiert. Um zu verstehen, warum es wirklich wichtig ist, ein Webdokument auf Mobilfreundlichkeit zu prüfen, sollten einige Punkte über die sogenannte mobile Welt hervorgehoben werden. Im Vergleich zu einem normalen Desktop-Computer kann ein mobiles Gerät auf den ersten Blick als begrenzt angesehen werden: kleinere Bildschirmgröße, geringere Verarbeitungsleistung, geringere Speicherkapazität, keine Maus und so weiter. Im Vergleich zu festen Datenverbindungen können mobile Netzwerke langsam sein und oft eine höhere Latenz haben. Verglichen mit einem Benutzer, der vor seinem Computer sitzt, hat der Benutzer unterwegs nur eine begrenzte Zeit und kann leicht abgelenkt werden. Zusätzlich zu diesen Einschränkungen ist die mobile Welt stark fragmentiert: viele verschiedene Geräte, von denen jedes einen einzigartigen Satz unterstützter Funktionen definiert.
Berücksichtigen Sie das Aussehen auf verschiedenen Bildschirmgrößen
Bei der Ausrichtung auf verschiedene Bildschirmgrößen sollten die Bildschirmdichte und die Größe des Ansichtsfensters sowie die Größe der Webseite berücksichtigt werden. Die Ansichtsfenstermetadaten können verwendet werden, um die Ansichtsfenstergröße zu definieren, wobei das Ansichtsfenster der Containerbereich ist, in dem die Seite gezeichnet wird.Die Ansichtsfensterskalierung definiert die Zoomstufe, die auf die Webseite angewendet wird. Mit der Viewport-Eigenschaft target-densitydpi und CSS- und JS-Techniken kann die Zielbildschirmdichte für die Webseite geändert werden. Es gibt viele Artikel im Internet über das Aussehen auf verschiedenen Bildschirmgrößen.
Identifizieren Sie die Flüsse mit möglicher Verzögerung
Die PageSpeed Firefox / Chrome-Erweiterung kann verwendet werden, um die Geschwindigkeit der Seiten zu überprüfen. Wenn Sie eine Webseite mit Seitengeschwindigkeit profilieren, wird die Übereinstimmung der Seite mit einer Reihe verschiedener Regeln bewertet. Diese Regeln sind allgemeine Front-End-Best Practices, die Sie in jeder Phase der Webentwicklung anwenden können. Die Erweiterung gibt konkrete Tipps und Vorschläge, wie Sie die Regeln am besten implementieren und in den Entwicklungsprozess einbinden können.
Ich hoffe, das hilft.
Tags und Links android cordova jquery jquery-plugins jquery-mobile