Hej!

Jag har kodat en dynamisk meny till en sida. (Den fungerar perfekt!) Man kan lägga till och ändra antalet menyer på ett ganska enkelt sätt. MEN sättet jag gjort detta på är att man för varje submeny deklarerar två arrayer. (En som håller reda på hur många undernivåer denna har och en som innehåller texten) Detta betyder ju att om man vill ha en väldigt stor meny, så blir det väldigt många arrayer. Just nu har jag en meny med 88 arrayer!!

Detta fungerar väldigt bra i explorer, men inte i den browsern den ska verka i. Det går alldeles för långsamt. (ca 10 sekunder! ) I explorer tar allt som allt 1 sekund. Hur skulle jag kunna veta detta innan? Vet man hur lång tid det tar att skriva ut innehållet i en array? Och att man på något sätt sedan kan räkna ut hur många sekunder det tar?

Först laddar jag in hela menyn, men gör vissa synliga och vissa osynliga. Det är då det tar lång tid.


Jag skulle vilja lära mig lite mer om prestanda. Hur gör man för att förbättra den? Hur ska man kunna förutse vad en browser kan eller inte prestandamässigt? Tex hur många variabler eller arrayer en sida får innehålla?



/Diana

Bra fråga

Att flytta över javascript till en include underlättar för webbläsaren under laddningstiden. Finns den i cachen på webbläsaren läser den inte om och det är en form av prestandaförbättring. Sen handlar det ju helt klart om hur snabbt webbläsaren renderar informationen och som du märkt är detta olika.

Om du nu klipper menyn och bara har 5 alternativ - är det stor skillnad på laddtiden och presentationen i de andra webbläsarna då? Det kan också vara så att du konkatenerar strängar som också tar tid istället för att lyfta ut kod och formatering till ett stylesheet.

Som sagt, det finns många varianter att prova sig fram med - det finns inte direkt något man konkret kan peka på om du inte kan visa ditt exempel och man kan få se hur det gjorts idag.

Hej!

Vad menar du med include? Är det att man skriver:
<script type="text/javascript" src="menu.js">
</script>

Ja, när menyn är mindre är prestandan helt ok. Det är därför "felet" inte upptäckts förrän nu, när jag orkade lägga in hela menyn. Är det att så läsningen och hämtningen av arrayer kan ta så lång tid?

Jag tänkte förbättra prestandan genom att endast göra document.write en gång. Alltså skapa en sträng som tilldelas allt som ska skrivas ut och sedan göra document.write i slutet. Detta fungerade bra i explorer, men inte där den ska vara. Den går inte ens att exekvera: "Out of memory error". Det förmodas att orsaken är att strängen blir för stor. Hur stor få en sträng vara??? Är det olika?

Ja, jag gör många kontaterneringar av strängar också.

Här är funktionen som tar så lång tid:


