Performance em Aplicações ASP.NET (Parte 2): Minimizando arquivos Javascript e CSS com YUI Compressor

parte 1: https://fpimentel88.wordpress.com/2009/01/20/analisando-e-melhorando-a-performance-em-aplicaes-aspnet-parte-1/

1. Introdução

Cada espaço em branco, cada caractere, cada quebra de linha de um arquivo Javascript e CSS ocupam espaços. Ou seja, quanto mais caracteres deste tipo seus arquivos tiverem, maiores serão seus tamanhos. Ou seja, a seguinte função…

   1: function yuiCompressor(){
   2:
   3:
   4:
   5:     var el = document.getElementById("idPessoa");
   6:
   7:
   8:
   9:     alert(el.id);
  10:
  11:
  12:
  13: }

…Ocupa mais espaço que esta outra:

   1: function yuiCompressor(){var el = document.getElementById("idPessoa");alert(el.id);}

Mais vocês concordam comigo que é inviável programar da segunda maneira, certo? Pois é, por isso que existe o YUI Compressor e tantos outros compressores de arquivos Javascript e CSS. Eles existem justamente para minimizar esses tipos de arquivos, tirando todo tipo de caractere desnecessário.

Então a idéia é bem simples. Trabalhamos normalmente com os arquivos, “sem” se preocupar com espaços e quebras de linhas. E antes de publicar o site, utilizarmos o YUI Compressor para minimizar os devidos arquivos.

2. Minimizando os Arquivos

Existem duas maneiras de utilizar o YUI Compressor:

  1. Através do próprio site (http://www.refresh-sf.com/yui/)onde você informará a entrada e o sistema dará a saída. Tudo isso on-line.
  2. A segunda maneira é através da linha de comando (É necessário ter JAVA instalado na máquina).

No nosso caso vamos minimizar os arquivos via linha de comando, pois em futuro um post irei mostrar como integrar o YUI Compressor com o Cruiser Control.

Para minimizar o nosso arquivo, vamos seguir os seguintes passos:

  1. Baixe o YUI Compressor no seguinte link: http://www.julienlecomte.net/yuicompressor/
  2. Crie um arquivo javascript (.js) e um css (.css) e salve em qualquer local na sua máquina (no meu caso:  “C:\Files\JS1.js e C:\Files\CSS1.css”).Os arquivos devem conter qualquer conteúdo. É apenas um teste.
  3. Abra o prompt command e vá para o diretório onde se encontra a pasta build dentro de YUI Compressor.ScreenShot001
  4. Agora execute o seguinte comando para gerar uma saída de acordo com o arquivo de entrada.“java -jar yuicompressor-x.y.z.jar C:\Files\JS1.js -o C:\Files\JS1-min.js”

    ScreenShot002

  5. Pronto!!! Agora já temos nosso arquivo .js minimizado. Simples né? Agora, é só repetir a operação para os arquivos .css e .js que você tiver.

Abraço a todos!

Release do jQuery 1.3 já pode ser baixada

ScreenShot002

No dia 14 de janeiro foi colocado à disposição dos desenvolvedores a nova versão do jQuery.

Não tive tempo ainda para testar e brincar com a nova versão, mas pelo o que andei lendo e vendo, o foco do time de desenvolvimento foi a PERFORMANCE.

As novidades que destaco são:

  1. Melhoria na performance dos selectors
  2. Live Events: Novo modo de tratar eventos. Onde os eventos podem se ligar à todos os elementos de modo fácil e RÁPIDO.
  3. Injeção de HTML foi rescrito: Sabe os modo de inserir HTML no documento? Pois é, todos foram rescritos com foco em PERFORMANCE. A melhoria foi absurda.
  4. Método .offset() foi rescrito: a intenção de rescrever esse método foi a performance também, que aumentou muito no jQuery 1.3.
  5. A nova versão roda em grande parte (para não dizer todos) dos browser que já existem e que ainda estão por vir.

Legal né? Pois é… Nesta versão o jQuery parece ter sofrido várias modificações para melhor, muito melhor.

Para maiores informações acessem o link:

http://docs.jquery.com/Release:jQuery_1.3

Espero que tenham gostado. Abraços!

Analisando e melhorando a performance em aplicações ASP.NET (Parte 1)

tempo

1. Nova série de artigos

Estou atualmente envolvido em um projeto em um cliente da i9 (empresa em que trabalho – www.inoveinformatica.net), e o caso lá ERA bem crítico:  prazos apertados, falta de metodologia de desenvolvimento, falta de padrão de codificação, entre outras coisas. Então, atualmente estamos focando em dois grandes problemas:

  1. Melhorar a performance do sistemas;
  2. Melhoria nos processos de desenvolvimento;

Andei pensando, e decidi escrever uma nova série de artigos. Para ser sincero duas novas séries, uma para cada foco nosso nesse cliente. Ou seja, teremos uma série sobre a implementação de uma metodologia ágil e uma outra sobre a melhoria da performance em aplicações ASP.NET.

A semelhança dessas duas séries é que ambas vão ser passadas para vocês, caros leitores, baseadas em fatos reais, ou seja, irei postar de acordo com o que for acontecendo diariamente no ambiente de trabalho.

Então, quem sabe, depois de ler estes posts você não tome mais cuidado ao codificar ou ao tentar implementar uma metodologia, até para não cometer os mesmos erros que cometemos.

Hoje dou início oficialmente à série de artigos sobre performance em asp.net, onde iremos falar sobre muita coisa: desde ferramentas, à possíveis gargalos, soluções…

Como eu já postei um artigo hoje ( https://fpimentel88.wordpress.com/2009/01/20/aprendendo-c-parte-2-modelo-desconectado-de-acesso-ao-banco-de-dados/ ), irei ser breve nessa primeira parte. O foco nesse primeiro post será falar um pouco dos problemas que estamos passando no projeto, para só então nos posts posteriores falar sobre cada método que utilizamos.

2. Como tudo começou…

Antes eramos apenas 3 desenvolvedores trabalhando em um mesmo projeto. Tinhamos total controle sobre o sistema, tinhamos um padrão de codificação já que a equipe era pequena.

Mas o cliente começou à gostar dos nossos serviços e começou a perceber o que poderiam fazer com a tecnologia,  o quanto o software poderia ajudar na automação e/ou informatização nos processos internos da empresa.

Então a equipe começou a crescer. Mas como não havia um padrão formal de codificação, cada um codificava de seu modo, e fazia o que achava melhor.

O sistema cresceu bastante, mas com sérios problemas de desempenho, tendo páginas que demoram 17 segundos para serem carregadas ( \o/ ). Então, um de nossos focos é este: arrumar um modo de melhorar a performance em aplicações asp.net.

3.  Possíveis pontos críticos  em aplicações asp.net

– Todos os Scripts e CSSs adicionados na Master Page;

– Código mal codificado;

– Stored Procedures pouco performáticas;

– Chamadas desnecessárias ao banco;

– Utilização errada de Javascript;

– Utilização do UpdatePanel de maneira errada;

– ViewState muito pesado;


4. Finalizando

Em futuros posts iremos atacar, isoladamente, cada ponto destes. Então podem aguardar que muita novidade está por vir.