3 Dicas de performance de CSS

Publicado em Publicado por gserrano

O primeiro passo para se discutir a performance da renderização das páginas no navegador é entender como o navegador funciona.

Antes de continuar você deve entender os conceitos de browser reflow e browser repaint, pois nosso objetivo para ter uma página renderizada mais rapidamente é a redução dos reflows e repaints da página.

Como o navegador interpreta o CSS?

O navegador começa a leitura do CSS da direita para a esquerda, do nosso último elemento para o primeiro. Ele pega o seletor bem da direita, percorre todos os elementos do DOM que casem com este seletor e passar para o próximo seletor a esquerda, verificando os parents do seletor que ele verificou anteriormente (o bem da direita na sua linha de seletores).

Parece confuso mas na prática é simples. Para o código abaixo, por exemplo:

#content #menu ul li a

O navegador vai varrer todos os elementos "a" da sua página, depois ele vai verificar quais destes elementos estão dentro de um elemento li e assim por diante até encontrar o elemento #content.

Agora que você já sabe como o navegador trabalha vamos as dicas de CSS para páginas rápidas!

 

1. Escreva seletores curtos

Agora que você já sabe como o navegador percorre o seu seletor, já sabe quanto mais curto ele for menos será o caminho percorrido e consequentemente mais rápida a renderização da sua página.

Evite

#content nav#menu ul li a

 

Melhor performance CSS

.menu-item

 

Outro exemplo, em uma página com bastante conteúdo tabular:

Evite

table thead tr td

 

Melhor performance CSS

.header-table

 

2. Prefira classes e ids do que seletor por elemento

Quanto mais preciso seu seletor for menos elementos do DOM serão percorridos pelo browser, o seletor de tag tende a ser mais abrangente do que seletor de classe.

Evite 

h2.product-title

Melhor performance CSS

.product-title

 

Evite

nav#menu

Melhor performance

#menu

O navegador não precisa fazer 2 verificações para estilizar os elementos casados com a classe.

 

3. Evite seletor universal, por atributo e pseudo-selectors

Principalmente no IE evite os pseudo seletores como :hover, :nth-child e outros. O seletor universal percorre todos os elementos do DOM (por isso a baixa performance) e os pseudo seletores tem uma performance bem inferior do que qualquer seletor por classe ou id, então sempre que for possível evite seu uso.

Evite:

input[type="text"]

Não tão ruim:

input.texto

Melhor performance CSS:

.input-texto

 

Dica bônus: não enlouqueça

Não seja um paranóico, não deixe que as preocupações com performance de CSS prejudiquem (muito) a organização e leitura do seu código.

Se você trabalha em projetos com uma equipe grande em que todos estão acostumados a escrever seletores descritivos (e compridos) para facilitar o entendimento do código pode ser um pouco complicado fazer esta mudança, uma boa dica é estimular comentários no CSS – qualquer processo de minify arrancará os comentários e manterá o código enxuto.

 

Para saber mais sobre performance no front-end veja este post sobre performance de javascript e o recente post do Chris sobre manipulação do DOM de forma mais performática.

Se está na dúvida (ou não acredita no que escrevi), utiliza esta ferramenta para testar a performance de seletores CSS.

 

Referências:

Melhorando a performance do CSS

Escrevendo CSS eficiente

Google best pratices rendering

Mozilla – Writting effective CSS

Simplifying CSS selectors

Criar elementos no DOM com DocumentFragment

Publicado em Publicado por gserrano

O uso do DocumentFragment para criação de nós no DOM é muito importante no que diz respeito a performance do seu javascript, quando é necessário fazer a inserção de vários elementos de uma vez só.

DocumentFragment é um container para nós DOM, que  pode receber elementos e depois ser adicionado (através do método appendChild) a um nó. O benefício se dá tanto na performance do script (como veremos logo mais, e também pode ser visto nesse post do John Resig) como na renderização da página (reflow e repaint) no browser, uma vez que ao invés de ter que adicionar n elementos, um a um, eles são adicionados de uma vez só.

Abaixo tem um trecho de código usando o DocumentFragment, exemplificando o uso:

