Better performance? 200+ individual result pages or 200+ conditions (if else ladder or switch case?) in a single go in Javascript/Jquery Mobile

Question

I am building a local/static mobile app using jquery mobile+phonegap. Since I want to be least dependent on getting server side, I thought to go for placing the resultant files (at least 200+ same looking pages with individual table results). For a second thought, that would certainly increase the app's size. So I came to a conclusion on having a single resultant page with conditional results. Problem is, there are approx. 200+ results.

Hence, I'm a little confused which way to go. If a conditional statement has to be chosen, which one to go with for a better performance as I certainly might be increasing the result loading of the app, in this case,

the if else ladder,

like

if(someVar==1)
  <//Display so and so variable and image values at placeholders and header on result.html>;

else if(someVar==2)
  <//Display so and so variable and image values at placeholders and header on result.html>;

else if(someVar==3)
  <//Display so and so variable and image values at placeholders and header on result.html>;
.
.
.
.
else if(someVar==200)
  <//Display so and so variable and image values at placeholders and header on result.html>;

or - the switch case?

like

switch(someVar){
  case 1: <//Display so and so variable and image values at placeholders and header on result.html>;
          break; 
  case 2: <//Display so and so variable and image values at placeholders and header on result.html>;
    break;
  case 3: <//Display so and so variable and image values at placeholders and header on result.html>;
    break;
  .
  .
  .
  case 200: <//Display so and so variable and image values at placeholders and header on result.html>;
    break;

}

or even containing different result pages like result1.html, result2.html, result3.html.

Whatever could give better performance as a locally stored smartphone app (either of the 3)

If-else and switch will probably give you similar app size and performance. Is it not possible to generate pages dynamically on the client, rather than providong 200 pages hardcoded? — frequent, Oct 26 '13 at 07:47
@frequent Thanks for the suggestion. Being a newbie to this field, I find myself at a little lack of knowledge. Can you guide me to a good tutorial on the same please? — Learner Always, Oct 26 '13 at 07:56

Ryan · Accepted Answer · 2013-10-26T08:26:09.730

1

If I understand your question correctly, you are trying to decide between an else/if ladder and a switch statement. The switch statement will be less cpu intensive and your all around best option between the two. The code will make a small handful of comparisons with a switch statement versus 100 comparisons on average if you use an if/else ladder.

switch(someVar){
  case 1:
    <handle case 1>
    break;
  case 2:
    <handle case 2>
    break;
  case 3:
    <handle case 3>
    break;
  .
  .
  .
}

This will probably result in far less comparisons being made and hopefully handling multiple cases at once. And also prevents you from accidentally catching a case you didn't intend to catch.

edited Oct 26 '13 at 08:26

answered Oct 26 '13 at 07:07

Ryan

106
4

1

I have edited the question to make my point clear, if that helps. I am concerned about performance and app size. Something that brings out the balance between size and performance – Learner Always Oct 26 '13 at 07:57
I have edited my answer. I think you will want to use the switch statement to reduce cpu cycles required. – Ryan Oct 26 '13 at 08:27
Thanks a lot for the help. I'm also looking forward to dynamic page injection/creation on the client side using jQuery Mobile, as is suggested by @frequent in a comment above in my question. Figuring out which will be a better way to render the things I intend – Learner Always Oct 26 '13 at 08:39
You're welcome. Sounds like an interesting project. If my answer solved your question please mark it as answered. (I am trying to increase my reputation on this forum. Thank you in advance.) – Ryan Oct 26 '13 at 10:10
done. And thanks. btw even I'm trying for the same so if you could give a vote up, would be grateful. If no,t no hard feelings :) – Learner Always Oct 26 '13 at 10:20

score 1 · Answer 2 · answered Oct 26 '13 at 08:35

1

You can of course also save all your data into an Array or an object and then retrieve individual elements via

dipslayData(data[somevar])

with a suitable displayDatafunction. This might be more efficient or readable than the switch. It might also be more readable than the switch, because you can separate the behaviour of what you do with your "variables" and where you define them.

In the end, though, you should make performance comparisons out of thin air. First, you should know that you really need the performance. Secondly, you should profile, i.e. measure how long the parts of your program take. Based on this, you can optimize your hottest, most optimization-worthy functions. Some web browsers such as Google Chrome have built in profiling tools.

And profiling is awesome and fun :)

answered Oct 26 '13 at 08:35

distributed

366
4
13

Useful suggestion and knowledge. Can you guide me to an example usage/tutorial regarding its usage please? – Learner Always Oct 26 '13 at 08:49
1

There's a question here on SO: [link](http://stackoverflow.com/questions/855126/what-is-the-best-way-to-profile-javascript-execution) and here's an example of how to do it in Chrome [link](https://developers.google.com/chrome-developer-tools/docs/cpu-profiling). This is useful knowledge that carries over to other programming environments as well. – distributed Oct 26 '13 at 14:18
Thanks a lot. That really helped a lot. Didnt have any idea towards this. Thanks again – Learner Always Oct 26 '13 at 16:33

Better performance? 200+ individual result pages or 200+ conditions (if else ladder or switch case?) in a single go in Javascript/Jquery Mobile

2 Answers2