Software Archive
Read-only legacy content
17061 Discussions

HTML5-App run too slow on android phone

Davide_G_1
Beginner
445 Views

Hi, i'm davide, i created my first app using Intel XDK. It's a calculator written using HTML, CSS, JAVASCRIPT.
When it run on browser (even the phone browser) run normally fast, but after the installation of the builded app the same run very slow, with a lag between the pressure of the key and the execution of the code correlated to the key about 1-2 seconds.
I use Intel XDK to build this app, using Windows and Linux Mint (both of them) but the app it's very slow in both of cases.

I don't understand why. Can you help me? (my phone it's a zenfone 2 ze500cl)

<HTML>
	<HEAD>
		<LINK href="calc.css" rel="stylesheet" type="text/css">
		<TITLE>CALCOLATRICE</TITLE>
		<SCRIPT src="calc.js" type="text/javascript"></SCRIPT>
	</HEAD>
	<BODY onload="canc()">
		<DIV id="num">
		</DIV>
		<TABLE>
			<TR>
				<TD>
					<BUTTON class="numeri" onclick="num('1')">
						1
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="numeri" onclick="num('2')">
						2
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="numeri" onclick="num('3')">
						3
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="oppa" onclick="oper('piu')">
						+
					</BUTTON>
				</TD>
			</TR>
			<TR>
				<TD>
					<BUTTON class="numeri" onclick="num('4')">
						4
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="numeri" onclick="num('5')">
						5
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="numeri" onclick="num('6')">
						6
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="oppa" onclick="oper('men')">
						-
					</BUTTON>
				</TD>
			</TR>
			<TR>
				<TD>
					<BUTTON class="numeri" onclick="num('7')">
						7
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="numeri" onclick="num('8')">
						8
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="numeri" onclick="num('9')">
						9
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="oppa" onclick="oper('per')">
						X
					</BUTTON>
				</TD>
			</TR>
			<TR>
				<TD>
					<BUTTON class="numeri" onclick="num('0')">
						0
					</BUTTON>
				<TD>
					<BUTTON class="oppa" onclick="radice()">
						&#8730;&#175;
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="oppa" onclick="quadrato()">
						<DIV id="quadrato">
						X<sup>2</sup>
						</DIV>
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="oppa" onclick="oper('div')">
						&#247;
					</BUTTON>
				</TD>
			</TR>
			<TR>
				<TD>
					<BUTTON class="oppa" onclick="canc()">
						C
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="oppa" onclick="puntof()">
						.
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="oppa" onclick="uguale()">
						=
					</BUTTON>
				</TD>
				<TD>
					<BUTTON class="oppa" onclick="cambiosegno()">
						&#177;
					</BUTTON>
				</TD>
			</TR>
		</TABLE>
	</BODY>
