Extreme JS

API Flickr - Criando um mosaico de fotos

2010-04-08T10:15:00.000-07:00

Para quem deseja adicionar no seu blog ou no seu site um Mosaico com fotos do Flickr basta seguir o tutorial abaixo.
Vocês verão que é bem simples e fácil de implementar. Usando a API do próprio Flickr em conjunto com a JQuery.

1° Passo:
- Inserindo a JQuery:
Se você não tem ou não quer disponibilizar em seu dominio a API da JQuery, você pode chama-la através do Google usando a seguinte sintaxe:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

2° Passo:
- Configurando o CSS para o Mosaico:
    <style type="text/css">
    // Referente ao box do Flickr
    #contentFlickr {
        border: 0px;
        width: 240px;
        height: 340px;
    }
    // Links
    #contentFlickr a{
        border: 0;
    }

    // Referente a cada box de imagem
    .imgItem {
        border: 0;
        width: 80px;
        height: 80px;
    }
    </style>

3° Passo:
- Criar o elemento que receberá o Mosaico:

<div id="contentFlickr"></div>

4° Passo:
- Chamada JS para a API do Flickr com as fotos.

<script type="text/javascript">
/*
* URL com o JSON contendo as fotos
* Troque o valor do parametro ID (49502986292) pelo valor do Flickr que você deseja buscar as fotos
*/
var strUlr = "http://api.flickr.com/services/feeds/groups_pool.gne?id=49502986292@N01&lang=en-us&format=rss_200&format=json&jsoncallback=?";

/*
* Totalizador de fotos, atribua aqui a quantidade de fotos que você quer no Mosaico
*/
var totalPhotos = 9;

$.getJSON(strUrl, function(data){
$.each(data.items, function(i,item){
    if (i < totalPhotos){
        $("#contentFlickr").append('<a href="' + item.link + '" class="imgItem"><img src="' + item.media.m +'" class="imgItem"/></a>');
    }
});
});
</script>

O resultado final é este:

Se quiser personalizar, basta mexer no CSS agora ;)

* Desculpem pelo código meio solto no post, é que as tags PRE e o HighlightCode não funcionam de jeito algum no Blogspot.

Compreendendo o funcionamento do operador "delete" no Javascript.

2010-01-11T09:22:00.001-08:00

O que pode e não pode ser deletado no escopo de um código Javascript.

Artigo interessante, principalmente no que se refere ao diferente comportamento deste operador no Internet Explorer em em conjunto com o Firebug.

Link: http://perfectionkills.com/understanding-delete/

O conteúdo do livro referenciado no artigo também é muito válido, segue abaixo o link para o site da Amazon:

http://www.amazon.com/Object-Oriented-JavaScript-high-quality-applications-libraries/dp/1847194141

Webtop v0.0.3

2010-01-05T10:01:00.001-08:00

Publiquei ontem uma nova versão do Webtop, esse projeto na verdade está servindo como meu trabalho de conclusão, sendo que eu já havia começado há cerca de um ano.

Existem bugs para serem corrigidos ainda, como problemas nas instâncias de janelas, etc. Mas como resolvi remodelar a forma de organização de scripts e optei por utilizar outro plugin para interações nas janelas (JQuery UI) acabei me atrasando um pouco.

Página oficial do projeto: http://code.google.com/p/webtop/

DEMO : http://bit.ly/7R0MA0

Web em tempo real com XMPP

2009-12-30T09:49:00.001-08:00

Artigo interessante sobre a utilização da Strophe.js e XMPP.
A apresentação é uma espécie de tutorial sobre XMPP e o funcionamento da biblioteca JS para a comunicação do cliente / servidor.

Link do post: http://www.infoq.com/presentations/Real-Time-Web-with-XMPP

Trimpath - Javascript Template

2009-11-24T04:50:00.000-08:00

