2010-05-02 5 views
9

Verschiedene Seiten meiner Website haben unterschiedliche Bedürfnisse js (Plugins in erster Linie), müssen einige Leuchtkasten, einige tun sie nicht, müssen einige ein Karussell, einige tun sie nicht usw.verschiedene kleine js-Dateien pro Seite VS. 1x siteweite js-Datei?

Im Hinblick auf die pageloading Geschwindigkeit sollte

Option 1 - Referenz jede jS-Datei, wenn es gebraucht wird:

so eine Seite haben könnte:

<script type="text/javascript" src="js/carousel/scrollable.js"></script>  
<script type="text/javascript" src="js/jquery.easydrag.js"></script> 
<script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"></script> 

und andere haben:

<script type="text/javascript" src="st_wd_assets/js/carousel/scrollable.js"></script> 
<script type="text/javascript" src="st_wd_assets/js/typewatch.js"></script> 

Option 2 - kombinieren und komprimieren in eine site_wide.js Datei:

so würde jede Seite verweisen:

<script type="text/javascript" src="js/site_wide.js"></script> 

ungenutzte Selektoren wäre/Event-Listener aber wie schlecht ist das? Ich würde an der Spitze der site_wide.js alle Plugin Hinweise/Akkreditierungen sind

+0

http://stackoverflow.com/questions/2707499/improving-javascript-load-times-concatenation-vs-many-cache/2707544#2707544 http://stackoverflow.com/questions/1495338/use-cache -file-or-one-more-http-Anfrage –

Antwort

7

in der Regel am besten zu combine these and serve one file Es ist Datei, die Sie die Cache-Header gesetzt, so dass der Kunde auf sie hält, nicht jede Seite anfordert. Denken Sie daran, dass ein jQuery-Selektor, wenn er nichts findet, nichts unternimmt. Das ist keine große Sache, solange Sie einen guten Teil Ihres Skripts auf jeder Seite verwenden. Es ist gut, dass Selektoren ohne Übereinstimmungen vorhanden sind.

Make sure it's being cached by the client though, von all Ihrer Arbeit ist nichts. Stellen Sie auch sicher, it's served minified and gzipped. Und zuletzt, schau dir deine main libraries from a CDN an.

+0

Denken Sie daran, dass bestimmte Clients (wie iPhones) keine Dateien zwischenspeichern> 15 KB. Auch seltsam, dass diese Antwort http://stackoverflow.com/questions/2707499/improving-javascript-load-times-concatenation-vs-many-cache/2707544#2707544 das Gegenteil empfiehlt. –

+3

@Marcel - Das Limit ist> 25kb (und das ist die ** uncompressed ** Größe, also ziemlich niedrig) :) Da Sie die Bibliothek ** selbst laden ** jede Seite laden, ist die jQuery Situation auf dem iPhone isn Das ist großartig, bis ein mobiler Build herauskommt. Wenn du für ** irgendeinen ** deiner Plugins round tripst (was du mit colorbox tun müsstest), ist es am besten, sie alle auf einmal zu bekommen, da die Anfrage selbst ist, was auf einem mobilen Gerät so schmerzhaft ist Eine größere Datei mit dieser Anfrage ist viel schneller als eine andere. Als ein AT & T-Kunde mit einem und mies/spotty Service, kann ich dies bestätigen :) –

+0

Nach diesem Kommentar http://www.niallkennedy.com/blog/2008/02/iphone-cache-performance.html#comment255665 der Die Größenbeschränkung beträgt heute 15 KB statt 25 KB (OS 3.1). Da ich kein iPhone besitze, kann ich das nicht testen. Gut zu wissen, dass die HTTP-Anfragen bei mobilen Verbindungen sehr langsam sein können. –

2

Kombinieren Sie sie in eine große und minimierte externe Datei und schließen Sie diese auf jeder Seite ein. Nach dem ersten Laden der Seite wird der Browser zwischengespeichert, so dass der Benutzer sie nur einmal herunterladen wird.

Verwandte Themen