Few questions about framework 7 performance

I know native language performance is better than hybrid applications like javascript, and I wonder whether we can decrease that gap

  • I have been told that f7vue components are created after render, is that causes performance or any other issues ?

  • It is possible to dynamically create some of the components (maybe all of them), I wonder if it increases performance over hardcoded in the html component ?
    For example Instead of defining a action sheet in html, if I create from code and send html content is a more good approach ? Since it will be created only when its needed, otherwise I understand its already created but show up when we call it.

  • Instead of Dom7 if I use native html for dom manipulation,does it make results any performance difference ?

  • If there is cordova plugins for some feature which also exist in framework 7, does it increase performance over native f7 component ?

Not really an expert in Appor Vue dev, but I would think the major consideration should be render time and not compile time.

New Javascript engines like Chrome V8 (Android) and Apple Nitro (iOS) compile javascript pretty efficiently.

On the other hand, if you have many 3d transform elements and many different complex shadows and effects on a single page, the experience would be very bad compared

1 Like

Most likely no, but you should take care to avoid repaints & reflows, you can learn more here.

@st643, I see its a detailed issue.

@plague69 So you say render time is important over compile, I am confused, we dont have a compile in javascript, what you mean ?

You are semi right.

JavaScript does not need to be precompiled but is compiled into machine code at runtime. That’s what allows it to be omni platform and traditionally meant that it had an extra layer of complexity for the machine meaning worse performance vs native compiled apps (eg. C++)

In our apps there are 2 parts: Thinking and Showing. I would suggest that in most cases, showing is the part that is most resource intensive and have a bigger impact than the thinking part.

Google js repaint and js redraw to find out more

1 Like

Thanks plague69, I have started to look at pages about render and redraw, but in order to fully understand the issue, one needs to know also internal working mechanism of framework 7, which is not very easy

Can we say thinking part is javascript and showing part html ?
https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

In above page I found this information about DOM render tree,

if you’re hiding a div with display: none, it won’t be represented in the render tree.

so when I define a popup, a modal/action sheet in html side of a component, it is hidden by default until I open it ?

and it also means it wont affect performance until I show it by clicking some menu/button ?

This is one of the questions I have asked, whether pre defining something in html or creating it in the code affects performance ?

Another question
@plague69, On the other side Since I am new to area I wonder what Chrome V8 anroid means for hybrid application with f7 ? Is that used for android phone hybrıd apps ? or it means chrome browser in android phone ?
How can I know my mobile chrome version for hybrid applications?

New Javascript engines like Chrome V8 (Android) and Apple Nitro (iOS) compile javascript pretty efficiently

1 Like

What I’ve noticed after using F7 after a while (and testing a LOT of other frameworks):

On iOS, most users can’t tell the difference between native. Animations are fluid, everything works as it should.

On Android, is slow as hell (as any HTML on Android… it’s not F7 fault… Chrome just don’t run well enough, even for normal websites). You have to consider bloated devices as well: my device (Asus ZenFone Selfie) is unbearable. A Samsung Galaxy S7 is bad, but a Moto G5 S Plus runs fine (not so fine as iPhone).

The only option near as performant as F7 is Quasar, but they lack animations and some smart components (like the Smart Select) (and perhaps that’s the reason why it appears faster).

Another thing I’ve noticed on iOS devices is that they don’t really like tables =P Use tables and all performance goes to the drain >.< Also, pages filled with too much information, specially photos, tends to make an iOS 4 bend its knees… So, keep it simple (as it should be) and you’re just fine.

I also develop some native thing in Xamarin (it’s really native, not that hybrid React Native thing) and there are a lot of things that are slow as well… so, native is not a magical thing that will make a bad app turn into good.

2 Likes

Thanks j.c. I have noticed that vue + f7 v2 obviously run slower than angular 1 + f7 v1 on Android device (havent tested on any IOS device yet, less smooth and slow animations, pushin buttons produces big splash effect which is not exist in v1 one ?

Similar application and faster one is much muhc more code than the new one

I do not know the reason for this but somehow v1 runs lot faster, maybe angular is more suitable for those kind of applications.

There isnt a one sure answer to it as it depends on the multiple factors.

and for the question - * Instead of Dom7 if I use native html for dom manipulation,does it make results any performance difference ?

Maybe no but make sure to avoid repaints.

Team Windzoon