Uma das bibliotecas mais úteis que tenho utilizado para aplicações de médio e grande porte em Javascript é a Trimpath.
Para quem já está acostumado a trabalhar com separação de camadas de interface de dados, a biblioteca é uma "mão na roda".
Semelhante a soluções para PHP (Smarty e Template Power por exemplo) a sintaxe de marcas e a possibilidade de inserção de lógica no HTML facilitam muito o seu uso.

Como funciona?
- Baixe o ZIP da Trimpath em http://code.google.com/p/trimpath/wiki/JavaScriptTemplates.
- Você precisa apenas do arquivo trimPath.js que vem no pacote.
- Insira o arquivo no seu documento HTML.
- Chame a seguinte função para realizar o parse do template:
var result = TrimPath.parseTemplate(strTemplate).process(params);

Onde:
- strTemplate é a String que contém os dados a serem parseados (o seu template)
- params são os dados em JSON que serão inseridos na apresentação do template

Exemplo:
var strTemplate = "Oi ${fulano}"
var params = { fulano : "Cicero" };
var result = TrimPath.parseTemplate(strTemplate).process(params);

Pronto! Você já pode criar seus templates e separar a sua aplicação de uma forma mais organizada e prática.

Dicas:
O template não precisa necessariamente estar no próprio HTML. Requisite o conteúdo via Ajax, e armazene o responseText da requisição em uma String.

Lendo com mais calma a documentação você perceberá que os parametros JSON que você utiliza para o parse são facilmente identificaveis por tipo pela biblioteca. Como por exemplo quando você passa um array dentro do seu objeto, o mesmo pode ser percorrido atrav´s da sintaxe de LOOP da trimPath.

Ctrl + C Ctrl + V

2009-11-04T12:37:00.000-08:00

Slow class selectors

This method can be problematic with large html documents with thousands of DOM elements. Web browsers which aren't able to do efficient evaluations on class based selectors are seriously disadvantaged here as they need to trawl through the entire document tree to find the elements. Other browsers are better off, but it's still a high cost operation relative to the super fast id based selector.

Leia o resto em : http://ajaxian.com/archives/jquery-bondage

HTML 5 Database Storage

2009-10-15T10:15:00.000-07:00

Para quem está acompanhando as novas definições para HTML 5 já deve ter ouvido falar de tags como CANVAS, VIDEO, etc.
Mas uma das novas features as quais eu considero sensacional é o armazenamento interno de dados no navegador, não mais através de cookies, e sim utilizando um espaço especifico do aplicativo que permite guardar e organizar estas informações como em um banco de dados.

Até o momento essa feature já foi disponibilizada na última versão do Webkit, presente no Safari 4.
Um exemplo prático desta implementação esta em: http://webkit.org/demos/sticky-notes/ .
Neste caso foi criada uma aplicação que simula post-it´s que podem ser movidos e escritos em uma espécie de mural.

As informações de texto e posicionamento do conteúdo são armazenados em uma base de dados interna do navegador, com uma tabela especifica da aplicação.

Veja a imagem abaixo, onde através do Web Inspector podemos visualizar os dados armazenados:

O interessante disso tudo é que pelo menos no Safari o armazenamento é feito utilizando-se SQL LITE.

No fonte podemos visualizar como as query´s são executadas:

<font color="#cc0000">function loaded()
{
    db.transaction(function(tx) {
        tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
            loadNotes();
        }, function(tx, error) {
            tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) { 
                loadNotes(); 
            });
        });
    });</font>
<font color="#cc0000">}</font>

~~Espero que esta definição continue sendo seguida, e que no futuroa a Microsoft não invente de implementar isso no IE utilizando uma outra estrutura e até sintaxe de acesso aos dados.~~

Mais informações em : http://www.whatwg.org/specs/web-apps/current-work/

No Firefox 3.5: https://developer.mozilla.org/en/DOM/Storage

No Internet Explorer: http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx

Criando lightbox sem Javascript!

2009-09-08T12:26:00.000-07:00

