Category: Otimização


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

O The Developers Conference é um evento organizado pela Global Code e reune diversas comunidades de desenvolvedores, desde Java, passando por CSS3, HTML5 e chegando ao PHP.

O evento que já ocorreu em São Paulo de 06 a 10 de Julho, será agora realizado em Florianópolis, nos dis 20 e 21 de agosto. Será composto por 14 trilhas nos dois dias de evento.

No ano passado, pude comparecer ao evento como congressista e isso me incentivou a submeter na edição deste ano a palestra que venho idealizando a um certo tempo. Soube na última sexta-feira (29/07) que ela foi aprovada. Maneiro!

O título da palestra é “Alto Desempenho e Boas Práticas em JavaScript”. O objetivo dela é levar aos desenvolvedores e interessados técnicas e atitudes que elevam o desempenho de suas aplicações que utilizam o JavaScript. Originalmente foi idealizada para aproximadamente 2 horas porém, para este evento foi condensada para ocorrer em 50 minutos.

Infelizmente, não será possível explicar de forma aprofundada cada técnica apresentada mas, creio que será o suficiente para fazer com que os presentes em sala tenham interesse em pesquisar sobre estas técnicas e no futuro desenvolverem suas aplicações com mais qualidade. É isso que importa: desenvolver com mais qualidade.

Para mim, será um desafio profissional pois será minha primeira palestra fora do ambiente acadêmico mas, darei o meu melhor para fazer valer a pena a presença de todos. Vejo vocês lá.

TDC 2011 - Florianópolis

Para acompanhar informações sobre o evento no twitte, siga @thedevconf.