O que é browser reflow?

Com o crescimento da banda larga e a evolução da web como um todo, a preocupação de performance deixou de ser exclusividades dos desenvolvedores back-end e se tornou uma grande preocupação de front-end.

Essas preocupações me levaram a melhorar muito meu código javascript (vejas estas dicas de performance em javascript) e aqui no iG comecei a estudar melhor a forma que os navegadores trabalham a fim de melhorar a performance desde a parte do HTML.

O que é browser reflow?

O "browser reflow" é uma tarefa do navegador que calcula o posicionamento e dimensão de todos os elementos da sua página. O navegador percorre toda a árvore DOM mesclando a estrutura do HTML com o CSS (externou ou inline) que fica na "style structure", isso forma a Render Tree, que é o que nós visualizamos.

A cada reflow, todos os elementos tem o tamanho e reposição calculadas, por isso que um excesso de reflow causa mais processamento e consequentemente páginas com uma renderização mais demorada.

Para entender melhor o que é um reflow, assista o vídeo de como o navegador renderiza o HTML, neste mesmo post.

O que é um repaint?

Repaint é quando acontece uma alteração visual no elemento (cor, background) que não altera suas dimensões (margem, padding, largura ou altura). O repaint é menos custoso em termos de processamento.

 

Minimzando o browser reflow

Agora que você já sabe o que é reflow e sabe o impacto na performance da exibição da página, a redução do desse processamento se torna mais importante para saber como fazer páginas rápidas.

O Google tem um vídeo bacana (em inglês) com algumas dicas para minimizar o reflow:

Dicas para manter suas páginas mais rápidas

  • Minimize o browser reflow
  • Reduza o HTML desnecessário do DOM e tente manter a árvore o mais "raza" possível. Quando uma alteração é feita em algum elemento ele causa efeitos em toda a árvode DOM, quando menos profunda ela for mais rápido será o reflow e qualquer outra manipulação no DOM.
  • Minimize o CSS e remova CSS que não é utilizado – o CSS é "interpretado" para formação da render tree, e o CSS "sobrando" sem dúvida vai tornar a render tree mais lenta, refletindo diretamente na experiência do usuário ao navegar nas suas páginas.
  • Para fazer animações e layouts mais complexos, sempre que possível faça isso fora do "reflow", para isso utilize posição absoluta ou fixed.
  • Evite seletores de CSS complexos, quanto mais profundo e complexo for um seletor mais custoso em performance será para mondar a render tree da página.

 

Como o browser renderiza sua página?

Para exemplificar melhor os assuntos que tratamos, abaixo tem um vídeo da Mozzilla, que mostra como o browser trabalha para renderizar uma página.

Não deixe de ver a apresentação sobre performance em javascript, outro fator muito importante quando falamos de performance no front-end.

Vamos fazer uma web mais rápida? 🙂

Referências:

Googl e code

Tableless

Como escrever um bom HTML em 3 passos

Como muitos de vocês sabem estou em uma empreitada maluca não só para me tornar um Jedi em PHP mas também para ter um bom domínio em uma ferramenta que não é um sabre de luz mas chega perto: o Code Igniter.

Para isso estou fazendo o que todo desenvolvedor adora fazer em suas folgas: devorando documentação e passando algumas madrugadas fazendo testes.

Entre os estudos entrou o desenvolvimento do And After todinho baseado no Code Igniter – e é bastante coisa. Cheguei na vez de portar O Desenvolvedor para o CI, e no meio do caminho resolvi aproveitar para reestruturar o html (que está super sujo, podem conferir) e aplicar alguns conhecimentos que adquiri desde a criação do blog: otimização do CSS, performance do javascript e o badalado html5.

 

Como escrever um bom HTML?

Resolvi refazer todo o HTML (e CSS) deste blog durante a migração para PHP. O código estava sujo (várias implementações "puxadinhos" foram feitas depois de pronto) e seria mais produtivo refazer tudo para transformar em template ao invés de tentar aproveitar alguma coisa (e posteriormente melhorar o código).

Em pouco mais de uma hora a estrutura estava montada com os novos elementos do HTML5 (sections, articles, navs, asides) e eu estava terminando também a base de CSS, com especificações da estrutura e visual do blog.

Considero minha produtividade para montar um html é razoavelmente boa, mas confesso que ontem me surpreendi, fui procurar o motivo da produtividade e reparei como mudei minha forma de desenvolver ao longo do tempo.

Abaixo algumas dicas que consegui listar como as razões para atualmente eu conseguir desenvolver de forma muito mais eficiente e com um código muito melhor os htmls.

 