var div = document.getElementById("minha_div"); //passo 1
var fragment = document.createDocumentFragment();
for(var i=0; i<100; i++) {
 var d = document.createElement("p");
 fragment.appendChild(d); //passo 2
}
div.appendChild(fragment); //passo 3

O uso é bem simples: deve-se criar um DocumentFragment, atribuindo a uma variável (passo 1), então para cada elemento criado esse elemento é adicionado ao documentFragment (passo 2) e, por final, se adiciona o DocumentFragment ao element que será o container desses nós no DOM.

Aqui http://jsfiddle.net/chrisbenseler/RQ28C/ tem um teste comparando a criação com e sem DocumentFragment; para criar 5000 elementos

e adicionar a uma div, com DocumentFragment o browser (Firefox 14.0.1 do Ubuntu) leva em média 230 milisegundos; já sem, 330 milisegundos.

Lazy Load – Documentação e demo

Publicado em Publicado por gserrano

Nas últimas semanas participei do Front in Curitiba e esta semana participei da trilha de front-end do The Developers Conference, os eventos e conversas de corredor deram uma animada para eu continuar  brincando com código e terminar o Pong em HTML5, que quero integrar com NodeJS para tornar multiplayer.

Mas antes disso resolvi melhorar o repositório do jQuery Lazy Load, criar uma mini-documentação (que é tudo que o plugin exige) e uma página de demo.

Na documentação exemplifiquei como deixar um fallback para usuários com javascript desabilitado, o plugin ainda não teve nenhuma atualização de código, mas os próximos passos são:

  • Parametrizar as configurações
  • Documentar e exemplificar o uso de imagens de loading
  • Criar a página em inglês da documentação e demo

Espero que a documentação seja útil! 🙂

PHP – upload de arquivos com POST

Publicado em Publicado por gserrano

Sempre que implemento algumas coisas no And After surgem mil idéias para posts aqui no O Desenvolvedor, desta vez vou abordar como lidar com upload de arquivos com PHP através do método POST.

 

Formulário para envio de arquivo

Para permitir o upload de arquivos com PHP o formulário deve ter o atributo enctype da seguinte forma:

form enctype="multipart/form-data" action="post.php" method="post"

E o campo de arquivo, onde o usuário vai selecionar o arquivo que será submetido através do método POST"

input name="userfile" type="file"

Upload de arquivo com PHP

Na sua página PHP que receberá o post do formulário você terá acesso ao objeto $_FILES, que será um array com todos os arquivos submetidos no post.

Para acessar um arquivo específico, usamos o valor do atributo "name" que foi utilizado no inpute de arquivo no formulário, no exemplo anterior o nome é "userfile", portanto teremos $_FILES['userfile'].

Para visualizar no navegador todas as informações existentes no objeto faça o seguinte:

print_r($_FILES['userfile']);

Você terá

  • $_FILES['userfile']['name']
  • $_FILES['userfile']['type']
  • $_FILES['userfile']['size']
  • $_FILES['userfile']['tmp_name']
  • $_FILES['userfile']['error'] (veja a lista de código de erros do upload PHP)

Com estas informações você pode aplicar toda a lógica e tratamento necessário como verificação da extensão, tamanho, nomenclatura do arquivo, etc.

Perceba que o arquivo é salvo temporariamente no servidor, portanto neste ponto do código não existe nenhuma mágica, o upload já foi feito e você só precisa mover e renomear o arquivo para onde você deseja.

Função move_uploaded_file

Depois de fazer os tratamentos necessários no PHP, você pode utilizar a função move_uploaded_file para mover o arquivo para o diretório onde ele deverá ficar (veja como criar pastas em PHP).

$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . $_FILES['userfile']['name'];
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploaddir . $_FILES['userfile']['name'])) {
    echo "Upload com sucesso";
} else {
    echo "Erro no upload";
}
print_r($_FILES);

Espero ter ajudado no entendimento de como funciona o upload de arquivos com PHP, atualmente deixo o Code Igniter gerenciar quase tudo isso nas minhas aplicações. 🙂