» »

1st web project... speed up?

1st web project... speed up?

galu ::

No, pa je prvi pravi projektek online. Gre se za "web app", s katerim si lahko rišeš vzorce za križce (to je neke vrste šivanje)..

Za zdaj še nima možnosti shraniti projetka (saj se tega zgolj z JS ne da narediti, afaik.:D) ter da bi zajel celotno barvno polje in posredoval to v browserjev printing plugin... Ampak ja, to je naloga za drug dan, katere še nimam pojma kako rešiti.


naslov: http://krizci.zxq.net/

Problem pa je, da je stvar ob premikanju sliderja v določenih browserjih boleče počasa (npr. FF). Chrome deluje kot po maslu.

Koda za risanje je taka:
var mreza = function (visina, sirina) {
		for (a=1; a<=visina; a++) {
		for (i=1; i<=sirina; i++) {
			var $appendplace = $("#mreza-plac")
			$('<div class="mreza"></div>').html($('<span class="mreza_text">' + i + '</span>'))
						      .appendTo($appendplace);
		}
			$appendplace.append($("<br>"));
		}
	}



Koda za modificiranje pa taka:
$("#slider" ).slider({
			animate: true,
			min:  10,
			max: 45,
			value: 25,
			slide: function (event, ui) {
				
				if (ui.value < MAXwidthEXTEND) {
				
				$("#slider_val").html(ui.value + "px");
				}
				$(".mreza").css("width", ui.value);
				$(".mreza").css("height", ui.value);
			text_size = ui.value / 2;
			if (text_size < 8) {
				$(".mreza_text").css("display", "none");	
			} else if (text_size >= MAXwidthEXTEND / 1.8 ) {
				var NEWtext_size = parseInt(MAXwidthEXTEND/1.8);
				$(".mreza_text").css("display", "inline");
				$(".mreza_text").css("font-size", NEWtext_size);
			} else {
				$(".mreza_text").css("display", "inline");
				$(".mreza_text").css("font-size", text_size);
				
			}
			}


Sicer je še kar ostale kode in kode za dinamično resizanje in čekiranje stvari da ne bi bilo overflowa... Ampak je kar se mreže tiče, v grobem, to to.

Torej... Is my code very inefficient? :/
Ter če bi se še komu dalo... Kako bi rešil prej opisana 2 problema..?
Tako to gre.

bluefish ::

403 Forbidden!

galu ::

Ravno sem updejtal mapo na serveru.:))

zej (spet) dela. :)
Tako to gre.

Zgodovina sprememb…

  • spremenil: galu ()

win64 ::

Nekaj splošnih optimizacij, prva optimizacija ti bo največ doprinesla:

Predpomni polja:
var mreza = $(".mreza");
var mrezaText = $(".mreza_text");

V slide funkcij potem uporabljaš to tako(glej tudi verigo funkcij(chaining)):
mreza.css("width", ui.value).css("height", ui.value);
mrezaText.css("display", "inline").css("font-size", NEWtext_size); 


Namesto deljenja z dva uporabljaj premik desno(shift right):
text_size = ui.value / 2;


Tukaj lahko uporabiš text() namesto html()
$("#slider_val").html(ui.value + "px");


Shrani vrednost MAXwidthEXTEND / 1.8 v spremenljivko.

Aja še ena napaka, če vneseš v prvo polje številko in v drugo tekst se zgodi napaka. Uporabljaj boljše preverjanje, morda tudi tako, da ne dovoliš vnosa ne-številk.

Projekt lahko shranjuješ v cookie-je. Sicer si omejen na 2kB(ne me vzet dobesedno) na cookie ampak nekaj je.
V novih brskalnikih pa imaš tudi local storage, session storage, indexDB in local database. Te stvari so slabo podprte.

Zgodovina sprememb…

  • spremenil: win64 ()

galu ::

Hvala!

Sem zdaj spremenil, in je odzivnost sliderja res hitrejša (se opazi pri mreži > 100x100).


Ne razumem pa tega:
Namesto deljenja z dva uporabljaj premik desno(shift right):

text_size = ui.value / 2;



Kar se pa tiče preverjanja, sem že tudi sam bil misli, da mi moral nekaj if stavkov dodati... Ampak to bo prišlo v kodo takrat, ko bom dodal še shranjevanje. :)
Kekse pa bom še prečekiral...
Tako to gre.

win64 ::

Sem pozabil napisat:
To je enako:
text_size = ui.value / 2;

kot(binarni premik desno):
text_size = ui.value >> 1;

galu ::

Ugh... Še nikoli slišal.. Hvala :)


Anyway... Kako bi naredil, da bi lahko z klikom in potem vlečenjem, pobarval več kvadratkov?

Ne vem točno katere evente vzeti v JQueryu... Pomoje pa bi še boljše šlo oz. izgledalo z JQ UI metodo .selectable(), right?
Tako to gre.

technolog ::

1. Dejte s temi bitnimi premiki bit pametni. V JS je vsaka številka float, in za shiftanje je treba najprej pretvorit v int, shift naredit in pretvorit nazaj v float. Grozno počasno! V primerjavi z enim simpl deljenjem. To me mot tle, da ste kr neki pametni, čeprov ne bi smel bit.