#1 Conheça o CSS – escreva menos

Não adianta, se você sabe o que é possível fazer com uma linguagem (CSS) você não precisa ficar quebrando a cabeça e sujando o código com workarrounds. Então minha primeira dica é estudar CSS: saber o que é possível fazer, o que faz cada propriedade, valores permitidos, etc.

Meu maior aumento de produtividade relacionado ao CSS se deve ao fato de atualmente aproveitar ao máximo o que o CSS se propõe a fazer: estilos em cascata.

Criei dois exemplos do mesmo código para ilustrar isso, estão bem simples mas acho que conseguem mostrar como é possível escrever mais rápido se pensar antes na estrutura do HTML e reduzir as classes e elementos do código.

Exemplo de código "sobrecarregado" com classes:

 <ul class="comments">
    <li class="comment_odd">
        <img class="thumb" src="src" alt="avatar" />
        <span class="author">Name</span> - <span class="date">dd-mm-yyy</span>
        <div class="comment">
            Comment
        </div>
    </li>
    <li class="comment">
        <img class="thumb" src="src" alt="avatar" />
        <span class="author">Name</span> - <span class="date">dd-mm-yyy</span>
        <div class="comment">
            Comment
        </div>
    </li>
</ul>

CSS
ul.comments{
    padding: 10px;
}
li.comment_odd, li.comment{
    padding: 10px;
    border bottom: 1px solid #333;
    margin-bottom: 5px;
}
li.comment_odd{
    background: #efefef;
}
ul.comments img.thumb{
    float: left;
    margin: 0 10px 5px 0;
    border: 1px solid #ccc;
}
ul.comments li .comment{
    color: #666;
    font-size: 1.1em;
}

 

E agora um bloco de código com a mesma função porém com um html mais limpo e um css aproveitando as heranças de estilo.

<ul class="comments">
    <li class="odd">
        <img src="src" alt="avatar" />
        <span class="author">Name</span> - <span class="date">dd-mm-yyy</span>
        <div>
            Comment
        </div>
    </li>
    <li>
        <img src="src" alt="avatar" />
        <span class="author">Name</span> - <time>dd-mm-yyy</time>
        <div>
            Comment
        </div>
    </li>
</ul>

CSS
ul.comments{
    padding: 10px;
}
    ul.comments li{
        padding: 10px;
        border bottom: 1px solid #333;
        margin-bottom: 5px;
    }
    ul.comments li.odd{
        background: #efefef
    }
        ul.comments li img{
            float: left;
            margin: 0 10px 5px 0;
            border: 1px solid #ccc;
        }
        ul.comments li div{
            color: #666;
            font-size: 1.1em;
        }

 

Neste curto exemplo as otimizações não são tão visíveis no CSS (por ser poucos elementos e classes) mas em alguns layouts um pouco mais complexos a diferença é muito perceptível. É possível "economizar" o uso de várias classes (mudei inclusive uma tag, para o time do html).

 Algumas coisas que devem ser utilizadas:

  • Usar CSS sprite sempre que possível
  • Evitar o abuso de classes
  • Backgrounds podem retirar várias imagens do seu HTML, mas analise do ponto de vista do conteúdo: a imagem faz parte do conteúdo ou do layout?

#2 Semântica – escreva direito

Antes eu montava um html pensando no layout da página: como posicionar os elementos (e já era tableless, só quem viveu lembra do tempo das tables dentro de tables), espaçamentos, backgrounds… hoje em dia eu digo: não faça o html pensando no layout, faça pensando no conteúdo.

Este item pode parecer contraditório ao primeiro, mas na verdade são complementares. Você precisa saber como é o layout pois certamente isto influencia algumas coisas no HTML, mas você deve guiar sua estrutuar ao conteúdo e não ao layout.

Olhe o seu layout, pense em como será a estrutura da sua página, olhe o conteúdo e pense quais tags se encaixam para cada área. Com o HTML5 está rolando debates intensos sobre o uso de articles ou sections, então é melhor pensar antes de começar a escrever… 🙂

Outra dica para isso ficar melhor é na hora de escrever o html não desenvolver o CSS, no início isso causava improdutividade pois eu demorava mais para adaptar o CSS depois, hoje isso aumenta minha produtividade pois apesar de não escrever o CSS já vou matutando como ele será, e isso vai mudando conforme escrevo. Quando transformar o conteúdo HTML no layout, o CSS já está pensado e revisado! 😀

Esta segunda basicamente diz: a web é semântica e o HTML é conteúdo, CSS é layout.

 

#3 Otimize

