Geek Answers Handbook

Improve ST2.3 Application Performance with Sencha Architect

I am trying to improve the performance of a Sencha Touch 2.3 application. I created the application using Sencha Architect 3. Now I read some posts about improving application performance, not including all sencha css classes by default (see https://www.sencha.com/blog/4-tricks-for-smaller- css-in-touch-22 / ). I would like to apply this method to my application (other suggestions would also be greatly appreciated). However, using Sencha architect to compile / build my application, the app.scss file is not used due to the options in Sencha Architect (see Sencha Architect 3 does not use app.css ). Is there any other way not to include all css files by default?

Using:

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

Yours faithfully

+6
source share
2 answers

I did not use Sencha Architect, but used an earlier version of Sencha for the phonegap application, perhaps some of the same considerations apply.

You can use the Chrome Audites tab to find unused css and delete them. It also gives a lot more suggestions on how to improve the code.

enter image description here

A few suggestions: ref

  • Use future expiration headers. This will prevent the browser from sending a conditional GET request.
  • Try limiting HTML pages to 25.6KB or less if you want them to be cached, as previous tests showed that this limitation, imposed by iOS 3.2 on the iPad, was the lowest HTML resource limit for devices under test.
  • Keep CSS and JS components under 1 MB. Of course, 1MB is huge, and your components should be much smaller than this, but do not bother splitting the component into separate requests for the convenience of caching, if its size does not approach 1 MB.
  • Consider using the HTML5 application cache if it is important that your components are cached for a long time or in power cycles.

Also do not forget that the main material, for example, turning images into embedded svg to reduce requests and move Javascript, includes the bottom of the page.

If you are doing an animation, use css 3d transforms. This uses a GPU, not a 2d conversion. for example: translate3d()

Hope this helps, good luck!

+5
source

I also use architecture 3 for my application, and, firstly, the performance is very poor. But now this is basically normal. Some advise:

1) Do not use shadow css

2) Do not increase the structure of the DOM

3) Use the built-in navigation bar (push, pop)

4) If your application has large lists:

5) Permanently destroy unused panels!

For assembly I use cordova and CLI:

 ~/ sencha cordova init ~/ sencha app build native

Without cordons, the application size is ~ 5-6 mb. With a cord line ~ 1-1.2 mb. In addition, Cordoba has a good native functional bridge.

Read about topics in sencha architect 3.

Litter for my bad english.

+1
source

More articles:


All Articles