2. Slider je počasen, ker se stvar za vsak piksel na sliderju vse na novo preračuna. Na chromu zgleda kot da deluje OK, ker ima zelo hiter JS engine, ampak kuri procesor pa še vseen. Rešitev je sicer lahka, ampak ti je vseen ne bi priporočov, ker ni tok kritično.

Ne vem točno katere evente vzeti v JQueryu... Pomoje pa bi še boljše šlo oz. izgledalo z JQ UI metodo .selectable(), right?


To je simpl. Imaš .mouseup() in .mousedown(). Zapomniš si na kerem kvadratku je šla miška dol, in ko gre miška gor, pogledaš kje je šla miška dol in ustrezno pobarvaš.

Zgodovina sprememb…

galu ::

No, stvar je zdej updejtana (fixan bug, dodani filtri za vnos ter barvanje večih kvadratkov hkrati)... Blo je pa rešeno z modificiranjem funkcije .selectable(). :)


btw... desni klik na kvadratek zbriše barvo. Res moram napisati neka navodila za tole.
Tako to gre.

Tilen ::

Jaz sem samo random nekaj poklikal in mi je zabilo Firefox...
413120536c6f76656e696a612c20642e642e

GoodSatanist ::

Gal, risanje križcev? Nariš mi en bel pentagram na črni podlagi.8-)
(\__/) This is Bunny. Copy and paste bunny
(='.'=) into your signature to help him gain
(")_(") world domination.

win64 ::

technolog je izjavil:

1. Dejte s temi bitnimi premiki bit pametni. V JS je vsaka številka float, in za shiftanje je treba najprej pretvorit v int, shift naredit in pretvorit nazaj v float. Grozno počasno! V primerjavi z enim simpl deljenjem. To me mot tle, da ste kr neki pametni, čeprov ne bi smel bit.


Sicer imaš dobre argumente, samo v praksi te upočasnitve ni(najbrž zaradi optimizacij).
Test, ki sem ga naredil:
var t1,t2,x,i;
var times = 10000000;
t1=new Date(); 
for(i=0;i<times;i++) x=i/2; 
t2=new Date(); 
console.log(t2-t1);

t1=new Date(); 
for(i=0;i<times;i++) x=i>>1; 
t2=new Date(); 
console.log(t2-t1);

Rezultati so tam tam, reda milisekund razlike na 10 milijonov. In vedno v dobro >>. Zelo čudno :S

technolog ::

1. Ne morš se zanašat na optimizacije, ker ne morš bit šur, da jih vsak browser dela.

2. Zakaj bi gršal kodo?

3. Shiftanje ti ne dela za decimalna števila. Še recimo 9 ti bo razpolovil kot 4.

Irbis ::

win64 je izjavil:


Sicer imaš dobre argumente, samo v praksi te upočasnitve ni(najbrž zaradi optimizacij).
Test, ki sem ga naredil:

Rezultati so tam tam, reda milisekund razlike na 10 milijonov. In vedno v dobro >>. Zelo čudno :S


Tale test najbrž ne pove nič o hitrosti deljenja - pameten optimizator bo tako izračunal le zadnjo vrednost v zanki in izvedel le eno deljenje. Si poskusil z različnimi vrednostmi times, da vidiš, ali sploh res tolikokrat izvede?

win64 ::

Čas izvajanja zank se razlikuje glede na različne vrednosti times.
Vem da bi pametni optimizator odpravil zanko, vendar nisem začutil tega na hitrosti izvajanja.

Sem malo otežil delo optimizatorju(x=x/2, x=x>>1):
var t1,t2,t11,t12,t21,t22,x,i,j;
var times = 1000;
var times2 = 1000;
t1 = 0; t2=0;
for(j=0; j< times2; j++)
{
x=Math.random()*100000;
t11=new Date();
for(i=0;i<times;i++) x=x>>1;
t12=new Date();
t1 += (t12-t11)

t11=new Date();
for(i=0;i<times;i++) x=x/2;
t12=new Date();
t2 += (t12-t11)
}

console.log(t1);
console.log(t2);

Razlike so še zmeraj minimalne.
@Tehnolog: se strinjam s tabo, samo bi rad ugotovil kje pride do razhajanj med teorijo in prakso.

Eden je že delal te primerjave: http://jsperf.com/shift-vs-divide/2

Zgodovina sprememb…

  • spremenil: win64 ()

win64 ::

Na sem naredil še spletni test: http://jsfiddle.net/2m8nw/24/

technolog ::

Saj ni pomembno. Deljenja s potenco 2 NIKOLI ne menjaš z bitnimi zamiki. Razlog je gršanje kode.

V prevedenih jezikih se pričakuje, da bo to naredil optimizator.

V interpretanih jezikih je počasneje tako ali tako.

Zgodovina sprememb…

galu ::

Tilen je izjavil:

Jaz sem samo random nekaj poklikal in mi je zabilo Firefox...


Ur comp sucks.>:D
Tako to gre.


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1298342849 (1986) sunniegoldie
»

Kako narediti to stran "resposive"?

Oddelek: Izdelava spletišč
51002 (893) zzbil
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč
519729 (7528) nuuush
»

Kako pišete CSS?

Oddelek: Izdelava spletišč
271918 (1356) mte
»

DW preferences - velikost črk

Oddelek: Izdelava spletišč
6966 (912) tec

Več podobnih tem