Eu acredito que quase todo o código pode ser otimizado, utilizando estas técnicas eu gosto muito do resultado final – mas depois de pronto acabo percebendo que algumas coisas poderiam ser melhoradas.

Nesta última etapa incluo também o desenvolvimento do javascript (leia: javascript: extreme performance) que com a popularização da banda larga a interface (renderização do HTML e código javascript) representa uma porcentagem muito maior da espera do usuário para ver a página.

Depois de tudo pronto "leia" seu código, veja se pode otimizar, reduzir seu CSS, minimizar o número de requisições (evitar muitos .js e .css separados, usar CSS Sprite, transformar backgrounds que usam imagens em cores/css3, etc).

 

Estas são três regras que eu procuro seguir sempre que vou desenvolver um HTML, quais são as dicas/críticas de vocês?

Comentem que eu atualizo o post ou faço uma nova lista baseado nas sugestões! 🙂

CKEditor – alterando o layout

Sempre trabalhei muito com o TinyMCE Editor, mas resolvi testar o CKEditor num projeto no qual estou trabalhando. Não tenho uma opinião formada a respeito, principalmente quando comparado ao TinyMCE. Conheço esse segundo há anos, sei das limitações, como trabalhar com ele, oq eu funciona e o que não funciona… por enquanto, o CKEditor me parece ser uma boa alternativa.

Para quem está começando com ele, indico a documentação oficial da versão corrente (3.x) como base.

Vamos a alguns exemplos de como customizá-lo (tudo isso sendo feito dentro do config.js, o arquivo de configuração do editor):

Alterar o idioma para português

CKEDITOR.editorConfig = function( config ) {
    config.language = "pt-br";
};

Definir os itens das toolbars

CKEDITOR.config.toolbar = [
   ["Source"],
 ["Bold","Italic","Underline","StrikeThrough","-","Undo","Redo","-","Cut",

"Copy","Paste","PasteText","PasteFromWord","Find","Replace","-",
"Outdent","Indent","NumberedList","BulletedList"],
   ["-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"],
   ["Image","Table","-","Link","Flash","TextColor","BGColor","Format","Font","FontSize"],
 ];

Existem diversas outras opções para as toolbars, veja em http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

Retirando o rodapé

CKEDITOR.config.removePlugins = "elementspath";
CKEDITOR.config.resize_enabled = false;

Por hora, é isso. Em breve faço um post de como utilizar o editor!

Elementos do HTML5 funcionando no IE (6, 7, 8)

Aproveitando o tempo entre uma demana e outra comecei a estudar mais HTML 5 e a fazer uns testes de código, afinal ler não basta – pra ser ninja tem que aprender fazendo.

Um problema do uso das novas tags no Internet Explorer: como as tags "não existem" para o IE ele não permite que você estilize elas, o que impossibilitaria o uso correto de alguns elementos semânticos do HTML, afinal colocar um <article> e ter que usar uma <div> dentro para estilizar não faz sentido nenhum e suja o código sem necessidade.

Este seria um impedimento para passar a utilizar HTML 5 nos site se não fosse um work-arround que "força" o Internet Explorer a reconhecer estes novos elementos, assim eles passam a ser estilizados por qualquer CSS que você tenha atribuído a eles.

A gambiarra para que tudo fique ok é utilizar o javascript para criar estes elementos no seu documento, uma vez que eles tenham sido criados pelo javascript eles existem no seu DOM – e passam a ser estilizados.

Estilizando HTML 5 no Internet Explorer

Insira o código abaixo no <head> da sua página e toda a estilização dos elementos da lista abaixo deverá funcionar:

<!--[if IE]>
<script type="text/javascript">
document.createElement("article");
document.createElement("nav");
document.createElement("section");
document.createElement("header");
document.createElement("aside");
document.createElement("figure");
document.createElement("legend");
document.createElement("footer");
</script>
<![endif] -->

 

Pronto, agora você já pode adaptar seus htmls utilizando as novas tags do html5 sem nenhum "prejuízo" para o tempo de desenvolvimento, melhorando a semântica do seu código.

Com o HTML alterado é só mudar o CSS e começar para aplicar as classes e estilos nos novos elementos. Recomendo que você leia sobre CSS Orientado a Objetos – apesar do nome polêmico a apresentação de slides mostra uma metodologia bacana que ajuda a economizar código e facilita bastante alterações no CSS.

Acredito que em breve isso será importante para os buscadores, que possivelmente irão "ler" melhor o conteúdo da internet devido a esta segmentação e descrição mais detalhada de cada parte do conteúdo.

Dúvidas, críticas e sugestões nos comentários! 🙂

