fyra frågor om externa js

[jan-erik]

jag har 4 frågor om länkning av externa js:

 

Vad jag förstår så är det en fördel att slå ihop alla sina js-script i ett samlingsscript, och länka detta i stället. Hur ska man utforma detta?

 

Skulle man vinna i responstid om man i stället för en extern fil i stället la in koden för xvis jquery?

 

Vad jag oxå förstår är att medans de externa jsfilerna länkas in så står resten stilla. Det vore ju bra om vissa delar av sidan (layout, bilder, etc) kunde laddas ner först.

Nånstans har jag sett en diskussion som gick ut på att man skulle lägga länkarna till de externa filerna alla sist i sidan, för att uppnå just denna effekt.

Hur skulle man i så fall utforma detta?

 

jag har ovanpå allt läst om nåt som kallas "JS on demand", som går ut på att scriptet länkas in när det behövs. Någon som kan kommentera detta?

 

[inlägget ändrat 2009-05-18 10:39:44 av jan-erik]

[Anjuna Moon]

Vad jag förstår så är det en fördel att slå ihop alla sina js-script i ett samlingsscript

Att lägga script och stilmallar i egna filer är generellt en bra tumregel (dock bör du dela upp scripten i flera filer så att bara de script som används av en specifik sida används)

De två största fördelarna är att du separerar programmeringslagret från presentationslagret (vilket helt enkelt än praxis för god arkitektur) samt att dessa externa filer inte behöver laddas in vid varje anrop till webbsidan utan kan hämtas från cachen istället.

 

Skulle man vinna i responstid om man i stället för en extern fil i stället la in koden för xvis jquery?

Det är väldigt svårt att ge några tider. Allt handlar om hur ofta webbläsaren uppdaterar sin cache, hur snabb lina du har och belastning på webbservern mm.

 

Vad jag oxå förstår är att medans de externa jsfilerna länkas in så står resten stilla. Det vore ju bra om vissa delar av sidan (layout, bilder, etc) kunde laddas ner först.

Jo, ofta har man propagerat för att lägga sina javascript sist på sidan just för att förhindra denna propp i sidladdningen. Huruvida detta är möjligt eller ej beror helt på hur scriptet är skrivet, men inget hindrar att du testar detta.

Hur skulle man i så fall utforma detta?

Beror som sagt på scriptet, men börja med att testa att bara flytta inlänkningen ned till ex. precis före den avslutande HTML-taggen.

 

jag har ovanpå allt läst om nåt som kallas "JS on demand", som går ut på att scriptet länkas in när det behövs. Någon som kan kommentera detta?

Sådana lösningar kan ju vara aktuella om du har väldigt långa scriptfiler, eller väldigt många filer där du bara ibland har behov av innehållet. Annars tror jag inte det är något du behöver tänka på.

 

 

[inlägget ändrat 2009-05-18 11:05:50 av Anjuna Moon]

[jan-erik]

Tack Anjuna!

jag har provat att lägga js-filerna före /html, men det funkar inte vilket säkerligen beror på att jquery.js behövs vid uppbyggnad av layout etc, .

 

vad gäller de externa filerna så var frågan snarast om det går att lägga alal js i ett skript och länka till detta i stället. Och hur man i så fall utformar detta.

 

[Anjuna Moon]

men det funkar inte vilket säkerligen beror på att jquery.js

Har inte använt JQuery, men använder den sig av en massa omoderna document.write-direktiv för att skapa layouten så beror det förstås på detta. Det kan även ha med andra orsaker att göra i scriptet.

 

vad gäller de externa filerna så var frågan snarast om det går att lägga alal js i ett skript och länka till detta i stället. Och hur man i så fall utformar detta.

Ja, generellt sett är det inga problem. Klipp dina respektive script och klistra in dem i din externa js-fil, i samma ordning de tidigare länkats in eller visats på sidan.

 

[.M]

Tips!

Yahoo har väldigt bra information om hur man bör hantera js och css filer etc. Så jag skulle rekomendera att du sneglar på deras sidor.

 

http://developer.yahoo.com/performance/rules.html#js_bottom

 

[Anjuna Moon]

Yahoo har väldigt bra information om hur man bör hantera js och css filer et

Japp och de berör även en intressant aspekt kring bildinladdningar (se rubriken CSS-sprites). Denna metodik är välkänd för oss gamla veteraner (inte främst från webbvärlden dock utan i andra sammanhang, framförallt spelprogrammering) men är kanske inte lika bekant för alla.