Um dos elementos mais "Web2.0" presentes na atualidade é o "modal", ou lightbox, como preferirem. Este tipo de elemento tem como particularidade dar uma sensação ao usuário que ele não está acessando um outro documento/endereço no navegador, e faz com que o mesmo se sinta em uma espécia de Sistema Operacional Virtual.
O problema maior em implementar estas "caixinhas" de diálogo flutuantes está na compatibilidade delas com os outros navegadores (Firefox 2, Firefox3, Firefox 3.5, Safari, Chrome, IE 6, IE7, IE8, etc).
Para que a feature funcione em todos os navegadores são implementadas funcionalidades em Javascript que além de assumirem o comportamento esperado, realizam workarrounds para que o modulo funcione de forma eficaz para todos.

Imagine então implementar algo parecido, porém de uma forma mais simples, usando apenas CSS! Sim, apenas utilizando regras de herança e de semântica para que um modal simples, sem efeitos de transição seja exibido.
Seguindo esta linha, que surgiu a proposta de um tutorial disponibilizado no blog (carsonfield.com/blog) que cria um modal utilizando apenas CSS.

No blog o autor fala da compatibilidade da solução com diversos navegadores, entretanto tive alguns problemas de interface (background) no IE 6 de uma VM que utilizo aqui. Creio que é algo relacionado ao background transparente, o qual existem problemas para renderizar no IE 6.

Destaco a importância deste tutorial pelo fato de que atualmente a média de tamanho de plugins e JS´s para implementação de modal em conjunto com CSS supera o tamanho de 6Kb, sendo que neste caso do exemplo, temos apenas 900Bytes de CSS para a implementação de modais estáticos, sem necessidade de muitos efeitos e interaçoes.

O link do tutorial é : http://carsonified.com/blog/design/css/how-to-create-a-valid-non-javascript-lightbox/

[ OFF TOPIC ] Agilidade e Qualidade de Projetos

2009-07-09T12:37:00.001-07:00

Ainda sobre Agilidade e Qualidade de Projetos, o Fabio Akita postou um screencast sobre a sua apresentação, a mesma que sitei no post anterior sobre este assunto:

http://www.akitaonrails.com/2009/07/07/screencast-agilidade-qualidade-e-futuro

Agora vocês podem ver e ouvir o que rolou nessa palestra da Locaweb.

FISL - 1°Dia

2009-06-25T06:45:00.001-07:00

O post está atrasado por que o primeiro dia foi ontem, but...
Minhas impressões sobre a minha primeira ida ao FISL é que o local está bem organizado, tem muitos estandes de empresas conhecidas e a variedade de palestras está bem atraente.
Dentre as palestras que fui ontem duas se destacaram:
- Introdução ao desenvolvimento ágil
- CMS não é só BLOG e Notícias. O diferencial do Drupal na Secretaria de Saúde de AL.

Na sequência estou postando com calma o resumo das palestras, por que por aqui as coisas estão corridas.

[ OFF TOPIC ] Agilidade e Qualidade de Projetos

2009-06-18T10:55:00.001-07:00