function foldInit(){

initiateVariables();

document.write(firstDiv+'<br>');

var menuTmpObj;
for(var i=0;i<menu.length;i++) { //stega igenom variabeln menu

/***********************************************
* Huvudmenyer *
************************************************/
var num0 = imenu[i];
if( num0>0 ){ //Då ska bild läggas till
document.write('<img src='+foldImg.src+' id=img'+menuId+(i)+' width=10 height=10 style="position: relative; top: -7px; left: 0px;">&nbsp '+menu[i]+' <br>');
}else{
document.write("<img src="+foldNoImg.src+" id=img"+menuId+(i)+" width=10 height=10 border=0>&nbsp");
}
document.write("<div id="+menuId+(i)+" class=clFold>");
/**** subMenyer**** */
if( num0 > 0 ){ //om undermeny finns
var j=0;
while( num0 > 0 ){
document.write("<div id="+smId+(smNbr)+" class=clFoldSub>" );
var num1=( eval( '(ism'+i+'[j])'));
var tmp1=i+"_"+j;
if( num1 > 0 ){ //Då ska bild läggas till
document.write('<img src='+foldImg.src+' id=imgsm'+tmp1+' width=10 height=10 style="position: relative; top: -5px; left: 0px;">&nbsp '+ eval( '(sm'+i+'[j])' ) +' <br>');
}else{
aLink=( eval( '(ism'+i+'.L'+j+')' ) )
document.write('<img src='+foldNoImg.src+' id=imgsm'+tmp1+' width=10 height=10>&nbsp '+ eval( '(sm'+i+'[j])' ) +' <br>');
}
/****** subsubMenyer ****/
if( num1 > 0 ){
var k=0;
while( num1 > 0 ){ //while2
document.write("<div id=" +sm2Id+(sm2No)+" class=clFoldSub2>" );
var num2=( eval( '(ism'+tmp1+'[k])' ));
var tmp2=tmp1+"_"+k;
if( num2 > 0 ){
document.write('<img src='+foldImg.src+' id=imgsm'+tmp2+' width=10 height=10 style="position: relative; top: -5px; left: 0px;">&nbsp '+ eval( '(sm'+tmp1+'[k])' ) +' <br>' );
}else{
aLink=( eval( '(ism'+tmp1+'.L'+k+')' ) )
document.write('<img src='+foldNoImg.src+' id=imgsm'+tmp2+' width=10 height=10>&nbsp '+ eval( '(sm'+tmp1+'[k])' ) +' <br>');
}
/********* sub3Menyer ************/ if( num2 > 0 ){
var l=0; //sm000
while( num2 > 0 ){ //tex smId111[0] while3
document.write("<div id=" +sm3Id+(sm3No)+" class=clFoldSub3>" );
var num3=( eval( '(ism'+tmp2+'[l])' ));
var tmp3=tmp2+"_"+l;
if( num3 > 0 ){ //Då ska bild läggas till, ism111
document.write('<img src='+foldImg.src+' id=imgsm'+tmp3+' width=10 height=10 style="position: relative; top: -5px; left: 0px;">&nbsp '+ eval( '(sm'+tmp2+'[l])' ) +' <br>');
}else{
aLink=( eval( '(ism'+tmp2+'.L'+l+')' ) ) // tex ism010.L0
document.write('<img src='+foldNoImg.src+' id=imgsm'+tmp3+' width=10 height=10>&nbsp '+ eval( '(sm'+tmp2+'[l])' ) +' <br>');
}
/***** sub4Menyer *********/ if( num3 > 0 ){
var m=0; //sm0100
var tmp4=tmp3+"_"+m;
while( num3 > 0 ){ //tex smId1111[0]
aLink=( eval( '(ism'+tmp3+'.L'+m+')' ) )
document.write('<div id='+sm4Id+(sm4No)+' class=clFoldSub4><img src='+foldNoImg.src+' id=imgsm'+tmp4+' width=10 height=10 style="position: relative; top: -5px; left: 0px;">&nbsp '+ eval( '(sm'+tmp3+'[m])' ) +' <br></div>');
m++;
num3--;
sm4No++;
}
}
/****** slut på sub4Menyer ***/ l++;
num2--;
sm3No++;
document.write("</div>");
} //slut på while3
}
/***** slut på sub3Menyer *****/
k++;
num1--;
sm2No++;
document.write("</div>");
} //slut på while2
}
/*******slut på subsubMenyer ****/
j++;
num0--;
smNbr++;
document.write("</div>"); //slut på div smId0, smId1
} //slut på while1
}
/*********** slut på subMenyer *****/
document.write("</div><BR>"); //slut på div menu0, menu1
/**** slut på huvudmenyer ****/
} //slut på for()

document.write('</div>'); //slut på diven över alla
}

Hej!

Vad menar du med include? Är det att man skriver:
<script type="text/javascript" src="menu.js">
</script>

Ja, när menyn är mindre är prestandan helt ok. Det är därför "felet" inte upptäckts förrän nu, när jag orkade lägga in hela menyn. Är det att så läsningen och hämtningen av arrayer kan ta så lång tid?

Jag tänkte förbättra prestandan genom att endast göra document.write en gång. Alltså skapa en sträng som tilldelas allt som ska skrivas ut och sedan göra document.write i slutet. Detta fungerade bra i explorer, men inte där den ska vara. Den går inte ens att exekvera: "Out of memory error". Det förmodas att orsaken är att strängen blir för stor. Hur stor få en sträng vara??? Är det olika?

Ja, jag gör många kontaterneringar av strängar också.

Här är funktionen som tar så lång tid:


function foldInit(){

initiateVariables();

document.write(firstDiv+'<br>');

var menuTmpObj;
for(var i=0;i<menu.length;i++) { //stega igenom variabeln menu

/***********************************************
* Huvudmenyer *
************************************************/
var num0 = imenu[i];
if( num0>0 ){ //Då ska bild läggas till
document.write('<img src='+foldImg.src+' id=img'+menuId+(i)+' width=10 height=10 style="position: relative; top: -7px; left: 0px;">&nbsp '+menu[i]+' <br>');
}else{
document.write("<img src="+foldNoImg.src+" id=img"+menuId+(i)+" width=10 height=10 border=0>&nbsp");
}
document.write("<div id="+menuId+(i)+" class=clFold>");
/**** subMenyer**** */
if( num0 > 0 ){ //om undermeny finns
var j=0;
while( num0 > 0 ){
document.write("<div id="+smId+(smNbr)+" class=clFoldSub>" );
var num1=( eval( '(ism'+i+'[j])'));
var tmp1=i+"_"+j;
if( num1 > 0 ){ //Då ska bild läggas till
document.write('<img src='+foldImg.src+' id=imgsm'+tmp1+' width=10 height=10 style="position: relative; top: -5px; left: 0px;">&nbsp '+ eval( '(sm'+i+'[j])' ) +' <br>');
}else{
aLink=( eval( '(ism'+i+'.L'+j+')' ) )
document.write('<img src='+foldNoImg.src+' id=imgsm'+tmp1+' width=10 height=10>&nbsp '+ eval( '(sm'+i+'[j])' ) +' <br>');
}
/****** subsubMenyer ****/
if( num1 > 0 ){
var k=0;
while( num1 > 0 ){ //while2
document.write("<div id=" +sm2Id+(sm2No)+" class=clFoldSub2>" );
var num2=( eval( '(ism'+tmp1+'[k])' ));
var tmp2=tmp1+"_"+k;
if( num2 > 0 ){
document.write('<img src='+foldImg.src+' id=imgsm'+tmp2+' width=10 height=10 style="position: relative; top: -5px; left: 0px;">&nbsp '+ eval( '(sm'+tmp1+'[k])' ) +' <br>' );
}else{
aLink=( eval( '(ism'+tmp1+'.L'+k+')' ) )
document.write('<img src='+foldNoImg.src+' id=imgsm'+tmp2+' width=10 height=10>&nbsp '+ eval( '(sm'+tmp1+'[k])' ) +' <br>');
}
/********* sub3Menyer ************/ if( num2 > 0 ){
var l=0; //sm000
while( num2 > 0 ){ //tex smId111[0] while3
document.write("<div id=" +sm3Id+(sm3No)+" class=clFoldSub3>" );
var num3=( eval( '(ism'+tmp2+'[l])' ));
var tmp3=tmp2+"_"+l;
if( num3 > 0 ){ //Då ska bild läggas till, ism111
document.write('<img src='+foldImg.src+' id=imgsm'+tmp3+' width=10 height=10 style="position: relative; top: -5px; left: 0px;">&nbsp '+ eval( '(sm'+tmp2+'[l])' ) +' <br>');
}else{
aLink=( eval( '(ism'+tmp2+'.L'+l+')' ) ) // tex ism010.L0
document.write('<img src='+foldNoImg.src+' id=imgsm'+tmp3+' width=10 height=10>&nbsp '+ eval( '(sm'+tmp2+'[l])' ) +' <br>');
}
/***** sub4Menyer *********/ if( num3 > 0 ){
var m=0; //sm0100
var tmp4=tmp3+"_"+m;
while( num3 > 0 ){ //tex smId1111[0]
aLink=( eval( '(ism'+tmp3+'.L'+m+')' ) )
document.write('<div id='+sm4Id+(sm4No)+' class=clFoldSub4><img src='+foldNoImg.src+' id=imgsm'+tmp4+' width=10 height=10 style="position: relative; top: -5px; left: 0px;">&nbsp '+ eval( '(sm'+tmp3+'[m])' ) +' <br></div>');
m++;
num3--;
sm4No++;
}
}
/****** slut på sub4Menyer ***/ l++;
num2--;
sm3No++;
document.write("</div>");
} //slut på while3
}
/***** slut på sub3Menyer *****/
k++;
num1--;
sm2No++;
document.write("</div>");
} //slut på while2
}
/*******slut på subsubMenyer ****/
j++;
num0--;
smNbr++;
document.write("</div>"); //slut på div smId0, smId1
} //slut på while1
}
/*********** slut på subMenyer *****/
document.write("</div><BR>"); //slut på div menu0, menu1
/**** slut på huvudmenyer ****/
} //slut på for()

document.write('</div>'); //slut på diven över alla
}