Optimer javascript

Har du ikke mulighed for at lægge dit javascript ud i en ekstern js-fil som du så refererer fra siden?

En anden ting der kan gøres er at koble event-handlers på dokumentet efter det er loadet, således har du (næsten) kun essentiel HTML-kode i din side når den indlæses i browseren...

<ole>

Det er af mange grunde ikke så nemt at lave til JavaScript, hvis det altså skal fungere godt.

Det bedste er at gøre det i hånden - og der kan du få stor hjælp af noget 'Search & Replace' i din kodeeditor. Med mindre, der er tale om mange tusinde kodelinjer, behøver det ikke tage så lang tid  =)

/mvh
</bole>

Man´kan godt med server script få fjernet alt der er unødvendigt ..

ex :

http://www.braendstrup.dk/cssclean.aspx?url=/Site.css

samme som : http://www.braendstrup.dk/Site.css

..

Du laver vel bare en php side, der tager et tekst dokument som parameter, og stripper alt unødvendigt med regex - og servicere det for brugeren.

/JJ

Softspot: Sådan gør jeg selvfølgelig også.

Olebole: Hvorfor tror du ikke det vil fungere godt at gøre sådan med et JavaScript? Men jo, det kan godt være at løsningen bare bliver noget search & replace. Det er bare så surt når man skal ændre i javascriptet, så bliver det næsten nødvendigt at gøre det hele forfra igen.

Jokkejensen: Hvad fjerner dit script der? Mellemrum og tabulator? Men jo, det må være løsningen selv at programmere det med noget regex hvis det ikke er til at drive op andre steder.

Hvis jeg efterfølgende offentliggører php-scriptet så kan det jo være det er noget der er andre her på eksperten der har lyst til at hjælpe med.

Hvis du allerede lægger dit javascript i en ekstern js-fil, så bliver den vel cached på klienten (i de fleste tilfælde), så er det vel ikke nødvendigt at optimere vildt meget på det (med mindre du genererer scriptet dynamisk og det derfor ikke kan caches effektivt på klienten)...?

mapoulsen: det fjerner space, tab og kommentarer - har ikke selv lavet det, men kan godt undersøge nærmere - men lav da dit eget, der opfylder dine krav.

/JJ

Softspot: Det fylder 50 kb og jeg vil skyde på at det ville kunne komme ned på 15 kb hvis alt overflødigt blev fjernet. Dette ville samtidig gøre det næsten komplet ulæseligt for eventuelle konkurrenter at bruge koden på deres site.

Jokkejensen: Du må gerne undersøge hvor du har scriptet fra. Men jo, vil da gerne lave mit eget. Har bare ret begrænset tid, og det ville da være rart hvis det var lavet i forvejen. Og det må da næsten være her man skal spørge om sådan noget ;)

Umiddelbart er givinsten ved at gøre koden ulæselig pga. den slags condesering nærmest noneksistent - der findes nok ligeså mange beautifiers som der findes condensers, så den kode er nok hurtigt stillet pænt op igen...

Nå, men det var jo heller ikke det der var den primære opgave... :)

Softspot: Det kan jeg godt følge dig i. Men min kode indeholder i forvejen nogle lidt specielle matematiske udregninger, og hvis man tage og laver alle variabel navne om til a1, a2, a3 osv. så tror jeg godt det kan blive næsten helt uforståeligt.

Jeg kan give et lille eksempel, et tilfældigt uddrag fra min kode:

    // Størrelser til skærm (i PX)
    //----------------------------------------
   
    // Finder ud af hvilken side der er begrænsende i forhold til den plads der er på skærmen
    if((widthTotalCm/heightTotalCm) >= (widthTotalMaxPx/heightTotalMaxPx)) {
        screenLimitSide = 'width';
        screenNolimitSide = 'height';
    } else {
        screenLimitSide = 'height';
        screenNolimitSide = 'width';
    }
    limitPx = eval(screenLimitSide + "TotalMaxPx");
   
    // Udregner rammens bredde i pixels på baggrund af den begrænsende side
    // da dennes totale størrelse er kendt i pixels (limitPx).
    // Udregningen laves ved at udregne den procentdel som rammen udgør af den totale side i CM,
    // hvorefter denne procentdel multipliceres med limitPx for at rammens bredde i pixels.
   
    if (frameChoice != 0) {
        frameWidthPx = limitPx * (frameWidthCm/eval(screenLimitSide + "TotalCm"));
        frameLengthPx = frameWidthPx * frame[frameChoice]['lw'];
    } else {
        frameWidthPx=0;
        frameLengthPx=0;
    } //alert('width :' + r(frameWidthPx) + " og længde: " + r(frameLengthPx));

Denne fylder 1063 bytes og er forholdvis let forståeligt. Deg jeg gerne vil er at lave dette om til følgende:

if((a1/a2)>=(a3/a4)){a5='width';a6='height';}else{a5='height';a6='width';}a7=eval(a5+"a8");if(a9!=0){b1=a7*(b2/eval(a5+"b3"));b4=b1*b5[a9]['lw'];}else{b1=0;b4=0;}

Dette fylder 163 bytes, og jeg vil påstå at det er så godt som uforståeligt.

Jo, når du stiller det sådan op, så kan jeg kun være enig i at gevinsten er mht. condensering og "scambling" er stor... :)

Jeg fandt et lille program som måske kan hjælpe mig lidt på vejen:

http://www.crockford.com/javascript/jsmin.html

Og det er også lavet i PHP, så det er muligt at generere dem on-the-fly:

http://www.crockford.com/javascript/jsmin.php.txt

Så mangler jeg bare lige at omdøbe funktioner til noget kort og uforståeligt. Men det kan jo evt. gøres ved bare at have et array med navnene på alle de funktioner og variabler man gerne vil have omdøbt og så bare loope denne igennem og lave en str_replace() (i PHP). Og så er det vel egentlig ikke så meget mere tilbage i det projekt. Det vil jeg begynde at lege lidt med i morgen :)