Performance spletnih strani - nalaganje eksternih Javascript fajlov
2 naročnika
2 naročnika
Da tudi jaz zacnem z mojim doprinosom za narodov blagor ;)
Izpostavil sem vprasanje o performancu spletnih strani in predstavljam vam eno od resitev kako zadevo optimizirat.
Gre za primer ko na spletni strani vkljucujete eksterne Javascripte, oziroma zelite manipulirati z DOM-om takoj ko se ta nalozi. V primeru da se skripta klice tik pred </body> tagom ni nobenih problemov, saj se je HTML ze v celoti nalozil in zrenderiral. Stala nastane takrat kadar skripto vkljucimo v <HEAD> (recimo da jo tam tudi rabimo) saj se vse kar je pod <script> tagom ne renderira dokler se celotna skripta ne nalozi, kar pomeni da je celotna stran v zastoju oziroma v cakanju.
Vsi poznamo event window.onload tako da ne bom prevec razglabljal o tem. Ce uporabljate kaksen drug Javascript framework (prototype, scriptaculous) boste ze vedli kaj uporabit ;)
V primeru da pa ne rabite cakat da se nalozi celotna stran (HTML + slike), lahko uporabite resitev DEXAGOGO's FastInit library katera poskrbi da se inicializacijse fukncije klicejo takoj ko je browserjev DOM na voljo.
Klicemo funkcijo Load.JScript (JSON - i like it) ki v head section nalozi javascript datoteko katere source podamo kot parameter
Izvolite!
<HEAD>
<script type="text/javascript" language="JavaScript">
var Load = {
JScript: function (url_)
{
// We are preventing loading a file already loaded
var _script = document.getElementsByTagName("script");
var _head = document.getElementsByTagName("head")[0];
// Loop through the length of the links
for( i = 0; _script.length > i; i++)
{
// If the href is already present, remove it
if (_script*["href"] == url_)
{
_head.removeChild(_script*);
}
}
// Build script element
var _elscript = document.createElement("script");
_elscript.setAttribute("language", "javascript");
_elscript.setAttribute("type", "text/javascript");
_elscript.setAttribute("src", url_);
// Add script
_head.appendChild(_elscript);
}
};
function loadJs() {
Load.JScript('http://www.dolpoteg.com/nalagam-se-na-koncu.js');
}
window.onload = loadJs;
/*
//ce uporabljamo FastInit
FastInit.addOnLoad(loadJs);
*/
</script>
</HEAD>**
3 odgovori
Ja defer atribut pove browserju da ne bo generiral nobenega contenta - document.write in da naj nadaljuje s parsanjem in rendarjem strani. Zdaj je vprasanje ali defer atribut res odlozi nalaganje zunanje skripte dokler se content body ne sparsa??? Doloceni browserji bi naj imeli probleme s tem. Tudi
HTML 4.01 DTD pravi "UA may defer execution of script."
Bom magari ob priliki naredil kaksen test pa bomo potem lahko definitivno rekli ali uporabljati Js funkcijo ali defer atribut :)
Ja, s tem se nisem se nikoli kaj posebno igral, ce bos res naredil ta preizkus, obvezno porocaj, kaj si izvedel :)
defer atribut naj ne bi preprecil, da se skripta ne bi nalagala naprej, ce jaz prav razumem... povzrocil naj bi le to, da browser ne caka na output skripte, ampak mirno renderira vsebino naprej, ker ve, da nima cesa cakat... lahko pa se seveda tudi motim, nisem se kaj dosti s temi zadevami ukvarjal do sedaj :)