</HTML>
body{
	background: linear-gradient(40deg,#03082B,#3545BC,#03082B,#3545BC,#03082B,#3545BC,#03082B,#3545BC,#03082B,#3545BC,#03082B,#3545BC,#03082B,#3545BC);
}
#quadrato{
	font-size:60;
}
#num{
	height: 14%;
	width: 96%;
	font-size: 80;
	text-align: right;
	background: white;
	border: black 10px solid;
	border-radius: 18px;
	box-shadow: 0 0 15px rgba(255,255,255,1);
	padding: 18px 20px 0px 0px;
	margin: 10px auto 5px auto;
}
table{
	height: 80%;
	width: 100%;
	border-spacing: 8px;
	border-collapse: separate;
}
td{
	width: 25%;
	text-align: center;
	font-family: arial;
}
.numeri{
	background: linear-gradient(2deg, #34450F , #1E2807 , #34450F);
	color:#CDE0AF;
	font-weight: bold;
	text-shadow: 5px 5px 8px black;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	line-height: 70px;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.8);
	font-size:90;
}
.numeri:active {
	position: relative;
	top: 5px;
	left: 5px;
	background: linear-gradient(2deg,#E5F7C0,#C3DC8B,#E5F7C0);
	text-shadow: 0 0 9px #EDECAD;
	color: white;
}
.oppa{
	background: linear-gradient(2deg, #393321 , #13120E , #393321);
	color:#CDE0AF;
	font-weight: bold;
	text-shadow: 5px 5px 8px black;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	line-height: 70px;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.8);
	font-size:90;
}
.oppa:active {
	position: relative;
	top: 5px;
	left: 5px;
	background: linear-gradient(2deg,#5F4E1E,#634E10,#5F4E1E);
	text-shadow: 0 0 9px #EDECAD;
	color: white;
}
var accum=0.0;
var operat="piu";
var prim=0;
var contanumero=0;
var pun=0;
var punto=0;
var risultato=0;
var ugua=0;
function cancella(){
	if(prim==1){
		document.getElementById("num").innerHTML="";
		prim=0;
		risultato=0;
	}
}
function radice(){
	if(prim==0){
		var mm=Math.sqrt(document.getElementById("num").innerHTML);
		mm=Math.round(mm*1000000000)/1000000000;
		document.getElementById("num").innerHTML=mm;
	}
}
function quadrato(){
	if(prim==0){
		var mm=(document.getElementById("num").innerHTML)*(document.getElementById("num").innerHTML);
		mm=Math.round(mm*1000000000)/1000000000;
		document.getElementById("num").innerHTML=mm;
	}
}
function cambiosegno(){
	if((prim==0)&&(document.getElementById("num").innerHTML!="")&&(ugua==0)){
		if(document.getElementById("num").innerHTML[0]!="-"){
			document.getElementById("num").innerHTML="-"+document.getElementById("num").innerHTML;
		}else{
			document.getElementById("num").innerHTML=document.getElementById("num").innerHTML.replace("-","");		
		}
	}
}
function num(numero){
	if(ugua==1){
		canc();
	}
	if(document.getElementById("num").innerHTML=="0"){
		document.getElementById("num").innerHTML=numero;
	}else{
		cancella();
		document.getElementById("num").innerHTML+=numero;
		contanumero=1;
	}
}
function puntof(){
	if(punto==0){
		if(risultato==0){
			if(document.getElementById("num").innerHTML==""){
				document.getElementById("num").innerHTML="0.";
				punto=1;
			}else{
				document.getElementById("num").innerHTML+=".";
				punto=1;
			}
		}
	}
}
function canc(){
	document.getElementById("num").innerHTML="";
	accum=0.0;
	operat="piu";
	prim=0;
	contanumero=0;
	pun=0;
	punto=0;
	risultato=0;
	ugua=0;
}
function uguale(){
	if(risultato==0){
		operazioni();
		risultato=1;
		ugua=1;
	}
}
function operazioni(){
	var a;
	if(document.getElementById("num").innerHTML==""){
		a=0.0;
	}else{
		a=Math.round(parseFloat(document.getElementById("num").innerHTML)*1000000000)/1000000000;
	}
	if(operat=="piu"){
		accum=accum+a;
		punto=0;
	}
	if(operat=="men"){
		accum=accum-a;
		punto=0;
	}
	if(operat=="per"){
		accum=accum*a;
		punto=0;
	}
	if(operat=="div"){
		accum=accum/a;
		punto=0;
	}
	document.getElementById("num").innerHTML = Math.round(accum*1000000000)/1000000000;
}
function oper(op){
	ugua=0;
	if(risultato==1){
		prim=1;
		operat=op;
	}else{
		if(contanumero==1){
			if(prim==1){
				operat=op;
			}else{
				prim=1;
				operazioni();
				risultato=1;
				operat=op;
			}
		}
	}
}

 

0 Kudos
9 Replies
Roman_S_6
Beginner
445 Views

Try use Framework7, I think it allows you to create the fastest interface. Using jQuery - the phone can be a delay in the response of up to 300 ms

0 Kudos
Davide_G_1
Beginner
445 Views

Thank you. Where i can find the selection of Framework? I don't find it.

0 Kudos
Roman_S_6
Beginner
445 Views

When you create a project, select "Use App Designer", you can view the code by framework7

0 Kudos
Davide_G_1
Beginner
445 Views

It still slow...
But i'm not used the graphical mode, i still used HTML source code.
I develop this app for my students, i would to show them that they can to build app for telephone using HTML code.
 

0 Kudos
PaulF_IntelCorp
Employee
445 Views

Try eliminating all those background:linear-gradient CSS rules and make sure you are building with Crosswalk (check the "optimize with Crosswalk" option). Those gradients require a lot of processing power and most phones do not do well with them.

0 Kudos
Davide_G_1
Beginner
445 Views

I eliminated all linear-gradient, text-shadow box-shadow etc but it's too slow again!!
:-(
 

0 Kudos
Davide_G_1
Beginner
445 Views

i found the problem:

it's this javascript command:

function num(numero){
		document.getElementById("num").innerHTML=numero;
}

i loaded only this command and erase the other, wen i call num function the app run very slow!

If i don't use this code app runs normally!

0 Kudos
PaulF_IntelCorp
Employee
445 Views

I wonder if there's a namespace collision between your id (num) and your function name (num). Does it make a difference if you change the ID to something like "id_num" so it is different than the name of the function?

0 Kudos
Davide_G_1
Beginner
445 Views

Opppsss! :-D (it's a very stupid error!)
Thanks the speed increased but not too much....
But when i use a button for the second time, the app run at normal speed.

 

0 Kudos
Reply