Mês passado estive no 11° Encontro Locaweb de Profissionais da Internet, ocorrido em Porto Alegre.
Ainda estou devendo pro pessoal um resumo dos principais assuntos abordados no evento, mas com certeza além do Rene de Paula (Microsoft) outra palestra que me deixou super motivado foi a do Fabio Akita (http://www.akitaonrails.com/) que falava sobre Agilidade e Qualidade de Projetos.
Estou esperando os encontros acabarem para poder divulgar o material que será disponibilizado, mas enfatizo que os slides do Akita já estão disponíveis no slideshare pela url (http://www.slideshare.net/akitaonrails). Este meu post serve exclusivamente para ressaltar o tópico sobre os tipos de desenvolvimento de software (Clássico e o Caseiro - "D.O.S - Desenvolvimento Orientado á Sobrinho") e as formas de Desenvolvimento (Escopo X Qualidade) - (Slides 61 em diante no Encontro de SP). Neste tópico são mencionadas duas formas bem interessantes de abordagem:
- Projetos que o Escopo Fixo: deve ser seguido como a ponta prioritária da pirâmide, tendo seus prazos cumpridos, porém com a qualidade duvidosa na entrega, onde "se livrar da responsabilidade" é algo prioriário.

- Projetos de Escopo Variável: mas com a Qualidade no Topo da pirâmide, onde o objetivo é compatilhar responsabilidades gerando confiança. Neste caso algumas features são postergadas, e em alguns casos até removidas, mas a qualidade é bem mais alta.

Nunca tive muito interesse em ser um Gerente de Projetos, gosto muito de desenvolver, entretanto nesses slides vi muita coisa que realmente é interessante para o nosso dia e situações que podem ser contornadas através de outras possibilidades de análise.
Assim que o material do evento for divulgado, posto o resumo aqui.

Performance de JS - Direto no BIT

2009-06-17T11:56:00.001-07:00

Este post é baseado em algumas definições apresentadas nos Slides de Nicholas C. Zakas, Principal Front End Engineer do Yahoo! e um dos desenvolvedores do YUI. Vou apresentar superficialmente o que está na apresentação, mas sugiro que vocês a vejam slide por slide, já que são 90 páginas e todas com observações bem importantes.

A URL da apresentação é : http://www.slideshare.net/nzakas/speed-up-your-javascript

Por que o Javascript é tão lento?
O Javascript torna-se lento devido à forma que a implementação é realizada. No meu primeiro post no blog eu mencionei as vantagens quanto ao bom e mau uso de frameworks Javascript, mais especificamente da JQuery.

No quesito de performance, alguns tópicos devem ser analisados:
- Gerenciamento de Escopo
- Acesso à dados
- Loops (Repetições)
- DOM (Document Object Model)

Darei importância aos 3 últimos itens, apresentando uma breve descrição do primeiro (o que não o torna menos importante).

Gerenciamento de Escopo
Brevemente falando, todas as vezes que uma função é executada pelo Javascript uma série de encadeamentos são disparados, e executados como processos em paralelo.
Algumas instruções destes procedimentos são executadas de forma desnecessária, já que o algoritmo não consegue interpretar o que virá pela frente.
Para evitarmos que este encadeamento seja percorrido à cada instrução presente em nossa função, uma das mais importantes colocações é quanto ao armazenamento de variaveis, que sugere a declaração de elementos globais como variaveis pertencentes ao escopo interno da função.

Ex.:
function exemplo1(){
    // A declaração do objeto DOCUMENT no escopo da função, evita que o interpretador fique "entrando" e "saindo" do escopo da função para buscar valores
    var doc = document;
    var divs = doc.getElementsByTagName("divs");
    var images = doc.getElementsByTagName("img");
    return true;
}

Outro detalhe, NUNCA esqueça do VAR antes de declarar uma váriavel, caso contrário ela será tratada como GLOBAL e o fluxo de encadeamento é quebrado, prejudicando a navegação pelo escopo definido.

Acesso à dados
Este item é bem importante, seguindo a linha de raciocínio especificado no item anterior, temos as seguintes colocações:
- Acessar dados literais ou de variáveis locais é algo rápido.
- Acessar dados de uma propriedade (atributo) de um objeto ou array é muito mais custoso (variando de browser para browser).

- Acessar objeto.name é mais rápido do que objeto.name.name;
- Quanto mais profundo o nível da propriedade, mais custoso é o acesso.

Property Notation
O acesso à objetos em Javascript pode ser realizada de duas formas:
- Com ponto : objeto.nome
- Com colchetes (como um array associativo) : objeto["nome"]

A diferença entre as duas está apenas na sintaxe, com excessão do Safari, que processa mais rápido a primeira opção.

Recomendações:
- Armaneze niveis de acesso de objetos em variáveis locais, dentro do escopo da função ou método, especificamente quando estes são acessados de forma repetitiva.
- Minimize o nível de atributos/propriedades em objetos, lembre-se: quanto mais complexa a estrutura, mais lento é o processamento.

Ex.:
function exemplo2(arrData){
    for(var a = 0; a < arrData.length; a++){
        alert(arrData[a]);
    }
}

O exemplo acima realiza o loop em um array (bem óbvio), entretando a CADA volta do Loop, o array é novamente acessado, e medido. Ou seja, você está realizando a contagem de todas posições ocupadas à cada volta do Loop. :S

Agora observe o exemplo abaixo:
Ex.:
function exemplo3(arrData){
    var arrSize = arrData.length;
    for(var a = 0; a < arrSize; a++){
        alert(arrData[a]);
    }
}

ÓTIMO, E O QUAL O GANHO DISSO?
Vamos então aos números:
- Firefox ganho de 5%;
- Safari ganho de 10%;
- Internet Explorer ganho de 33%;

Loops / Repetições:
Neste processo devemos ter cuidado à quantidade de instruções por interação e principalmente termos uma condição de parada eficaz.

Ex.:
var len = 5;
for(var i = 0; i < len; i++){
// faça alguma coisa
}
No exemplo acima temos duas instruções repetitivas:
i < len;
e
i++

Podemos simplificar esse processo da seguinte forma:
for(var i = len; i--){
// faça alguma coisa , agora mais rapido!
}

QUAL O GANHO COM ISSO?
Somente 50%. :)

DOM (Document Object Model)
Objetos de uma HTMLCollection (document.images, document.forms, getElementsByTagName, getElementsByClassName, etc).

Coleções em HTML DOM assumem-se como "vivas" pois são automaticamente atualizadas cada vez que a estrutura do documento sofrer modificações.

Vejamos o exemplo:
Ex.:
var divs = document.getElementsByTagName("div");
for(a = 0; a < divs.length; a++){
    var div = document.createElement("div");
    document.body.appendChild(div);
}

No exemplo acima acabamos de criar um loop infinito! Isso por que a cada interação a variavel "divs" é acessada, e o DOM é reparseado para sua contagem, e já que estamos inserindo um elemento novo a cada interação, não teremos um fim nunca.

Entretanto se seguirmos a seguinte linha:

Ex.:
var divs = document.getElementsByTagName("div");
for(a = 0, len = divs.length; a < len; a++){
    // Faça alguma coisa
}

Atribuimos o tamanho do elemento à uma nova variável, a qual pertence apenas ao escopo do FOR, e que não será reparseada em casos de modificações no documento.

Obs.: Da mesma maneira que sugerimos o armazenamento de variaveis GLOBAIS como LOCAIS no gerenciamento de escopo podemos aplicar esta regra também para o DOM.

Reaproveitamento
Este tópico também recebe destaque no que se refere à modificações de layout de um elemento. Como de costume fazemos isso acessando o elemento através do atributo "style" e por fim a propriedade desejada.
Ex.:
document.getElementById("myDiv").style.display = "block";
document.getElementById("myDiv").style.border = "1px solid #FF0000";

No exemplo acima estamos obrigando o interpretador acessar toda a àrvore dde propriedade do elemento "myDiv" duas vezes, o ideal é evitarmos mudar propriedades de elementos desta forma, realizando esta configuração através de classes especificas de CSS.

Ex.:
document.getElementById("myDiv").className = "estilo1";

e no CSS teremos a configuração desejada:

.estilo1{
    display: block;
    border: 1px solid #FF0000
}

Page Speed: complemento para o Firebug que possibilita a medição de carga e análise de otimização da página

2009-06-08T11:08:00.000-07:00

Buenas pessoal, Richard Rabbat and Bryan McQuade desenvolveram uma ferramenta para a análise e sugestão de melhorias para carga de websites, baseados em normas de performance e desenvolvimento web.

A serventia desta ferramenta é agir em cojunto com o Firebug, e ter um comportamento parecido com o YSlow do Yahoo, entretanto ela é interessante pois já apresenta um relatório do que pode ser melhorado e como pode ser melhorado, além do mais existe uma opção chamada Page Speedy Activity específica para análise de parse e execução de códigos Javascript.

Para instalar esse add basta ter o Firefox e o Firebug instalado.

O link para o projeto é este (http://google-code-updates.blogspot.com/2009/06/introducing-page-speed.html)

sendo que de brinde temos uma especificação sobre Web Performance Best Practices do Google, o que creio ser algo muito parecido com o do Yahoo, mas que pode possuir algumas particularidades interessantes.

Estas especificações sobre melhoria de carga e desenvolvimento envolvem a combinação de arquivos Javascript, CSS Sprites, limitação no número de domínios requisitados entre outras, realmente é um plugin super interessante que vale a pena ser instalado.

Importando e exportando Dados HTTP com o Firebug

2009-06-03T14:13:00.000-07:00

Jan Odvarko do Firebug Team critou um novo plugin que nos permite a exportação dos dados do Firebug no Formato HTTP Archive (JSON) e a visualização destes dados através de uma interface Web, apresentando-se da mesma forma que é feito no Firebug.

A vantagem deste plugin é o fato de você poder armazenar o histórico em JSON das cargas e trafégo realizados pelo seu HTML.
O Firebug na sua versão atual não permite que você realize esse procedimento.

É importante avisa-los que na própria descrição do plugin, o autor informa que é necessária no mínimo a versão 1.4a26 do Firebug.
No site oficial a versão disponível é a 1.4.0b1 , entretanto esta versão é compatível apenas com o Firefox 3.5b4.
Para utilizar na versão estável do Firefox (3.0.10) você pode baixar as outras versões neste link.
Aconselho você a utilizar a mesma versão mencionada antes (1.4a26), pois tentei baixar as mais recentes e houve incompatibilidade com o plugin.

O download do add para o Firebug está disponível em:
http://getfirebug.com/releases/export/1.4/

Baixe a versão 0.6.

Você verá que após reiniciar o seu navegar estará disponível a opção export no menu "Rede".
Ao clicar em exportar um arquivo JSON será gerado para você.

Cole o conteúdo deste arquivo no formulário deste site e você poderá visualizar o histório de rede (carga) do site que foi medido.

http://www.softwareishard.com/har/viewer/

Um detalhe muito importante é que você pode salvar em seu PC este serviço de análise, bastando "Salvar Como" o documento principal, e verificando se o relacionamento entre os arquivos JS e CSS do site ficaram com a localização correta.

O que eu ganho com isso?
O caso de uso para este plugin é bem específico, tenho trabalhado muito com análise de carga e desempenho de sites e realmente o trabalho para documentar estar informações de forma visual e clara é bem cansativo e trabalhoso.

Por fim, não posso deixar de relatar a fonte de onde busquei este artigo, http://www.ajaxian.com.

Ainda sobre frameworks Javascript

2009-06-02T12:31:00.000-07:00

Esta semana enquanto lia alguns feeds me deparei com uma matéria super interessante do Fabio Nagao para o IMASTERS.

Matéria: JQuery vs Mootools - Como escolher?

Ela relata a diferença entre a utilização da JQuery e a Mootools, o que aparentemente para quem não conhece seria "quase" a mesma coisa, por se tratarem de frameworks e por serem em Javascript.

O fato de você ter uma biblioteca com um objeto chamado "$" para acessar elementos do DOM ou realizar efeitos especiais no seu HTML não quer dizer que tratam-se de frameworks iguais (JQuery, Prototype, Ext, Mootools, etc).
Variantes como: contexto, nível de conhecimento e necessidade podem leva-lo a usar um framework ou outro, sendo cada caso um caso.

Sugiro que você leia atentamente e com calma o texto da matéria, pois realmente é bem interessante.

Javascript Frameworks: Boa e má utilização

2009-05-06T08:04:00.000-07:00

Trabalho com Javascript há alguns anos e admito que a sua utilização tem se tornado de extrema importância para os meios de desenvolvimentos atuais.

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.