CSS3 – Background Gradient

Retomei meus estudos de HTML5, que eu gostaria de publicar por aqui mas sempre acabo apenas na leitura, mas resolvi utilizar CSS3 na versão nova do And After, deixando de lado preocupações visuais com o Internet Explorer.

Curvas arredondadas e backgrounds com gradientes funcionarão apenas em navegadores com suporte ao CSS3, porém posicionamento, tamanho, formatação de texto e funcionalidades funcionarão perfeitamente em qualquer navegador. Acho que esse é o método de desenvolvimento ideal – e mais rápido.

Vou abordar alguns temas relacionados ao CSS3 nos próximos posts, vamos ao background com degradê!

 

Background gradient com CSS

Fazer um background sem imagens tem diversas vantagens, entre as principais posso listar: menos kb para carregar, facilidade na manipulação por javascript, manutenção mais fácil.

Debatendo com o @MathieuRousseau sobre o uso ou não do CSS3, levantamos a questão da infelicidade que é não existir um padrão bem definido para o CSS3, mas a implementação não é tão dolorosa assim, apesar de ainda não funcionar corretamente uma forma cross-browser única.

Vamos a exemplos do código!

Gradiente vertical

.boxVertical {
background-color: #333; /* cor do bg caso tudo abaixo de errado */
background-image: url(images/linear_bg_2.png); /* imagem usada caso não exista suporte ao css3 (IE) */
background-image: -moz-linear-gradient(100% 100% 90deg, #333, #efefef);
/* para o mozzila */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#333)); /* para o webkit*/ }

 Gradiente horizontal

.boxHorizontal {
background-color: #333; /* cor do bg caso tudo abaixo de errado */
background-image: url(images/linear_bg_2.png); /* imagem usada caso não exista suporte ao css3 (IE) */
background-image: -moz-linear-gradient(100% 100% 180deg, #333, #efefef);
/* para o mozzila */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#333)); /* para o webkit*/
}

 

Como usar o -moz-linear-gradient

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Point

Descrição: Interpretado como "background-position", define onde deve começar o gradiente.
Valores: porcentagem, pixels, "left", "center", or "right" para horizontal e "top", "center", ou "bottom" para vertical.

 

Angle

Descrição: ângulo da direção do gradiente.
Valores: degrees (90deg), grads (100grad), radians (1rad)

 

Stop

Descrição: valor composto de uma cor seguido por uma "parada" opcional (percentual ou px) que define a cor e a extensão dela no gradiente.
Valores: porcentam ou px (stop) e cor (hexadecimal, rgb…)

 

Para mais informações leia a documentação completa (em inglês)

 

Como usar o -webkit-gradient

 -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

 

type

Descrição: define o tipo de gradiente
Valores: linear ou radial

 

point

Descrição: um par de valores separados, que definem de onde irá o gradiente. Os dois pares definem início e fim de X e Y do gradiente.
Valores: pixels, porcentagem ou top, bottom, left e right

 

radius

Descrição: define o raio do gradiente radial
Valores:

 

Stop

Descrição: valor composto de uma cor seguido por uma "parada" opcional (percentual ou px) que define a cor e a extensão dela no gradiente.
Valores: porcentam ou px (stop) e cor (hexadecimal, rgb…)

 

Curiosidades

O webkit, pelo menos até agora, continua carregando a imagem de background, mesmo que ela não seja exibida.

O Firefox (-moz) a partir da versão 3.6 não faz o download da imagem quando é utilizado o gradient, economia de uma requisição http!

 

Dicas Go Horse

  • O Internet Explorer sempre será um problema, porém ignorá-lo completamente não é uma solução boa. Mas se preocupar muito com ele é uma péssima idéia.
  • O site não precisa renderizar exatamente igual em todos os navegadores, deixe esta idéia de lado se preocupe apenas em fazê-lo funcionar em quase todos os navegadores.
  • Na nova versão do And After e no Eu Compraria! Shop resolvi ignorar o Internet Explorer quanto a border-radius e background-gradient. O usuário de IE poderá usar e navegar no site todo, sem problemas… porém a experiência visual (falei bonito, ein?) de quem utilizar um navegador decente será muito mais agradável: shadows, text-shadows,border-radius,background-gradient… não usei imagem de background no IE, apenas a cor de fundo, assim economizo requisições http.

 

Não achei muita coisa em português explicando sobre o background-gradient, então resolvi explicar um pouco mais ao invés de só publicar exemplos, espero que seja útil.

Duvidas e sugestões nos comentários!

 

Mais referências sobre background-gradient em: