Es ist schwierig, Annahmen in Bezug auf die langsame Leistung und die Umleitung Thema zu machen. Im Folgenden finden Sie einige Aspekte, die meiner Meinung nach die Leistung 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
Wenn kleine mobile Anwendungen die Verwendung einer einzigen HTML-Seite mit interner AJAX Seite Verknüpfung empfohlen entwickelt. 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 standardmäßig im jQM 1.1.1 Docs, angegeben, sind alle Übergänge außer verblassen erfordern 3D-Unterstützung verwandeln. 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.
Minify 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 eine Menge Werkzeuge auf der WEB wie die 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. Sie können viele CSS-Optimierer im WEB finden, wie CleanCSS und CSSTidy.
Komponenten begrenzt
Die HTML-Seiten werden empfohlen, 25kb, um den optimalen Caching Vorteil für die Mehrheit des mobilen Web-Browser zu gewinnen zu beschränken. Das Caching-Limit hängt von der Betriebssystemversion ab. Zum Beispiel hat Android 2.1 eine Caching-Grenze von ungefähr 2 MB.
HTML5 & CSS3
Versuchen leicht zu erstellen, um zu lesen, zu erweitern und wieder verwendbarer Code. 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 Web-Browser über welche Version von HTML der Seite in geschrieben.
Verwenden Sie die W3C mobileOK Checker
Die W3C mobileOK Checker ist ein kostenloser Service von W3C, die das Niveau der mobilen Freundlichkeit von Web hilft überprüfen Dokumente und insbesondere feststellen, ob ein Webdokument mobileOK ist. Eine Webseite ist mobileOK, wenn sie alle Tests besteht. Die Tests sind im mobileOK Basic Tests 1.0 specification definiert. Um zu verstehen, warum es wirklich wichtig ist, ein Webdokument auf Mobilfreundlichkeit zu überprüfen, lohnt es sich, einige Punkte über die sogenannte mobile Welt zu erwähnen. 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.
Betrachten Sie das Aussehen auf verschiedenen Bildschirm
Die Bildschirme Dichte und die Darstellungsgröße und Umfang der Webseite sollte berücksichtigt werden, wenn unterschiedliche Bildschirmgrößen Größen Targeting. 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 Ströme mit potentiellen Verzögerung
Die PageSpeed Firefox/Chrome extension können die Seiten schneller überprüfen verwendet werden. 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 umsetzen und in den Entwicklungsprozess einbinden können.
Ich hoffe, das hilft.
Welche Version von jQuery Mobile? Welche Version von PhoneGap? Was haben Sie bisher unternommen, um eine Lösung zu finden? Kannst du etwas Code anzeigen, zum Beispiel die Reihenfolge der JS Includes? – Jasper