ST2.3 App mit Sencha Architect verbessern

Question

Ich versuche, die Leistung meiner Sencha Touch 2.3 Anwendung zu verbessern. Ich habe die Anwendung mit Sencha Architect 3 erstellt. Jetzt lese ich ein paar Posts über die Verbesserung der App-Performance, indem ich nicht alle Standard-Senchass-Klassen einschließe (siehe https://www.sencha.com/blog/4-tricks-for-smaller-css-in-touch-22/). Ich möchte diese Methode auch auf meine Bewerbung anwenden (andere Vorschläge würden ebenfalls dankbar berücksichtigt). Wenn ich Sencha architect zum Kompilieren/Erstellen meiner App verwende, wird die Datei app.scss jedoch nicht verwendet, da in Sencha Architect die Optionen für die Thematisierung verwendet werden (siehe Sencha Architect 3 does not use app.css). Gibt es eine andere Möglichkeit, nicht alle Standard-CSS-Dateien aufzunehmen?

Verwendung:

• Sencha Architect Version: 3.0.2.1375
• Sencha cmd: 4.0.2.67 Rahmen:
• Sencha Touch 2.3.x

Mit freundlichen Grüßen

Answer 1

Ich habe Sencha Architect nicht benutzt, aber eine frühere Version von Sencha für eine Phonegap-App benutzt, vielleicht ein paar davon Ionen gelten.

Sie können die Registerkarte "Chrome Audits" verwenden, um nicht verwendete CSS zu finden und zu entfernen. Es gibt auch viele weitere Vorschläge, wie Sie Ihren Code verbessern können.

paar Vorschläge: ref

1. Nutzung weit Zukunft Cache Ablauf-Header. Dies verhindert, dass der Browser eine bedingte GET-Anfrage senden muss.
2. Versuchen Sie, HTML-Seiten auf 25,6 KB oder weniger zu beschränken, wenn sie zwischengespeichert werden sollen, da die vorherigen Tests gezeigt haben, dass dieses Limit von iOS 3.2 auf dem iPad die niedrigste HTML-Ressourcengrenze der getesteten Geräte ist.
3. Behalten Sie CSS- und JS-Komponenten unter 1 MB. Natürlich ist 1MB enorm und Ihre Komponenten sollten viel kleiner sein, aber Sie sollten sich nicht darum kümmern, eine Komponente in separate Anfragen aufzuspalten, um Cache-Fähigkeit zu erreichen, es sei denn, ihre Größe nähert sich 1MB.
4. Erwägen Sie, den HTML5-Anwendungscache zu verwenden, wenn es wichtig ist, dass Ihre Komponenten lange Zeit im Cache verbleiben oder während des Neustarts.

Vergessen Sie auch nicht die grundlegenden Dinge wie Bilder drehen svg zu reduzieren auf Anfragen Inline gemacht & die Javascript enthält zum unteren Rand der Seite zu bewegen.

Wenn Sie Animationen machen, verwenden Sie CSS Transformationen. Dies nutzt die GPU anstelle der 2D-Transformationen. zB: translate3d()

Hoffe das hilft, viel Glück!

Answer 2

Ich benutze auch Architekt 3 für meine App, und erstens ist die Leistung sehr schlecht. Aber jetzt ist es meistens normal.Einige Hinweise:

1) Sie css Schatten nicht

2)

Verwenden Sie keine DOM-Struktur

3) Verwenden Sie bauen in Navigationsleiste (push, pop Methoden)

4 vergrößern) wenn Sie große Listen in Ihrer App haben:

• zeigen 3-5 von ihnen, andere autodestroy, verwenden faul Last für sie
• oder Liste Paging-p verwenden Lugin
• read about infinite lists

5) für immer zerstören nicht verwendet Platten!

Für Build verwenden i cordova und CLI:

~/ sencha cordova init 
~/ sencha app build native 

Ohne cordova app Größe ~ 5-6MB. Mit Cordova bauen ~ 1-1.2mb. Auch Cordova haben gute native funktionelle Brücke.

Read über Thematisierung in sencha Architekt 3.

---

Sory für mein schlechtes Englisch.