Há um certo tenho venho preparando conteúdo sobre alto desempenho e boas práticas em JavaScript. Um fato que me motivou a estudar ainda mais sobre o assunto foi o desempenho de algumas aplicações em ExtJS que desenvolvo. Algumas delas, por sua própria constituição, possuem muitos campos que precisam ser preenchidos de uma só vez pelo usuário. Apesar de utilizar de algumas boas práticas, notei que precisava de algo mais, algo que elevasse o desempenho causando o mínimo de impacto ao desenvolvedor. Uma das soluções que encontrei foi o carregamento de scripts sob demanda.

A ideia em si é bastante simples: Carregar as classes apenas quando realmente for precisar delas. Desta forma podemos carregar

Quando o navegador encontra uma tag script, ele para de renderizar a página e inicia o download do arquivo. Em alguns casos isso pode fazer com que a aplicação leve muito tempo para carregar. Aí que entram as opções de carregamento posterior seletivo e de desbloqueio.

Uma opção é carregar inicialmente apenas os scripts necessários criando dois arquivos, um deles com o script para carregar dinamicamente os arquivos e outro com apenas o básico para sua aplicação roda. Fique tranquilo, o restante será carregado.

O primeiro arquivo conterá o seguinte código:

function loadScript(url, callback) {

var script = document.createElement(“script”)
script.type = “text/javascript”;

if (script.readyState){  //IE
script.onreadystatechange = function(){
if (script.readyState == “loaded” ||
script.readyState == “complete”){
script.onreadystatechange = null;
callback();
}
};
} else {  //Others
script.onload = function(){
callback();
};
}

script.src = url;
document.body.appendChild(script);
}

O seguindo arquivo, deverá conter apenas o básico para sua aplicação, não importa o conteúdo, desde que seja minificado e seja do menor tamanho possível. Nós queremos um carregamento rápido e que não bloqueie a renderização.

loadScript(“TotalApplicationCode.js”, function(){
Application.init();
});

O código HTML de sua página será mais ou menos este:

<html>
<head>
<title></title>
</head>
<body>
<script type=”text/javascript” src=”loadScript.js”></script>
<script type=”text/javascript” src=”BasicApplicationCode.js”></script>
<script type=”text/javascript”>
loadScript(“TotalApplicationCode.js”, function(){
Application.init();
});
</script>
</body>
</html>

O primeiro parâmetro do método loadScript será a URL do arquivo a ser baixado. Já o segundo, será a função de callback, que será executada assim que o arquivo for carregado.

Eu li sob sobre este recurso originalmente no livro “High Performance JavaScript, by Nicholas C. Zakas. Copyright 2010 Yahoo!, Inc., 987-0-596-80279-0”.

Se você desenvolve com ExtJS, talvez possa se interessar por este post: http://www.extdesenv.com.br/tutoriais-estudos/carregar-codigo-ext-sob-demanda/

Anúncios