Sou do tempo que Javascript era utilizado para dar "alert´s" ao usuário, validar um formulário explodindo um OK/CANCELAR na cara do usuário dizendo que ele esqueceu de preencher o campo "nome".
Entretanto os tempos mudaram, surgiu o conceito de "Web 2.0", começou-se a utilizar o Javascript para o carregamento de conteúdo dinâmico (Ajax), diversos frameworks surgiram (JQuery, Ext, Prototype, Mootools, etc). Porém o objetivo destes "ajudantes" digamos assim, é de facilitar a vida do programador, reduzindo quantidade de código, abstraindo e incorporando uma série de funcionalidades e features que visam facilitar o desenvolvimento.
Mas se olharmos mais a fundo, surge a questão: O quanto performático são estes frameworks? Quando e como devemos utiliza-los?
Escrevi este artigo para retratar de uma forma simples e básica o que defendo. Sei das facilidades que a JQuery proporciona por exemplo, é muito mais rápido você buscar um elemento específico escrevendo :
$("#myDiv")
do que:
document.getElementById("myDiv")
Buscar um elemento por seu className então, nem se fala.
Porém, como mencionei antes, você sabe qual é o custo desta facilidade?
Vamos aos números:
- Utilizando a JQuery para obter o "node" de determinado elemento com um ID único o tempo estimado é de 1,5ms (milisegundos)
- Utilizando a forma clássica o tempo reduz para 0,34ms (milisegundos)
O resultado é o mesmo, porém como vemos a forma clássica (utilizando a sintaxe direta do JS) é mais 3X rápida.
Não podemos levar em conta que isso é uma valor irrisório quando temos usuários utilizando conexões cada vez mais rápidas, sendo que isso também influência o tempo de processamento do lado do cliente, realizado pelo browser.
Esses números se justificam quando levamos em conta a utilização de plugins para JQuery por exemplo, um plugin chamado ZOOMTHUMB que realiza uma aproximação de um thumb no HTML pode ser facilmente replicado de forma clássica de desenvolvimento, mesmos que com algumas linhas a mais.
Observe o comparativo:
- JQUERY + PLUGIN ZOOMTHUMB
Total de chamadas executadas: ~500
Tempo de execução: 28ms
- Modo Clássico (Sem JQuery, sem Plugin):
Total de chamadas executadas: 4
Tempo de Execução: 1,1ms
Quero que compreendam que não estou implicando com o uso da JQuery, ou qualquer outro framework e seus plugins, apenas considero e defendo que devemos avaliar quando e como usar estes recursos.
A justificativa de reduzir quantidade de código não é válida de forma isolada. ;)
Nos testes que realizei foi de grande ajuda o add-on Firebug (para Firefox), o qual você pode realizar um teste mais detalhado do que é executado, e qual chamada consome mais tempo dentro do seu script.