http://www.alistapart.com/articles/sprites

 

[jan-erik]

Anjuna, menar du nåt sånt här:

<script >
<script >..........</script>
<script >..........</script>
<script >..........</script>
</script>

 

jag hittade följande på nätet:

var scripts = [, 
'http//:*******jquery-1.2.5.pack.js',
'http//:*******jquery.accordion.pack.js',
'http//:*******jquery-impromptu.2.5[1].js',
'http//:*******jquery-event.hover-1.0.js',
'http//:*******jquerycorner.js'
],
i = scripts.length;


while(--i) {
if(pb_skinid == i) {

document.write('<script src="' + scripts[i] + '" type="text/javascript"><\/script>');
break;
}
}

 

Jag har lagt in denna fil som exten länk, men det händer inte mycket.

 

[inlägget ändrat 2009-05-18 13:58:49 av jan-erik]

[Anjuna Moon]

Exempel 2 förstår jag inte alls vad det är tänkt att användas till.

 

Exempel 1 är nästan korrekt, men i .js-filen skall du inte ha några script-taggar, bara den rena javascriptkoden som du tidigare haft på andra ställen.

 

Om du använder ex. JQuery idag så har du ju redan länkat in denna fil, med ex.

<script language="javascript" src="jquery.js" />

 

Har du sedan egen javascriptkod direkt i din html-fil, mellan SCRIPT-taggarna, ex.

<script language="javascript">
var a=1;
alert(a);
</script>

så är det alltså raderna 2 och 3 som du skall klippa ut därifrån och lägga in i en egen javascript-fil.

Jag föreslår att du inte lägger in din egna kod i samma fil som JQuery-koden, bättre då att länka in din egen kod ur en egen fil. Här skulle du då alltså skapa en fil, minKod.js, och lägga in

var a=1;
alert(a);

I html-headern skall du nu länka in även denna fil så att resultatet blir:

<script language="javascript" src="jquery.js" />
<script language="javascript" src="minKod.js" />

 

 

 

[jan-erik]

OK, jag är med så långt.

men om jag nu har flera Jqueryfiler (UI:s) som xvis "accordion.js", hur ska jag då få ihop alla dessa i en egen extern jsfil? Jag vill alltså samla alla jquery-js under en o samma <script>....

 

[jan-erik]

Anjuna

jag kom på hur jag skulle göra, i själva verket provade jag detta tiidgare, men en av jq-filerna funkar inte av nån anledning när jag lägger in koden i min "jsbig".

jag ska nu lägga in mina egna js i en egen extern fil, enligt din beskrivning.

 

jag fick lite bra länkar till en beskrivning av hur man kan hantera css/js, tack så hemst mycket, jag ska äta mig in i det snart. men det tar tid...

tack för hjälpen!

 

[Jonas__B]

jag tycker inte man _ska_ importera externa javascriptfiler i andra, på det viset.

Jag vet att det går, men man skall nog undvika det för cachningens skull.

Att ha flera script-taggar som "lägger in" externa javascript är inte fel och på din nivå skall man inte behöva optimera på detta viset. Optimering skall först göras i själva scriptet sig självt, efter det kan man fundera på om man skall "minifiera" ett script för att få ner storleken, då ett script är fullt färdigutvecklat.

 

[jan-erik]

tack Jonas,

förstår vad du menar, och lite är jag faktiskt där att det mesta funkar och jag har börjat titta på vad som kan göras smartare. Jag vet att jag inte behöver gräva så djupt för mitt ändamål med sidan, den funkar jättebra, men jag är lite av en teknikfreak som gärna vill luska ut hur man kan göra.

Om man luskar lite så hittar man rätt ofta uppfattningen att man kan minska på antalet http-requests genom att lägga ihop så att begränsar antalet externa filer. Intressant att se om det får nån effekt, av det jag kunnat märka så här långt så går med mera swisch, men det kan ju vara önsketänkande föstås.

Självklart har man ju inte för en enkel privat hemsida nåt större behov att minimera allt man orkar, fast å andra sidan kan man ju oxå säga att denna kategori kanske oxå har minst resurser att spela med.

bra med synpunkter!

 

[Jonas__B]

man kommer sällan undan antalet request första gången en användare besöker en sida. Den andra gången en sida har tittats på så har ju användaren förhoppningsvis majoriteten av filerna i in cache på datorn, om du inte programmerat annorlunda.