JavaScript-Code, um zufällige Bilder zu generieren, aber es ist langsam

Question

Ich habe den folgenden Code, es läuft, ist aber langsam.

Die Bilder, die ich mit diesem Code erzeuge, werden als Hintergrund eines HTML verwendet, alle in einer Reihe, um das gesamte Fenster zu füllen.

Dieser Code generiert zufällige Bilder und schreibt sie mit einem document.write(), wenn der HTML-Code aufgerufen wird. Ich habe es getestet und es funktioniert, es füllt das ganze Browserfenster mit verschiedenen Bildern mit 100px Höhe. Aber es scheint irgendwie langsam zu sein.

Wie könnte ich optimieren?

var x= 1; var y = 20; var incremento = 20; 
function token1(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token01 = token1(x,y); 
x += incremento; y += incremento; function token2(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token02 = token2(x,y); 
x += incremento; y += incremento; function token3(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token03 = token3(x,y); 
x += incremento; y += incremento; function token4(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token04 = token4(x,y); 
x += incremento; y += incremento; function token5(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token05 = token5(x,y); 
x += incremento; y += incremento; function token6(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token06 = token6(x,y); 
x += incremento; y += incremento; function token7(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token07 = token7(x,y); 
x += incremento; y += incremento; function token8(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token08 = token8(x,y); 
x += incremento; y += incremento; function token9(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token09 = token9(x,y); 
x += incremento; y += incremento; function token10(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token10 = token10(x,y); 
x += incremento; y += incremento; function token11(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token11 = token11(x,y); 
x += incremento; y += incremento; function token12(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token12 = token12(x,y); 
x += incremento; y += incremento; function token13(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token13 = token13(x,y); 
x += incremento; y += incremento; function token14(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token14 = token14(x,y); 
x += incremento; y += incremento; function token15(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token15 = token15(x,y); 
x += incremento; y += incremento; function token16(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token16 = token16(x,y); 
x += incremento; y += incremento; function token17(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token17 = token17(x,y); 
x += incremento; y += incremento; function token18(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token18 = token18(x,y); 
x += incremento; y += incremento; function token19(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token19 = token19(x,y); 
x += incremento; y += incremento; function token20(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token20 = token20(x,y); 
x += incremento; y += incremento; function token21(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token21 = token21(x,y); 
x += incremento; y += incremento; function token22(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token22 = token22(x,y); 
x += incremento; y += incremento; function token23(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token23 = token23(x,y); 
x += incremento; y += incremento; function token24(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token24 = token24(x,y); 
x += incremento; y += incremento; function token25(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token25 = token25(x,y); 
x += incremento; y += incremento; function token26(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token26 = token26(x,y); 
x += incremento; y += incremento; function token27(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token27 = token27(x,y); 
x += incremento; y += incremento; function token28(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token28 = token28(x,y); 
x += incremento; y += incremento; function token29(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token29 = token29(x,y); 
x += incremento; y += incremento; function token30(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token30 = token30(x,y); 
x += incremento; y += incremento; function token31(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token31 = token31(x,y); 
x += incremento; y += incremento; function token32(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token32 = token32(x,y); 
x += incremento; y += incremento; function token33(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token33 = token33(x,y); 
x += incremento; y += incremento; function token34(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token34 = token34(x,y); 
x += incremento; y += incremento; function token35(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token35 = token35(x,y); 
x += incremento; y += incremento; function token36(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token36 = token36(x,y); 
x += incremento; y += incremento; function token37(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token37 = token37(x,y); 
x += incremento; y += incremento; function token38(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token38 = token38(x,y); 
x += incremento; y += incremento; function token39(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token39 = token39(x,y); 
x += incremento; y += incremento; function token40(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token40 = token40(x,y); 
x += incremento; y += incremento; function token41(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token41 = token41(x,y); 
x += incremento; y += incremento; function token42(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token42 = token42(x,y); 
x += incremento; y += incremento; function token43(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token43 = token43(x,y); 
x += incremento; y += incremento; function token44(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token44 = token44(x,y); 
x += incremento; y += incremento; function token45(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token45 = token45(x,y); 
x += incremento; y += incremento; function token46(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token46 = token46(x,y); 
x += incremento; y += incremento; function token47(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token47 = token47(x,y); 
x += incremento; y += incremento; function token48(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token48 = token48(x,y); 
x += incremento; y += incremento; function token49(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token49 = token49(x,y); 
x += incremento; y += incremento; function token50(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token50 = token50(x,y); 
x += incremento; y += incremento; function token51(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token51 = token51(x,y); 
x += incremento; y += incremento; function token52(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token52 = token52(x,y); 
x += incremento; y += incremento; function token53(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token53 = token53(x,y); 
x += incremento; y += incremento; function token54(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token54 = token54(x,y); 
x += incremento; y += incremento; function token55(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token55 = token55(x,y); 
x += incremento; y += incremento; function token56(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token56 = token56(x,y); 
x += incremento; y += incremento; function token57(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token57 = token57(x,y); 
x += incremento; y += incremento; function token58(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token58 = token58(x,y); 
x += incremento; y += incremento; function token59(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token59 = token59(x,y); 
x += incremento; y += incremento; function token60(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token60 = token60(x,y); 
x += incremento; y += incremento; function token61(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token61 = token61(x,y); 
x += incremento; y += incremento; function token62(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token62 = token62(x,y); 
x += incremento; y += incremento; function token63(a,b) { return Math.round(Math.random()*(b-a)+parseInt(a)); } var token63 = token63(x,y); 
// 

function dameMuchasImagenes() 
{ 
    document.write("<IMG SRC= files/"+token20+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token01+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token02+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token03+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token04+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token05+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token06+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token07+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token08+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token09+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token10+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token11+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token12+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token13+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token14+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token15+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token16+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token17+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token18+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token19+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token21+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token22+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token23+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token24+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token25+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token26+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token27+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token28+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token29+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token30+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token31+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token32+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token33+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token34+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token35+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token36+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token37+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token38+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token39+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token40+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token41+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token42+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token43+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token44+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token45+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token46+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token47+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token48+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token49+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token50+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token51+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token52+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token53+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token54+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token55+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token56+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token57+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token58+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token59+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token60+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token61+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token62+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token63+".jpg HEIGHT=100 BORDER=0>"); 
document.write("<IMG SRC= files/"+token63+".jpg HEIGHT=100 BORDER=0>"); } 

Answer 1

Check-out threex.terrain.js, gibt es einige Methoden, die Sie Perlin Noise/simplex Rauschen verwenden verwenden könnte eine heightmap und dann konvertieren Werte Farben zu machen. es hat sogar eine Methode, um auf eine Leinwand für Ihren Fall auszugeben!

Answer 2

Sie müssen nicht viele Funktionen erstellen, die dasselbe tun. Sie können die Funktion zum Hinzufügen von Bildern mit einer Schleife auch vereinfachen. Beachten Sie, dass es möglicherweise noch langsam ist, da Sie viele Bilder hinzufügen.

Sehen Sie ein Beispiel in Ihrem Code basiert: (den Code bearbeiten überprüfen - Ich habe vergessen, vor zwei Parameter)

var x= 1, y = 20, increment = 20; 
function generateToken() { 
    return Math.round(Math.random() * (y - x) + parseInt(a)); 
} 
function getImages() { 
    for(var i = 1; i <= 63; i ++) { 
     document.write('<img height="100" src="files/'+ generateToken() +'"/>'); 
     x += increment; 
     y += increment; 
    } /* this block executes 63 times */ 
} 

Ich empfehle die canvas element in diesem Fall zu verwenden.